Components

Every component, grouped as in the playground. Each page has a rendered example, its source, how to write it, and its props. These pages are generated from the catalog by npm run docs.

Any element inside a screen can also take tooltip="…"; see Tooltips and open states.

Canvas

Component	What it's for
board	Root canvas (artboard). Holds Screens side by side, plus optional Notes and Flow lines. Must be the root element.
screen	One view of the product in a device frame. Children stack vertically.
note	Sticky-note annotation. Put it on the Board beside screens, or inside a Screen next to what it explains.
flow	An arrow between two elements or screens, named with #id. Write each flow on its own line after the screens, indented like a screen (not inside one): flow signin -> home "Tap Sign in".

Layout

Component	What it's for
stack	Flex container. The main layout primitive (rows, columns, sidebars, toolbars).
grid	Equal-width columns that wrap. Good for card grids and galleries.
card	Bordered container with optional title. Children stack vertically.
accordion	Collapsible section: a title row with a chevron, children below when open. Stack several for an FAQ.
divider	Thin separator line.
spacer	Empty space. Without a size it grows to push siblings apart.

Content

Component	What it's for
heading	Heading text, level 1 (largest) to 3.
text	Body text, or placeholder lines when `lines` is set and `text` is not.
bullets	Bulleted, numbered or icon list of short lines.
image	Image placeholder: a box with an X through it, or a map.
chart	Chart placeholder: a generic line, bar, area, pie or donut shape, no data.
icon	Line icon from Lucide, or a brand logo (brand-google, brand-apple, …).
avatar	Round avatar with initials or a person silhouette.
badge	Small pill label for counts or statuses.

Controls

Component	What it's for
button	Button. Primary is filled, secondary is outlined, ghost is text only. With menu and open, a dropdown menu.
input	Text field with optional label. Set multiline for a textarea.
checkbox	Checkbox with label.
radio	Radio button with label.
toggle	On/off switch with label on the left.
select	Dropdown field. With options and open, the list shows below it.
slider	Slider with one handle, or two with `range`.
progress	Progress bar, ring (circle), or stepper (steps).
calendar	Month calendar.

Component	What it's for
navbar	Top app bar. Place first in a Screen.
tabbar	Bottom tab bar for mobile. Place last in a Screen (before overlays).
tabs	In-page tabs with an underline on the active one.
pagination	Page numbers with previous and next.
list	Vertical list of ListItems.
listitem	Row in a List. Omit title for a placeholder bar.
table	Table with headers. Rows are placeholder bars unless `data` is given.

Overlays

Component	What it's for
modal	Centered dialog over the screen. Must be a direct child of a Screen, listed last.
drawer	Panel sliding in from an edge: side nav (left), filters/details (right), or bottom sheet. Must be a direct child of a Screen, listed last.
toast	Short message over the screen, e.g. after saving. Must be a direct child of a Screen, listed last.

tsquare 0.9.0 · View this page on GitHub