Components
Import primitives from
@carsxe/design-system. Each page has a live preview, usage, and API.- AccordionA vertically stacked set of interactive headings.
- AlertDisplays a callout for user attention.
- Alert DialogA modal dialog requiring a response.
- Aspect RatioDisplays content within a fixed ratio.
- AttachmentDisplays a file or linked attachment.
- AutocompleteA text input that suggests options as the user types. Queries are debounced through the delay prop so a burst of keystrokes makes a single request, and passing onQueryChange switches the component into async mode where the caller owns filtering and the supplied items render verbatim. Supports a dropdown trigger, multi-select chips, grouped and object suggestions, forced selection, loading status, and a minimum query length.
- AvatarAn image element with a fallback for representing a user.
- BadgeDisplays a badge or a component that looks like a badge.
- BreadcrumbDisplays the path to the current resource using a hierarchy of links.
- BubbleConversational messages with optional avatars, copying, timestamps, and actions. Controls appear on hover or keyboard focus and stay visible on touch screens. Timestamps use English and the local timezone; pass a Date, ISO 8601 string, or epoch milliseconds. Invalid dates are omitted.
- ButtonDisplays a button or a component that looks like a button.
- Button GroupGroups related buttons and controls.
- CalendarA date selection calendar.
- CardDisplays a card with header, content, and footer.
- CarouselA keyboard-accessible content carousel.
- ChartToken-aware Recharts primitives and production-ready recipes for every shadcn chart family.
- CheckboxA control that allows the user to toggle between checked and not checked.
- Code BlockA Shiki-powered code viewer with every bundled theme, lazy language loading, and accessible copy controls. Theme changes stay in code unless the picker is enabled.
- CollapsibleAn expandable content region.
- ComboboxA searchable option picker.
- CommandA fast command and search menu.
- Context MenuA menu opened from a context action.
- D3 ChartsResponsive, accessible relationship and hierarchy charts for data that does not fit a Cartesian plot.
- Data TableA composition pattern for sortable, filterable data tables.
- Date PickerA date-picker recipe composed from Calendar and Popover.
- DialogA window overlaid on the primary window, rendering the content underneath inert.
- DirectionProvides LTR or RTL reading direction.
- DrawerA swipeable dialog panel.
- Dropdown MenuDisplays a menu to the user — such as a set of actions or functions — triggered by a button.
- EmptyAn empty-state layout.
- FieldAccessible form field composition.
- File UploadDrag-and-drop file picking built on react-dropzone, modeled on PrimeReact's FileUpload. Checks type, size and count with readable messages, previews images, and uploads with per-file progress, cancel, retry and a concurrency limit. Pass `url` to upload with the built-in XMLHttpRequest transport, or `uploader` to report progress from your own (axios, S3 presigned URLs, tus). Leave both out to only collect files for a form. Use `FileUploadAdvanced` for the full layout, or compose the parts and `useFileUploadContext` for your own.
- FormsAccessible forms composed from Field and input primitives.
- HeatmapA GitHub-style calendar heatmap that shows a value per day, with month and weekday labels and a Less-to-More legend. Height derives from width and the number of weeks so cells always stay square — there is no height prop.
- Hover CardPreview content shown on hover or focus.
- InputDisplays a form input field or a component that looks like an input field.
- Input GroupCombines an input with inline addons.
- Input OTPA segmented one-time-password input.
- ItemA flexible list-item layout.
- KbdDisplays keyboard input hints.
- KnobA circular dial for entering a number in a range. It sweeps 270° with a gap at the bottom, and can be driven by dragging around the dial or with the keyboard: arrows step, Page Up and Page Down move ten steps, and Home and End jump to the ends. The printed value can be replaced with a template, and the arc colours are CSS variables so charts and themes can override them.
- LabelRenders an accessible label associated with controls.
- MarkerMarks status or annotated content.
- MarqueeAn auto-scrolling strip that loops its content seamlessly. Hovering or focusing pauses the motion and hands control to the user, who can scroll through the items with a wheel, trackpad, or swipe; when they leave, the marquee resumes from wherever they stopped. Respects prefers-reduced-motion by staying static while remaining manually scrollable.
- Mega menuThe panel a navigation dropdown opens: zones of columns, each column a run of labelled rows carrying an icon, a title, and a line of description. Rows are polymorphic through `render`. Pair it with NavigationMenu and MegaMenuTrigger. MegaMenuList shares a sliding layoutId indicator across triggers; NavigationMenu keeps one viewport that morphs between sections; columns spring in with a stagger. Standalone, the panel paints its own surface; inside NavigationMenu the positioner already does.
- MenubarA desktop-style application menu.
- MessageStructured conversational messages.
- Message ScrollerKeeps streaming messages anchored.
- Native SelectA styled native select control.
- Navigation MenuA collection of links for navigating websites.
- PaginationPagination with page navigation, next and previous links.
- Password InputA password field with a visibility toggle and an optional strength meter. feedback opens a panel below the focused input rating the value weak, medium, or strong; the labels, the rating logic, and the panel's header and footer are all replaceable.
- PopoverRich content displayed in a portal.
- ProgressDisplays an indicator showing the completion progress of a task.
- QuestionnaireA multi-step question flow.
- Radio GroupA set of checkable buttons — known as radio buttons — where no more than one of the buttons can be checked at a time.
- Rating groupA star rating that can be read or set. It supports half values from the click position, an optional clear affordance, any icon pair for the filled and empty layers, a custom number of items, vertical layout, read-only and disabled states, and form submission through a hidden input. Arrow keys step the rating; with allowClear, Delete and Backspace reset it.
- ResizableKeyboard-accessible resizable panels.
- Scroll AreaA consistently styled scroll container.
- SelectDisplays a list of options for the user to pick from — triggered by a button.
- SeparatorVisually or semantically separates content.
- SheetA dialog anchored to an edge.
- SidebarA responsive application shell with desktop collapse, mobile sheets, keyboard controls, and left or right placement.
- Signature PadA controlled or composable signature surface with pressure-aware drawing, history, form values, and image export.
- SkeletonUse to show a placeholder while content is loading.
- SliderAn input where the user selects a value from within a given range.
- SonnerAn opinionated toast component for React.
- SpinnerIndicates an in-progress operation.
- Split ButtonA primary action joined to a menu of related ones. The left button behaves like any Button and keeps its props; items describes the menu, including separators, links, destructive entries, and one level of submenu. loading shows a spinner and disables both halves at once.
- StepsA step indicator for multi-step flows. Used on its own it is a controllable indicator; wrapped in StepsRoot it also drives panels, which stay mounted while hidden so form state survives navigation. useSteps exposes next, prev, and goTo for footer buttons, and linear stops a step ahead of the current one from being clicked while still allowing programmatic jumps.
- SwitchA control that allows the user to toggle between checked and not checked.
- TableA responsive table component.
- TabsA set of layered sections of content — known as tab panels — that are displayed one at a time.
- TextareaDisplays a form textarea or a component that looks like a textarea.
- TimelineAn ordered list of events on a rail. Content, the opposite side, the marker, and the connector are all render props receiving the item and its index, so events can be as plain as a line of text or as rich as a card. The rail runs vertically or horizontally, and content can sit on either side or alternate so the rail centres itself.
- ToastA transient Base UI notification.
- ToggleA two-state pressed control.
- Toggle GroupA group of related toggle controls.
- TooltipA popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
- Tree viewA hierarchical list with keyboard navigation. It selects one node, several nodes, or cascades checkboxes with a derived mixed state; filters with a debounced search field in either lenient or strict mode; loads children on demand; templates each row; and reorders by dragging.
- TypographySemantic content styled with Carsxe fonts and design tokens.
- World Map ChartA responsive CarsXE choropleth for country-level values. Pass ISO alpha-2, alpha-3, or numeric codes; bundled world geometry, accessible keyboard inspection, selection, tooltips, and theme-aware colors are handled for you.