---
title: React components
description: 48 components that follow your design system. Editable source, typed props and live previews.
---

- [Accordion](https://ui.coderocket.app/docs/components/accordion): Expandable sections with built-in keyboard interaction.
- [Alert](https://ui.coderocket.app/docs/components/alert): A contextual message with optional assertive announcement.
- [Alert Dialog](https://ui.coderocket.app/docs/components/alert-dialog): A confirmation dialog with focus management, keyboard dismissal and a labelled title.
- [Avatar](https://ui.coderocket.app/docs/components/avatar): An image with an accessible fallback for a person or team.
- [Badge](https://ui.coderocket.app/docs/components/badge): A compact non-interactive status or label.
- [Breadcrumb](https://ui.coderocket.app/docs/components/breadcrumb): A semantic path through your application.
- [Button](https://ui.coderocket.app/docs/components/button): An action with six visual variants, three sizes and a loading state.
- [Calendar](https://ui.coderocket.app/docs/components/calendar): A Gregorian single-date or range calendar with month/year selection, disabled dates, week numbers and keyboard navigation.
- [Card](https://ui.coderocket.app/docs/components/card): A surface that groups related content, with optional header and footer.
- [Checkbox](https://ui.coderocket.app/docs/components/checkbox): A labelled checkbox with checked and indeterminate states.
- [Collapsible](https://ui.coderocket.app/docs/components/collapsible): An optional content section with a disclosure trigger.
- [Combobox](https://ui.coderocket.app/docs/components/combobox): Searchable single selection with controlled search, disabled options, optional clearing and form support.
- [Command](https://ui.coderocket.app/docs/components/command): A searchable command palette with keyboard navigation and real action callbacks.
- [Context Menu](https://ui.coderocket.app/docs/components/context-menu): A contextual action menu available by right-click or keyboard.
- [Data Table](https://ui.coderocket.app/docs/components/data-table): Searchable, sortable and paginated data with controlled state, custom cells, stable row keys and loading/empty states.
- [Date Picker](https://ui.coderocket.app/docs/components/date-picker): Single-date and date-range selection with shortcuts, manual confirmation, localized calendars and editable date fields.
- [Dialog](https://ui.coderocket.app/docs/components/dialog): A modal dialog with focus management, keyboard dismissal and a labelled title.
- [Drawer](https://ui.coderocket.app/docs/components/drawer): A swipeable drawer with focus management, keyboard dismissal and a labelled title.
- [Dropdown](https://ui.coderocket.app/docs/components/dropdown): A keyboard-accessible menu of actions.
- [Empty State](https://ui.coderocket.app/docs/components/empty-state): A useful empty state with an optional next action.
- [Field](https://ui.coderocket.app/docs/components/field): A labelled field with description, validation and accessible errors.
- [File Upload](https://ui.coderocket.app/docs/components/file-upload): A validated drag-and-drop file input with cancellable upload and real progress callbacks.
- [Hover Card](https://ui.coderocket.app/docs/components/hover-card): A preview card for supplementary link information.
- [Input](https://ui.coderocket.app/docs/components/input): A text input that inherits the library’s field tokens.
- [Input Group](https://ui.coderocket.app/docs/components/input-group): A text input with leading and trailing content.
- [Keyboard Key](https://ui.coderocket.app/docs/components/kbd): A keyboard shortcut hint.
- [Label](https://ui.coderocket.app/docs/components/label): An explicit label linked to a form control.
- [Navigation Menu](https://ui.coderocket.app/docs/components/navigation-menu): A navigation bar with expandable groups and real link semantics.
- [Number Field](https://ui.coderocket.app/docs/components/number-field): A numeric field with increment, decrement, constraints and locale formatting.
- [Pagination](https://ui.coderocket.app/docs/components/pagination): A controlled page navigator with bounded page selection.
- [Popover](https://ui.coderocket.app/docs/components/popover): A non-modal panel anchored to a trigger.
- [Progress](https://ui.coderocket.app/docs/components/progress): A determinate or indeterminate progress bar with a label.
- [Radio Group](https://ui.coderocket.app/docs/components/radio-group): One selection from a labelled set, with arrow-key navigation.
- [Select](https://ui.coderocket.app/docs/components/select): Accessible single or multiple selection with disabled options, controlled state and native form support.
- [Separator](https://ui.coderocket.app/docs/components/separator): A visual and semantic divider.
- [Sheet](https://ui.coderocket.app/docs/components/sheet): A side panel with focus management, keyboard dismissal and a labelled title.
- [Sidebar](https://ui.coderocket.app/docs/components/sidebar): A collapsible application sidebar with active-link semantics.
- [Skeleton](https://ui.coderocket.app/docs/components/skeleton): A reduced-motion-aware placeholder while content is loading.
- [Slider](https://ui.coderocket.app/docs/components/slider): A bounded numeric value with keyboard controls and a visible output.
- [Spinner](https://ui.coderocket.app/docs/components/spinner): An accessible loading indicator that respects reduced motion.
- [Switch](https://ui.coderocket.app/docs/components/switch): An immediate on/off setting with a visible label.
- [Table](https://ui.coderocket.app/docs/components/table): A semantic table with a caption and responsive overflow.
- [Tabs](https://ui.coderocket.app/docs/components/tabs): Related panels connected to an accessible tab list.
- [Textarea](https://ui.coderocket.app/docs/components/textarea): A multiline input with native form semantics.
- [Toast](https://ui.coderocket.app/docs/components/toast): Accessible notifications with a provider, imperative manager and dismiss controls.
- [Toggle](https://ui.coderocket.app/docs/components/toggle): A pressable on/off button with an accessible pressed state.
- [Toggle Group](https://ui.coderocket.app/docs/components/toggle-group): A labelled group of toggle buttons with keyboard navigation.
- [Tooltip](https://ui.coderocket.app/docs/components/tooltip): Additional non-essential text shown on hover or keyboard focus.