Components
Every RefineUI component available from @pelagornis/page/components, with live previews.
Import any of these from @pelagornis/page/components. Each page has a live preview, the example source, how to use it in MDX and Markdoc, and its variants, anatomy, states, and keyboard support.
Layout 9
- BoxBase layout surface with token padding, fill, radius, and border.
- ContainerCentered page column with token padding.
- GridCSS grid with fixed columns or an auto-fit minimum item size.
- StackOne-axis flex layout with spacing tokens for the gap.
- SpacerFlexible gap that pushes siblings apart inside a row or column.
- DividerHorizontal rule between groups, with an optional inline label.
- TextTypography primitive that maps a semantic text token to an element.
- Scroll AreaScroll container with a token-styled scrollbar.
- ResizableSplit panels separated by draggable handles.
Actions 6
- ButtonStarts an action such as save, continue, or open a panel.
- LinkInline hyperlink that marks external destinations.
- DropdownAction list that opens from a trigger.
- MenuMenu with labels, shortcuts, descriptions, and submenus.
- Context MenuMenu that opens from a right click on its trigger.
- CommandSearchable command list. The header search uses it inside CommandDialog.
Forms 14
- FieldGroups a label, control, hint, and error message.
- LabelText label for a form control, with a required marker.
- InputSingle-line text entry with error and success states.
- TextareaMulti-line text entry.
- Search FieldQuery input with a search icon and a clear button.
- Input OTPOne-time code entry split into slots.
- CheckboxBinary choice with an optional label and description.
- RadioOne choice from a group that shares a name.
- SwitchImmediate on and off setting. Also exported as Toggle.
- SelectPick one value from a list in a popover.
- Segmented ControlRow of mutually exclusive options.
- SliderPick a number along a range.
- Spin ButtonNumeric input with step buttons.
- CalendarMonth grid for picking a date or a range.
Navigation 9
- BreadcrumbTrail of links to the current page.
- Navigation MenuTop-level site navigation with optional dropdown panels.
- PaginationMoves between pages of a long list.
- TabsSwitches between panes that share one space.
- SidebarVertical navigation with groups. The docs shell is built on it.
- StepperNumbered steps with titles and descriptions.
- Progress StepperCompact progress through a multi-step flow.
- TreeExpandable hierarchy for files and nested navigation.
- FooterSite footer with brand, link groups, and meta. The docs footer uses it.
Feedback 7
- AlertInline status message with an icon, title, and actions.
- ToastShort notification triggered from code with toast().
- ProgressBar that shows how much of a task is done.
- SpinnerIndeterminate loading indicator.
- SkeletonPlaceholder shape while content loads.
- BadgeSmall status label or count.
- TooltipShort hint on hover or focus.
Overlays 3
Data display 11
- AvatarPicture, initials, or icon that stands for a person.
- Avatar GroupStacked or spread avatars with an overflow count.
- CardContainer for one topic with header, content, and footer.
- ChipCompact label or filter, optionally removable. Also exported as Tag.
- BubbleChat message bubble aligned to either side.
- TableRows and columns for structured records.
- ChartBar and line charts composed from plot primitives.
- CarouselSlides with previous and next controls and indicators.
- AccordionStacked sections that expand one or many at a time.
- CollapsibleOne section that shows and hides from a trigger.
- IconRefineUI system icon rendered from the icon font with WebIcon.