Design system

PropsTable

A component's API as a table.

import { PropsTable } from "@flinbu/seed";

Button props

Prop	Type	Default	Description
`variant`	`'primary''secondary''ghost''tertiary''destructive'`	`'primary'`	How much the action stands out.
`size`	`'sm''md''lg'`	`'md'`	32, 40 or 48 px tall.
`loading`	`boolean`	`false`	Shows a spinner and blocks clicks.
`children` *required	`ReactNode`	–	The label, a verb.

import { Button, PropsTable } from "@flinbu/seed";

<PropsTable className="w-full" component="Button" props={[
  { name: "variant", type: "'primary' | 'secondary' | 'ghost' | 'tertiary' | 'destructive'", default: "'primary'", description: "How much the action stands out." },
  { name: "size", type: "'sm' | 'md' | 'lg'", default: "'md'", description: "32, 40 or 48 px tall." },
  { name: "loading", type: "boolean", default: "false", description: "Shows a spinner and blocks clicks." },
  { name: "children", type: "ReactNode", required: true, description: "The label, a verb." },
]} />

Use it for

Component docs.

Use something else for

Long prose: keep descriptions to one line.

Props

Prop	Type	Default	Description
`props`	`{ name, type?, default?, required?, description? }[]`	–	The rows.
`component`	`string`	–	Names the table.
`stackOnMobile`	`boolean`	`true`	Below 768px each prop is a card: name, then Type, Default and Description.

Accessibility

A named table; required props say 'required' to screen readers.
On phones each prop is a card and every value keeps its header.