# Components The design system is a set of React components, written in the shadcn style and rendered at build time. Only the copy button hydrates. The mobile menu is a native dialog and a few lines of script, see [Performance](https://miguelcolmenares.com/docs-sitekit/docs/performance/). This page is the index of the Components section. Each component below has a page with a live preview that you can show in the other theme, the code that produced it, the command that adds it, a table of its props, each of its variants and its accessibility notes. The preview and the code come from the same file, so they cannot drift apart, and the table is generated from the TypeScript types and the TSDoc of the component. ## Foundation - [Button](https://miguelcolmenares.com/docs-sitekit/components/button/), the button of shadcn/ui, and `buttonVariants` for a link. - [ToneBadge](https://miguelcolmenares.com/docs-sitekit/components/tone-badge/), the only place a status color is chosen. - [Icon](https://miguelcolmenares.com/docs-sitekit/components/icon/), a lucide icon or a brand logo. ## Layout - [SectionHeader](https://miguelcolmenares.com/docs-sitekit/components/section-header/), a mono eyebrow, a heading and a lede. - [Hero](https://miguelcolmenares.com/docs-sitekit/components/hero/), a badge, a headline, a lede, a command and actions. - [CtaBand](https://miguelcolmenares.com/docs-sitekit/components/cta-band/), a closing headline with a command and actions. - [SiteFooter](https://miguelcolmenares.com/docs-sitekit/components/site-footer/), the brand, link columns and a legal bar. ## Content - [ItemCard](https://miguelcolmenares.com/docs-sitekit/components/item-card/), a link card and its grid, for catalogs. - [FeatureGrid](https://miguelcolmenares.com/docs-sitekit/components/feature-grid/), an icon, an eyebrow, a title and text. - [StatRow](https://miguelcolmenares.com/docs-sitekit/components/stat-row/), two to five numbers, each with a label and a note. - [FlowDiagram](https://miguelcolmenares.com/docs-sitekit/components/flow-diagram/), steps in a row that stack on small screens. - [Callout](https://miguelcolmenares.com/docs-sitekit/components/callout/), a note, a tip, an important point, a warning or a caution. - [SideCard](https://miguelcolmenares.com/docs-sitekit/components/side-card/), metadata, links and tags beside the text of a detail page. ## Reference and commands - [ReferenceTable](https://miguelcolmenares.com/docs-sitekit/components/reference-table/), names in code with a type, a default, the values allowed and a text. - [CommandTable](https://miguelcolmenares.com/docs-sitekit/components/command-table/), a command and what it does. - [CommandBox](https://miguelcolmenares.com/docs-sitekit/components/command-box/), a copyable shell command. ## Navigation and page - [Breadcrumbs](https://miguelcolmenares.com/docs-sitekit/components/breadcrumbs/), the trail to the current page. - [CatalogFilter](https://miguelcolmenares.com/docs-sitekit/components/catalog-filter/), a text field and tag buttons that narrow the cards of an index page. - [PageInfo](https://miguelcolmenares.com/docs-sitekit/components/page-info/), the edit link and the date of the last change. ## Listed without a page These entries of the registry have no page, each for a reason. `sitekit list` prints all of them, and `sitekit add ` restores any of them. A test fails when an entry of the registry has neither a page nor a place in this list. ### cn The helper that joins class names with `clsx` and `tailwind-merge`. It draws nothing, so it has nothing to preview. Every component that takes a `className` requires it. ### badge The `Badge` of shadcn/ui, generated by its CLI. No component of the kit uses it, because [ToneBadge](https://miguelcolmenares.com/docs-sitekit/components/tone-badge/) is the way to show a status. Its documentation is [the one of shadcn/ui](https://ui.shadcn.com/docs/components/badge). ### card The `Card` of shadcn/ui, generated by its CLI. No component of the kit uses it, and [ItemCard](https://miguelcolmenares.com/docs-sitekit/components/item-card/) is the card for a catalog. Its documentation is [the one of shadcn/ui](https://ui.shadcn.com/docs/components/card). ### tabs The `Tabs` of shadcn/ui, generated by its CLI, built on Radix. No component of the kit uses it, and it needs a client directive to work on an Astro page. Its documentation is [the one of shadcn/ui](https://ui.shadcn.com/docs/components/tabs). The Preview and Code tabs of these pages are a few lines of script, not this component. ### tooltip The `Tooltip` of shadcn/ui, generated by its CLI, built on Radix. No component of the kit uses it, and it needs a client directive to work on an Astro page. Its documentation is [the one of shadcn/ui](https://ui.shadcn.com/docs/components/tooltip). ### separator The `Separator` of shadcn/ui, generated by its CLI, built on Radix. No component of the kit uses it. Its documentation is [the one of shadcn/ui](https://ui.shadcn.com/docs/components/separator). ### sheet The `Sheet` of shadcn/ui, generated by its CLI, built on the dialog of Radix. No component of the kit uses it: the mobile menu is a native dialog, see [Performance](https://miguelcolmenares.com/docs-sitekit/docs/performance/). Its documentation is [the one of shadcn/ui](https://ui.shadcn.com/docs/components/sheet). ### breadcrumb The parts of the `Breadcrumb` of shadcn/ui, generated by its CLI. Only [Breadcrumbs](https://miguelcolmenares.com/docs-sitekit/components/breadcrumbs/) uses them, and that is the component to use. Its documentation is [the one of shadcn/ui](https://ui.shadcn.com/docs/components/breadcrumb). ### site-header The sticky header of every page, with the brand, the navigation, the search button, the repository button and the theme switch. The layout renders it once, and its script finds the theme switch and the menu button by attribute in the whole page, so a second copy would fight the first one. The page you are reading shows it at the top. ### mobile-menu The navigation dialog for small screens, a native `` and a few lines of script. The layout renders it after the header, and the button in the header opens it. Its script takes the first dialog of the page, so it cannot be previewed beside the real one. Open the menu of this page on a screen under 768 px wide to see it. ## Rules - Borders of 1px, never shadows. - Mono type for names, numbers and commands. - Tones only through `ToneBadge`. - Components take data through props. They never import site content.