Checklist
Structured launch and rollout checklist with status markers for done, current, pending, and blocked items.
For isolated previews, theme switching, and sandbox editing, open the Checklist playground on holydocs.com .
When to use
Use this component when you need stronger document structure, annotation, or narrative pacing inside a page.
Live Examples
Every example below renders the real component directly inside HolyDocs, followed by the exact MDX you can paste into a page.
Launch Readiness
Product launch checklist with mixed statuses.
Confirm the release notes are linked from the navigation and included in the search index.
Smoke test the legacy URL map before the DNS cutover window opens.
Add a post-launch alert for 404 spikes and search zero-result increases.
mdx<Checklist title="Docs launch readiness"> <CheckItem status="done" title="Publish the changelog page"> Confirm the release notes are linked from the navigation and included in the search index. </CheckItem> <CheckItem status="current" title="Validate production redirects"> Smoke test the legacy URL map before the DNS cutover window opens. </CheckItem> <CheckItem status="pending" title="Enable analytics alerts"> Add a post-launch alert for 404 spikes and search zero-result increases. </CheckItem></Checklist>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | -- | Optional heading for the checklist. |
Usage
Start from this baseline shape and then tailor the copy, data, or nesting to the page you are writing.
mdx<Checklist title="Docs launch readiness"> <CheckItem status="done" title="Publish the changelog page"> Confirm the release notes are linked from the navigation and included in the search index. </CheckItem> <CheckItem status="current" title="Validate production redirects"> Smoke test the legacy URL map before the DNS cutover window opens. </CheckItem> <CheckItem status="pending" title="Enable analytics alerts"> Add a post-launch alert for 404 spikes and search zero-result increases. </CheckItem></Checklist>
Tips
- Keep the surrounding copy short so the component remains the focal point instead of becoming redundant chrome.
- Prefer one clear job per component instance. If a block is trying to explain, navigate, and warn at the same time, split it up.
- Check the page in both light and dark mode when you stack multiple content components together. Dense compositions can feel heavier than expected.
Related Components
Highlighted message blocks for drawing attention to notes, tips, warnings, and other contextual information.
More
- Interactive playground: Checklist on holydocs.com
- Component library index: /components