Arrange the parts
Add, omit, or reorder Card sections and Tabs panels.
Composition
Combine components and slots to build the interface you need. Your application supplies the content and actions.
How to compose
Add content with slots
Place icons, labels, and actions in the slots each component provides.
Keep built-in behavior
Components handle focus, keyboard input, and form validation. Your app handles what happens next.
Import icons separately
Built-in controls include their own marks. Import cad-icon only when you add an icon.
Card with a badge
Import Card and Badge for this example.
Review search delivery
Compare query speed and recovery time before choosing an index.
Style HTML and Markdown
Wrap HTML or rendered Markdown in class="cad-prose". The stylesheet covers headings, lists, quotes, code, and tables.
Semantic Markdown output
Investigate before changing code
Start with an observable hypothesis and preserve the evidencebefore attempting a fix.
A small reproducible case is more useful than a large guess.
const evidence = reproduce(issue)| Signal | Meaning |
|---|---|
| Repeatable | The hypothesis can be tested |
Navigation without JavaScript
Use navigation.css with HTML links. Mark the current page witharia-current="page".
Keep imports small
Import components by subpath. Charts load Rough.js only when you import@caderno-ui/elements/chart. Bundle sizes are checked in CI.