# Components

82 components for React, React Native, SwiftUI and Jetpack Compose, each copied into your project with the CLI.

Source: https://ui.suiss.app/docs/components

- [Accordion](https://ui.suiss.app/docs/components/accordion): A vertically stacked set of headings that each reveal a section of content.
- [Alert Dialog](https://ui.suiss.app/docs/components/alert-dialog): A modal dialog that interrupts the user to confirm an important action or acknowledge information.
- [Alert Sheet](https://ui.suiss.app/docs/components/alert-sheet): An action sheet that slides up from the bottom of the screen to confirm or choose an action.
- [Alert](https://ui.suiss.app/docs/components/alert): A static callout that draws attention to an important message without interrupting the user.
- [Amount Input](https://ui.suiss.app/docs/components/amount-input): A large, locale-formatted money display with an on-screen keypad for entering an amount.
- [Aspect Ratio](https://ui.suiss.app/docs/components/aspect-ratio): A container that keeps its content at a fixed width-to-height ratio.
- [Attachment](https://ui.suiss.app/docs/components/attachment): A compact file card that shows a document or image with its name, details, upload state and actions.
- [Avatar](https://ui.suiss.app/docs/components/avatar): A circular image that represents a person, with initials or an icon when no image is available.
- [Badge](https://ui.suiss.app/docs/components/badge): A small inline label for status, counts or metadata.
- [Bottom Bar](https://ui.suiss.app/docs/components/bottom-bar): A bar pinned to the bottom of a screen for primary actions, which rises above the keyboard.
- [Breadcrumb](https://ui.suiss.app/docs/components/breadcrumb): A trail of links that shows where the current page sits in the site hierarchy.
- [Bubble](https://ui.suiss.app/docs/components/bubble): A chat-style message bubble with variants, alignment, a tail and optional reactions.
- [Button Group](https://ui.suiss.app/docs/components/button-group): A container that joins related buttons, inputs and menus into a single connected control.
- [Button](https://ui.suiss.app/docs/components/button): A pill-shaped button that triggers an action, with variants for every level of emphasis.
- [Calendar](https://ui.suiss.app/docs/components/calendar): A month-grid date picker for selecting a single date, several dates or a date range.
- [Card](https://ui.suiss.app/docs/components/card): A raised container that groups related content and actions about a single subject.
- [Carousel](https://ui.suiss.app/docs/components/carousel): A swipeable track of slides with buttons, dots and optional autoplay, built on Embla Carousel.
- [Chart](https://ui.suiss.app/docs/components/chart): Themed building blocks for Recharts charts, with a shared color config, tooltip and legend.
- [Checkbox](https://ui.suiss.app/docs/components/checkbox): A control that lets people turn a single option on or off.
- [Chip](https://ui.suiss.app/docs/components/chip): A compact, selectable pill for filters and tags, with an optional icon and remove button.
- [Collapsible](https://ui.suiss.app/docs/components/collapsible): A section that people can expand and collapse to show or hide its content.
- [Combobox](https://ui.suiss.app/docs/components/combobox): A text input with a filterable list of options, for choosing one or more values by typing.
- [Command](https://ui.suiss.app/docs/components/command): A searchable menu of commands, used inline or as a command palette in a dialog.
- [Context Menu](https://ui.suiss.app/docs/components/context-menu): A menu of actions that opens at the pointer when people right-click an area.
- [Dialog](https://ui.suiss.app/docs/components/dialog): A modal window that appears above the page to focus people on a task or message.
- [Direction](https://ui.suiss.app/docs/components/direction): A provider that sets the reading direction, left-to-right or right-to-left, for the components inside it.
- [Drawer](https://ui.suiss.app/docs/components/drawer): A panel that slides in from an edge of the screen and can be dismissed with a swipe.
- [Dropdown Menu](https://ui.suiss.app/docs/components/dropdown-menu): A menu of actions or options that opens from a button.
- [Empty](https://ui.suiss.app/docs/components/empty): A placeholder that explains why a view has no content and what people can do next.
- [FAB](https://ui.suiss.app/docs/components/fab): A floating action button pinned to the bottom corner, with an optional label and speed-dial actions.
- [Field](https://ui.suiss.app/docs/components/field): Building blocks for form fields that pair controls with labels, descriptions and error messages.
- [Fullscreen Menu](https://ui.suiss.app/docs/components/fullscreen-menu): A navigation menu that covers the whole screen, for site links on small viewports.
- [Haptics](https://ui.suiss.app/docs/components/haptics): A provider that connects components to your haptics library, with a hook to trigger feedback.
- [Header](https://ui.suiss.app/docs/components/header): A navigation bar with a back button, a centered title, actions and an optional large title that collapses on scroll.
- [Hover Card](https://ui.suiss.app/docs/components/hover-card): A card that previews content behind a link when people hover over or focus it.
- [Icon](https://ui.suiss.app/docs/components/icon): Renders a Phosphor icon with size and color set through class names.
- [Input Accessory Bar](https://ui.suiss.app/docs/components/input-accessory-bar): A toolbar above the keyboard with previous, next and done buttons for moving through form fields.
- [Input Group](https://ui.suiss.app/docs/components/input-group): A text field with icons, text, buttons or keyboard hints attached inside its border.
- [Input OTP](https://ui.suiss.app/docs/components/input-otp): A segmented field for entering one-time passcodes, one character per slot.
- [Input](https://ui.suiss.app/docs/components/input): A single-line text field for entering and editing short values.
- [Item](https://ui.suiss.app/docs/components/item): A flexible row that pairs media, a title, a description and actions, for lists and settings.
- [Kbd](https://ui.suiss.app/docs/components/kbd): Displays a keyboard key or shortcut, with a platform-aware modifier symbol.
- [Keyboard Scroll View](https://ui.suiss.app/docs/components/keyboard-scroll-view): A scroll view that keeps the focused text field visible above the on-screen keyboard.
- [Keypad](https://ui.suiss.app/docs/components/keypad): A numeric keypad with round digit keys, a delete key and an optional decimal or biometric key.
- [Label](https://ui.suiss.app/docs/components/label): An accessible text label that names a form control.
- [Marker](https://ui.suiss.app/docs/components/marker): An inline annotation for timelines and conversations, such as a date divider or system event.
- [Menubar](https://ui.suiss.app/docs/components/menubar): A horizontal bar of menus, like a desktop application's menu bar.
- [Message Scroller](https://ui.suiss.app/docs/components/message-scroller): A scroll container for chat transcripts that opens at the latest message and keeps scroll position stable.
- [Message](https://ui.suiss.app/docs/components/message): Lays out a single chat message with an optional avatar, header and footer.
- [Native Select](https://ui.suiss.app/docs/components/native-select): A styled native select element for choosing one option from a list.
- [Navigation Menu](https://ui.suiss.app/docs/components/navigation-menu): A site navigation bar whose items open popover or full-width panels of links.
- [Page Indicator](https://ui.suiss.app/docs/components/page-indicator): A row of dots that shows the current page in a pager or carousel, with an elongated dot for the active page.
- [Pagination](https://ui.suiss.app/docs/components/pagination): Navigation links for moving between pages of content, such as table results.
- [Pin Pad](https://ui.suiss.app/docs/components/pin-pad): A passcode entry screen element with a row of dots and a numeric keypad.
- [Popover](https://ui.suiss.app/docs/components/popover): A floating panel anchored to a trigger, for supplementary content and lightweight controls.
- [Progress](https://ui.suiss.app/docs/components/progress): A horizontal bar that shows the completion of a task.
- [QR Scanner](https://ui.suiss.app/docs/components/qr-scanner): A camera overlay with a rounded cut-out scan frame, rounded corner brackets, an optional scan line and an optional flashlight toggle.
- [Questionnaire](https://ui.suiss.app/docs/components/questionnaire): A step-by-step form that shows one question at a time, with validation, skipping and keyboard shortcuts.
- [Radio Group](https://ui.suiss.app/docs/components/radio-group): A set of radio buttons where only one option can be selected at a time.
- [Resizable](https://ui.suiss.app/docs/components/resizable): Panels separated by draggable handles that let users resize sections of a layout.
- [Screen](https://ui.suiss.app/docs/components/screen): A full-screen container that pads for safe area insets and sets the status bar style.
- [Scroll Area](https://ui.suiss.app/docs/components/scroll-area): A scrollable region with slim, custom-styled scrollbars.
- [Select](https://ui.suiss.app/docs/components/select): A button that opens a list of options so people can pick one value.
- [Separator](https://ui.suiss.app/docs/components/separator): A thin line that visually divides content, horizontally or vertically.
- [Sheet](https://ui.suiss.app/docs/components/sheet): A panel that slides in from an edge of the screen over the page.
- [Sidebar](https://ui.suiss.app/docs/components/sidebar): A collapsible app sidebar for navigation, with icon, off-canvas and mobile sheet modes.
- [Signature Pad](https://ui.suiss.app/docs/components/signature-pad): A drawing area that captures a handwritten signature as strokes and can export it as an SVG string.
- [Skeleton](https://ui.suiss.app/docs/components/skeleton): A pulsing placeholder block that stands in for content while it loads.
- [Slider](https://ui.suiss.app/docs/components/slider): A track with one or more draggable thumbs for choosing a value or range.
- [Spinner](https://ui.suiss.app/docs/components/spinner): An eight-spoke activity indicator that shows an indeterminate wait.
- [Switch](https://ui.suiss.app/docs/components/switch): A toggle control that turns a single setting on or off.
- [Tab Bar](https://ui.suiss.app/docs/components/tab-bar): A floating bottom navigation bar whose overflow and extra sections expand from a More button.
- [Table](https://ui.suiss.app/docs/components/table): Styled native table elements for displaying rows of structured data.
- [Tabs](https://ui.suiss.app/docs/components/tabs): A set of tabs that switches between panels of related content in the same place.
- [Text](https://ui.suiss.app/docs/components/text): Styled text with typography variants for headings, body copy, quotes, code and captions.
- [Textarea](https://ui.suiss.app/docs/components/textarea): A multi-line text field that grows with its content, with an optional resize handle.
- [Toast](https://ui.suiss.app/docs/components/toast): Brief, stacked notifications that appear at the bottom of the screen and dismiss themselves.
- [Toggle Group](https://ui.suiss.app/docs/components/toggle-group): A set of toggle buttons for choosing one or several related options, including segmented controls.
- [Toggle](https://ui.suiss.app/docs/components/toggle): A two-state button that stays pressed until it's pressed again.
- [Tooltip](https://ui.suiss.app/docs/components/tooltip): A small label that appears next to an element on hover or keyboard focus.
- [Wheel Picker](https://ui.suiss.app/docs/components/wheel-picker): A scrolling, 3D-curved wheel of options, like the iOS picker, for choosing values such as dates and times.
- [Widget](https://ui.suiss.app/docs/components/widget): A rounded card in the style of home screen widgets, with fixed sizes and optional drag-to-resize.