Getting StartedIntroduction SOONInstallation SOONChange log SOONRoadmap SOON

ContainerFlex SOONGrid SOONSticky SOONSeparator SOONAspect Ratio SOONVisually Hidden SOON

DialogPopover SOONTooltipDropdown Menu SOONContext Menu SOONHover Card SOON

Link SOONNavigation Menu SOONBreadcrumbs SOONPagination SOONStepper SOON

Collapsible SOONAccordion SOONTabs SOON

H1 SOONH2 SOONH3 SOONH4 SOONH5 SOONH6 SOONP SOONSpan SOONEm SOONI SOONStrong SOONB SOONQ SOONBlockquote SOONUl SOONOl SOONKbd SOONCode SOONTable of Contents SOON

Media

Icon SOONAvatar SOONAvatar Group SOONImage SOONVideo SOON

Notifications

Notification SOONNotification Panel SOONToast SOONAlert SOON

Status

Spinner SOONProgress Bar SOON

Buttons

Button SOONBurger Button SOONButton Group SOON

Data Display

Article Preview SOONBadge SOONCard SOONCommand Line SOONTable SOONTag SOONTag Group SOONTag Picker SOONTestimonial SOONProduct Tile SOONSkeleton SOONStatistic SOON

Data Entry

Address Input SOONCheckbox SOONCalendar Input SOONCalendar Range Input SOONColor Picker SOONCurrency Input SOONCredit Card Input SOONDate Input SOONDate Picker SOONDate Range Input SOONDate Range Picker SOONFieldset SOONFile Input SOONFile Dropzone SOONFile Picker SOONLabel SOONPin Input SOONPhone Number Input SOONRadio Button SOONRadio Group SOONRange Slider SOONRating SOONSearch Input SOONSwitch SOONSegmented Control SOONSelect SOONSlider SOONText Input SOONTextarea SOONToggle SOONToggle Group SOONURL Input SOON

Forms

TBD SOON

Layout

Components that pertain to layout.

Better map of the terrain

Creating a component for each type of layout (<Flex />, <Grid />, <Container />, <Sticky />, etc) gives you a better "map of the terrain" and makes it easier to know which tool to reach for when you need to create a layout.

Accessibility

These components also purposely disallow inaccessible CSS features.

Informative API

You get a clear API that informs you of the values you can manipulate on each layout mode.

Here's an example for the Flex component.

flex.tsx

<Flex direction="col" justify="between" items="center" gap="6">
	<Item1 />
	<Item2 />
	<Item2 />
	<Item3 />
</Flex>

And here's how you can see the available props and their types in VS Code.

Unfortunately, VS Code still displays props in alphabetical order instead of showing component props at the top when running "trigger suggest".