CommandTable

A command and what it does.

Preview

sitekit initCreate a site
sitekit checkCheck that it is safe to publish
sitekit addRestore a component
sitekit upgradeBring a site up to date

src/examples/command-table/example.astro

---
import { CommandTable } from "@/presentation/components/site/command-table";
---

<CommandTable
  rows={[
    { command: "sitekit init", text: "Create a site" },
    { command: "sitekit check", text: "Check that it is safe to publish" },
    { command: "sitekit add", text: "Restore a component" },
    { command: "sitekit upgrade", text: "Bring a site up to date" },
  ]}
/>

Add to your site

npx docs-sitekit add command-table

It writes these files, and keeps a file you changed:

src/presentation/components/site/command-table.tsx

It requires nothing else from the registry.

Props

Built from the TypeScript types and the TSDoc comments of the component, so they cannot drift from the code.

Props of CommandTable
Key	Type	Default	Allowed values	Description
`rows`	readonly CommandRow[]	required	-	The commands, in the order shown.

Fields of CommandRow
Key	Type	Default	Allowed values	Description
`command`	string	required	-	The command, in code.
`text`	string	required	-	What it does.
`note`	string	-	-	More detail, shown from the lg breakpoint up.

Variants and states

With notes

A note after the text, shown from the lg breakpoint up.

sitekit initCreate a siteWrites only into --dir
sitekit checkCheck the buildExits with 1 on an error

src/examples/command-table/with-notes.astro

---
import { CommandTable } from "@/presentation/components/site/command-table";
---

<CommandTable
  rows={[
    { command: "sitekit init", text: "Create a site", note: "Writes only into --dir" },
    { command: "sitekit check", text: "Check the build", note: "Exits with 1 on an error" },
  ]}
/>

About

A list of commands and what each one does, in two columns from the md width and one under it. A row can have a note, which is shown from the lg width.

Accessibility

It is a list, and each command is a <code> element, not a control.
The note is hidden under the lg width, so put anything a reader needs in text.

Source

command-table.tsx

Edit this page

Last updated 5 November 2026