ComponentProps

Read-only docs renderer for a ComponentContract. Replaces hand-authored props tables — pass a contract, get the full prop list with TypeScript-shaped types, defaults, descriptions, and design taxonomy badges.

The contract IS the source of truth, so the docs update when the contract changes — no per-page maintenance. Cousin of StudioSettingsPanel (the live mutator inside Studio); both read contracts, one displays, one mutates.

Usage

import { ComponentProps } from "@/components/component-props";
import { CalloutContract } from "@gradeui/ui";

<ComponentProps contract={CalloutContract} />

Examples

Callout

A simple component — one variant prop. Shows the default “user-facing” filter (knob / content / structured).

No user-facing props.

Carousel

A compound component with mixed prop types — boolean knobs, enums, and a structured autoplay config.

Prop	Type	Default	Description	Kind
loop?	boolean	true	Wrap from the last slide back to the first. Default true — the natural fit for hero rotations. Turn off for finite onboarding sequences.	knob
align?	"start" \| "center" \| "end"	"start"	How slides line up inside the viewport when not at 100% width. 'start' is full-bleed; 'center' gives the 'peek of neighbours' carousel look.	knob
slidesPerView?	number	1	How many slides show at once. 1 for hero rotations; 3 for thumbnail strips; etc. For media-query responsive layouts, leave this at 1 and override `--rds-carousel-slide-basis` on each Slide via CSS.	knob
autoplay?	boolean \| { delay?: number; pauseOnHover?: boolean; pauseWhenOffscreen?: boolean }	false	`true` for sensible defaults (5s, pause on hover, pause offscreen). Object form: `{ delay, pauseOnHover, pauseWhenOffscreen }`. Per-slide overrides go on `<Carousel.Slide duration={ms}>`.	structured
draggable?	boolean	true	Disable when slide content (a Map, a chart, a draggable card) needs to swallow drag events.	knob

Button — including plumbing

Pass show="all" to include plumbing / event / ref props (the things Studio hides from the settings panel by default).

Prop	Type	Default	Description	Kind
variant?	unknown	—	—	plumbing
size?	"sm" \| "md" \| "lg" \| "icon"	—	t-shirt scale aligned with Tabs/ToggleGroup heights (sm=h-7, md=h-8, lg=h-10). `default` still works as an alias for `md`.	knob
asChild?	boolean	—	renders as the child element (use to wrap <a>/<Link>)	plumbing
disabled?	boolean	—	—	knob

The design axis

Every prop in a contract is tagged with a design axis that decides where it surfaces:

knob — discrete design choice (variants, sizes, booleans). Renders in the Studio settings panel as Select / Switch / ToggleGroup.
content — text / URL the user authors (alt, src, label). Renders as Input / Textarea.
structured— discriminated union with sub-fields per kind. MediaSurface's source is the canonical case.
plumbing / event / ref — needed in code, hidden from the design panel by default. Pass show="all" to surface them anyway.

Registry browsing

COMPONENT_CONTRACTS is the full registry. Use it to render the props for any allow-listed component without per-page imports:

import { COMPONENT_CONTRACTS } from "@gradeui/ui";

<ComponentProps contract={COMPONENT_CONTRACTS.MultiSelect} />

53 components registered.

AI Chat