Checklists

Use interactive checklists when readers should be able to mark progress directly in the docs.

Checklists are useful for launch prep, migration tasks, review passes, and any workflow where readers benefit from ticking items off as they go.

Use in MDX

Wrap checklist items with Checklist and use ChecklistItem for each row:

<Checklist>
  <ChecklistItem>Build succeeds with `npm run build`</ChecklistItem>
  <ChecklistItem>Search works in `npm run preview`</ChecklistItem>
  <ChecklistItem checked>Branding assets are updated</ChecklistItem>
</Checklist>

Use the optional checked prop if you want an item to render preselected.

Implementation notes

The components live in src/components/docs/Checklist.astro and src/components/docs/ChecklistItem.astro. Their shared presentation is controlled by the .docs-checklist* rules in src/index.css.

Preview