Components
Browse examples, variations, and the API for each component.
Accordion
<cad-accordion>Collapsible sections.
Alert
<cad-alert>Status messages and actions.
Avatar
<cad-avatar>Initials, portraits, and presence.
Doodle avatar
<cad-doodle-avatar>Hand-drawn faces.
Badge
<cad-badge>Short status and category labels.
Blockquote
<cad-blockquote>Quotations with optional sources.
Bookmark
<cad-bookmark>Save or unsave an item.
Breadcrumb
<cad-breadcrumb>Links to parent pages.
Button
<cad-button>Actions, form submission, and navigation.
Callout
<cad-callout>Tips and warnings within a page.
Card
<cad-card>Related content in one container.
Chart
<cad-chart>Bar, line, and donut charts.
Checkbox
<cad-checkbox>Independent on/off choices.
Checklist
<cad-checklist>Recommendations and review results.
Code block
<cad-code-block>Code with syntax colors and optional copying.
Divider
<cad-divider>Lines between sections.
Drawer
<cad-drawer>A task panel at the edge of the screen.
Empty state
<cad-empty-state>Missing content and the next step.
Footer
<cad-footer>Links and information at the bottom of a page.
Header
<cad-header>Brand, navigation, and actions.
Highlight
<cad-highlight>Marker and underline emphasis.
Icon
<cad-icon>Hand-drawn symbols.
Input
<cad-input>Single-line text fields.
Kanban
<cad-kanban>Cards organized into columns.
List
<cad-list>Bullet and numbered lists.
Link
<cad-link>Navigation with a coral underline.
Modal
<cad-modal>A dialog for a decision or short task.
Note
<cad-note>Handwritten annotations and reminders.
Pagination
<cad-pagination>Navigation between pages.
Popover
<cad-popover>Extra information beside a trigger.
Progress
<cad-progress>Task completion and ongoing work.
Radio
<cad-radio>One choice from a group.
Skeleton
<cad-skeleton>Placeholders while content loads.
Slider
<cad-slider>Select a number or range.
Spinner
<cad-spinner>An indicator for ongoing work.
Steps
<cad-steps>Stages and progress in a process.
Sticker
<cad-sticker>Decorative text labels.
Switch
<cad-switch>Settings that take effect immediately.
Tabs
<cad-tabs>Switch between related panels.
Table
<cad-table>Rows and columns in a handwritten style.
Table of contents
TableOfContents.astroLinks to page sections, for Astro.
Textarea
<cad-textarea>Multi-line text fields.
Toast
<cad-toast>Temporary notifications, with an optional action.
Tooltip
<cad-tooltip>Short hints on hover or focus.