Design-system components
MDX pages can use @ktbhealth/ui components — see how they render.
The docs site maps common MDX elements onto components from
@ktbhealth/ui, the org design system.
Use them in any .mdx file — they are provided globally, no imports needed.
Badge
Status labels use the KTB Badge:
Cards
<Cards> lays out <Card> entries in a responsive grid:
Callouts
<Callout> renders as a KTB Alert. Types: info, warn, error,
success, idea.
Callouts keep the same type/title API as fumadocs.
Warnings map to the default alert style.
Error callouts use the destructive variant.
Tabs
KTB Tabs are built on Base UI — set defaultValue on Tabs and value
on each trigger/panel:
bun install
bun run devAccordion
KTB Accordion items take a value; the root accepts multiple:
Tables
Markdown tables render with the KTB Table components automatically:
| Repo | Purpose |
|---|---|
product | KTB Health app monorepo |
ui | Design system (@ktbhealth/ui) |
docs | This documentation site |
Storybook
The live component catalog is in Storybook — locally at
http://localhost:3100 (bun run dev in the storybook repo) or deployed.
Check it before building new UI.