Skip to content
docs-sitekit
Get started

Menu

Type to search the docs.

↑ ↓ move · Enter open · Esc close

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.

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, the button of shadcn/ui, and buttonVariants for a link.
  • ToneBadge, the only place a status color is chosen.
  • Icon, a lucide icon or a brand logo.

Layout

  • SectionHeader, a mono eyebrow, a heading and a lede.
  • Hero, a badge, a headline, a lede, a command and actions.
  • CtaBand, a closing headline with a command and actions.
  • SiteFooter, the brand, link columns and a legal bar.

Content

  • ItemCard, a link card and its grid, for catalogs.
  • FeatureGrid, an icon, an eyebrow, a title and text.
  • StatRow, two to five numbers, each with a label and a note.
  • FlowDiagram, steps in a row that stack on small screens.
  • Callout, a note, a tip, an important point, a warning or a caution.
  • SideCard, metadata, links and tags beside the text of a detail page.

Reference and commands

Navigation and page

  • Breadcrumbs, the trail to the current page.
  • CatalogFilter, a text field and tag buttons that narrow the cards of an index page.
  • PageInfo, 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 <name> 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 is the way to show a status. Its documentation is the one of shadcn/ui.

card

The Card of shadcn/ui, generated by its CLI. No component of the kit uses it, and ItemCard is the card for a catalog. Its documentation is the one of shadcn/ui.

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. 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.

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.

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. Its documentation is the one of shadcn/ui.

The parts of the Breadcrumb of shadcn/ui, generated by its CLI. Only Breadcrumbs uses them, and that is the component to use. Its documentation is the one of shadcn/ui.

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 <dialog> 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.
Edit this page

Last updated