Components
54 components, each with its own import path. Open one for examples and install steps.
All components
- AccordionVertically stacked sections that expand and collapse.
- AlertA callout box with title, description and optional action.
- Alert DialogA modal that asks for an explicit choice.
- Aspect RatioKeeps content at a fixed width-to-height ratio.
- AvatarA circular avatar with image, fallback, status badge and group support.
- BadgeA small inline pill for status, counts, tags and labels.
- BreadcrumbShow the path to the current page.
- ButtonA styled button or link with variants and sizes.
- Button GroupFuses buttons, inputs and text addons into one control.
- CalendarA month grid for picking a date or a date range.
- CardA container with header, content and footer parts.
- CarouselA row of slides with previous and next buttons.
- ChartSVG charts built from small parts. Line, area, bar, pie, radar and radial.
- CheckboxA checkbox with an indeterminate state that works with Angular forms.
- CollapsibleA trigger that shows or hides a region, with a height animation.
- ComboboxA searchable select with single and multi-select modes for Angular forms.
- CommandA search box with a filtered list of actions.
- Context MenuA menu that opens at the pointer on right-click.
- Data TableSort, filter, page and select rows. Use one feature or all, in the browser or on your server.
- DialogA modal window opened from a template or a component.
- DrawerA panel from an edge of the screen that you can drag to close.
- Dropdown MenuA menu of actions opened from a trigger.
- EmptyA placeholder for an empty list, page or search result.
- FieldForm layout parts that group a label, control, description and error.
- Hover CardRich content in a floating panel shown on hover.
- IconDraws the components' icons, and any Lucide icon you add, with no Angular icon package.
- InputStyled input, textarea, label and input group with addons.
- Input OTPA one-time code input split into slots, with paste support.
- ItemA composable row for action lists, settings and rich menu rows.
- KbdShows a keyboard key or shortcut.
- MenubarA row of menus, like the one at the top of a desktop app.
- Native SelectA styled native select element. Works with forms out of the box.
- Navigation MenuSite links with panels that open on hover or click.
- PaginationPage navigation links with previous, next and ellipsis.
- PopoverRich content in a panel that opens from a button.
- ProgressA horizontal progress bar from 0 to 100.
- Radio GroupA set of radio buttons with arrow-key navigation that works with Angular forms.
- ResizablePanels with drag handles between them.
- Scroll AreaA scrollable region with a thin, themed native scrollbar.
- SelectA custom dropdown for picking one value, built for Angular forms.
- Select PickerA multi-select that shows chips on one line and picks in a searchable checkbox dialog.
- SeparatorA thin divider for horizontal or vertical layouts.
- SheetA dialog that slides in from an edge of the screen.
- SidebarA collapsible app sidebar with a mobile drawer and saved state.
- SkeletonA pulsing placeholder for loading content.
- SliderPick a number, or a range, by dragging a thumb.
- SpinnerAn inline spinning loader.
- SwitchA toggle switch that works with Angular forms.
- TableStyled parts for native HTML tables.
- TabsSwitch between panels of related content, one at a time.
- ToastShort messages that close on their own.
- ToggleA button that turns on and off.
- Toggle GroupA set of toggles where one or many can be on.
- TooltipA short label shown on hover or focus.
Charts
How charts work- Area ChartsArea chart examples: stacked, expanded, gradient, step and more.
- Bar ChartsBar chart examples: stacked, horizontal, labels, negative values and more.
- Line ChartsLine chart examples: dots, labels, steps, several series and more.
- Pie ChartsPie chart examples: donut, labels, legend, stacked rings and more.
- Radar ChartsRadar chart examples: dots, grids, lines, legend, icons and more.
- Radial ChartsRadial chart examples: grid, labels, center text, shape and stacked.
- TooltipsChart tooltip examples: indicators, labels, formatters, icons and a total.