Intent → component map

A reverse lookup keyed by what you're trying to do, not by component name.

Intent → component map

Cynosure ships ~90 components. Most consumer-side friction isn’t missing capability — it’s not knowing which component answers a given intent. The table below is a reverse lookup keyed by “I need to …” instead of by component name.

Use this page when you’d otherwise reach for an inline style={{ display: 'flex' }}, manual recursion, or a hand-rolled overflow container — odds are there’s a primitive that already covers it.

Containers & overflow

I need to…	Reach for	Skip the workaround
Constrain page width with safe padding	`Container`	`<div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 1rem' }}>`
Make a region scroll without breaking native scroll	`ScrollArea`	`<div style={{ height: 400, overflow: 'auto' }}>`
Center content (flex centering, vertically & horizontally)	`Center`	`<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>`
Hold a fixed aspect ratio (video, image, embed)	`AspectRatio`	`position: relative; padding-top: 56.25%` hacks
Open a side panel	`Drawer`	Custom `position: fixed` slide-in

Layout primitives

I need to…	Reach for	Skip the workaround
Stack things vertically with consistent gap	`Stack`	`flex-direction: column; gap: 8px`
Lay things in a row with consistent gap	`Inline`	`display: flex; gap: 8px; align-items: center`
Two-axis arbitrary flex layout	`Flex`	Raw `display: flex`
Grid layout (equal columns, named areas, etc.)	`Grid`	Raw `display: grid; grid-template-columns: …`
Position one child in a grid cell	`Box` (or any layout child) with `gridColumn` / `gridRow` props	Inline `style={{ gridColumn: '…' }}`
Push siblings apart in a flex row	`Spacer`	`flex: 1 1 auto` hack

See Layout primitives for the full raw-CSS → Cynosure cheat-sheet.

Reveal & collapse

I need to…	Reach for
Toggle a section in-place	`Collapsible`
Multi-section toggle list	`Accordion`
Side sheet	`Drawer`
Modal / lightbox	`Dialog` / `AlertDialog`
Anchored bubble (click)	`Popover`
Anchored bubble (hover, with delay & a11y)	`HoverCard`

Hierarchical & tabular data

I need to…	Reach for
Nested folder/file-style data	`Tree` — supports custom data shapes via `getId` / `getLabel` / `getChildren` accessor props
Sortable / filterable data grid	`DataTable`
Plain static table	`Table`
Ordered list of events	`Timeline`
Plain list	`List`

Choice & search

I need to…	Reach for
Pick one from a short list	`Select`
Pick one with type-ahead / async	`Combobox`
Pick many	`MultiSelect`
Pick one from a huge list with keyboard navigation	`CommandPalette`
Search box (with clear, loading, voice)	`SearchInput`

Feedback

I need to…	Reach for
Inline status message in a form	`Alert` / `Callout`
Transient pop message	`Toast` — `import { Toaster, toast } from '@arshad-shah/cynosure-react'` (re-exports `sonner` with Cynosure theme tokens; don’t import from `sonner` directly)
Persistent banner in a list	`Notification`
”Nothing here yet” placeholder	`EmptyState`
Loading shimmer	`Skeleton`

Typography

I need to…	Reach for
Page / section title	`Heading` — `color` prop accepts tokens like `fg.muted`; no need to drop to `style={{ color }}`
Body text	`Text`
Inline code	`Code`
Keyboard shortcut hint	`Kbd`

If you reached for style={{ display: 'flex' }} or style={{ overflow: 'auto' }} recently, you probably wanted one of these. The CSS still works — Cynosure primitives just thread tokens (spacing, colour, breakpoints) through them automatically.