# Components

67 components, each copied into your project with the CLI.

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

- [Accordion](https://uim.suiss.app/docs/components/accordion): A vertical stack of headings that each expand to reveal a section of content.
- [Alert Dialog](https://uim.suiss.app/docs/components/alert-dialog): A modal dialog that interrupts the user with an important message and asks for a response.
- [Alert Sheet](https://uim.suiss.app/docs/components/alert-sheet): A sheet that slides up from the bottom with a short list of actions and a separate cancel button.
- [Alert](https://uim.suiss.app/docs/components/alert): A callout that shows a short message with an optional icon and action.
- [Amount Input](https://uim.suiss.app/docs/components/amount-input): A large, locale-formatted money display with an on-screen keypad for entering an amount.
- [Aspect Ratio](https://uim.suiss.app/docs/components/aspect-ratio): A view that keeps its content at a fixed width-to-height ratio.
- [Attachment](https://uim.suiss.app/docs/components/attachment): A compact card for a file or upload, with media, name, details, progress and actions.
- [Avatar](https://uim.suiss.app/docs/components/avatar): A round image for a person or entity, with initials or an icon as a fallback.
- [Badge](https://uim.suiss.app/docs/components/badge): A small label for a status, count or category, with an optional icon.
- [Bottom Bar](https://uim.suiss.app/docs/components/bottom-bar): A bar pinned to the bottom of a screen for primary actions, which rises above the keyboard.
- [Bubble](https://uim.suiss.app/docs/components/bubble): A chat message bubble with a tail, alignment, variants and emoji reactions.
- [Button Group](https://uim.suiss.app/docs/components/button-group): A row or column of related buttons joined into one control.
- [Button](https://uim.suiss.app/docs/components/button): A pill-shaped button that triggers an action, with variants for every level of emphasis.
- [Calendar](https://uim.suiss.app/docs/components/calendar): A month grid for picking a single date, several dates or a date range.
- [Card](https://uim.suiss.app/docs/components/card): A container that groups related content and actions with a header, body and footer.
- [Carousel](https://uim.suiss.app/docs/components/carousel): A swipeable row or column of slides with arrow buttons, dots and optional autoplay.
- [Chart](https://uim.suiss.app/docs/components/chart): Line, area, bar, pie, radial and radar charts drawn with SVG, with touch tooltips and legends.
- [Checkbox](https://uim.suiss.app/docs/components/checkbox): A small box that toggles an option on or off, with an indeterminate state.
- [Chip](https://uim.suiss.app/docs/components/chip): A compact, selectable pill for filters and tags, with an optional icon and remove button.
- [Collapsible](https://uim.suiss.app/docs/components/collapsible): A section that shows or hides its content when a trigger is pressed.
- [Combobox](https://uim.suiss.app/docs/components/combobox): A text input that filters a list of options as you type, for single or multiple selection.
- [Context Menu](https://uim.suiss.app/docs/components/context-menu): A menu that opens at the touch point when an area is long-pressed.
- [Dialog](https://uim.suiss.app/docs/components/dialog): A modal window centered over the screen for focused tasks and messages.
- [Drawer](https://uim.suiss.app/docs/components/drawer): A panel that slides in from any edge and can be swiped away, with snap points and a floating style.
- [Dropdown Menu](https://uim.suiss.app/docs/components/dropdown-menu): A menu of actions or options that opens from a trigger button.
- [Empty](https://uim.suiss.app/docs/components/empty): A centered placeholder for screens and lists that have no content yet.
- [Fab](https://uim.suiss.app/docs/components/fab): A floating action button pinned to the bottom corner, with an optional label and speed-dial actions.
- [Field](https://uim.suiss.app/docs/components/field): Building blocks for form fields: labels, descriptions, errors, validation and grouped layouts.
- [Haptics](https://uim.suiss.app/docs/components/haptics): A provider that connects components to your haptics library, with a hook to trigger feedback.
- [Header](https://uim.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.
- [Icon](https://uim.suiss.app/docs/components/icon): Renders a Phosphor icon with size and color set through class names.
- [Input Accessory Bar](https://uim.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://uim.suiss.app/docs/components/input-group): An input or textarea combined with prefix and suffix addons such as text, icons and buttons.
- [Input Otp](https://uim.suiss.app/docs/components/input-otp): A row of single-character boxes for entering one-time codes, with autofill support.
- [Input](https://uim.suiss.app/docs/components/input): A single-line text field with focus, invalid and disabled states, in three heights.
- [Item](https://uim.suiss.app/docs/components/item): A flexible row for lists and settings, with slots for media, a title, a description and trailing actions.
- [Keyboard Scroll View](https://uim.suiss.app/docs/components/keyboard-scroll-view): A scroll view that keeps the focused text field visible above the on-screen keyboard.
- [Keypad](https://uim.suiss.app/docs/components/keypad): A numeric keypad with round digit keys, a delete key and an optional decimal or biometric key.
- [Label](https://uim.suiss.app/docs/components/label): A text label for a form control that can be pressed to act on the control.
- [Marker](https://uim.suiss.app/docs/components/marker): A small inline label that marks a point in a list or feed, such as a date divider or a notice.
- [Message Scroller](https://uim.suiss.app/docs/components/message-scroller): A chat-style message list that stays pinned to the newest message, tracks unread messages and loads older history.
- [Message](https://uim.suiss.app/docs/components/message): A chat message row that lays out an avatar, a group of bubbles, and an optional header and footer.
- [Page Indicator](https://uim.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.
- [Pin Pad](https://uim.suiss.app/docs/components/pin-pad): A passcode entry screen element with a row of dots and a numeric keypad.
- [Popover](https://uim.suiss.app/docs/components/popover): A floating panel anchored to a trigger that shows rich content, such as details or a small form.
- [Progress](https://uim.suiss.app/docs/components/progress): A horizontal bar that shows how far a task has progressed, with an optional label and value.
- [Qr Scanner](https://uim.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://uim.suiss.app/docs/components/questionnaire): A step-by-step form that shows one question at a time, with choices, text answers, validation, skipping and a submit step.
- [Radio Group](https://uim.suiss.app/docs/components/radio-group): A set of radio buttons where only one option can be selected at a time.
- [Screen](https://uim.suiss.app/docs/components/screen): A full-screen container that pads for safe area insets and sets the status bar style.
- [Select](https://uim.suiss.app/docs/components/select): A control that opens a floating list of options and shows the chosen one in its trigger.
- [Separator](https://uim.suiss.app/docs/components/separator): A thin horizontal or vertical line that separates content.
- [Sheet](https://uim.suiss.app/docs/components/sheet): A panel that slides in from any edge of the screen, for secondary content and settings.
- [Signature Pad](https://uim.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://uim.suiss.app/docs/components/skeleton): A pulsing placeholder shape shown while content loads.
- [Slider](https://uim.suiss.app/docs/components/slider): A slider for picking a single value or a range by dragging one or more thumbs along a track.
- [Spinner](https://uim.suiss.app/docs/components/spinner): A loading indicator built on the native activity indicator, at any size and color.
- [Switch](https://uim.suiss.app/docs/components/switch): A toggle switch for turning a single setting on or off.
- [Tab Bar](https://uim.suiss.app/docs/components/tab-bar): A bottom navigation bar of icon and label tabs, with optional badges.
- [Tabs](https://uim.suiss.app/docs/components/tabs): A set of tabs that switch between panels of content shown in the same place.
- [Text](https://uim.suiss.app/docs/components/text): Styled text with typography variants for headings, body copy, quotes, code and captions.
- [Textarea](https://uim.suiss.app/docs/components/textarea): A multi-line text field for longer input, with focus, invalid and disabled states.
- [Toast](https://uim.suiss.app/docs/components/toast): Brief notifications that slide up from the bottom of the screen, stack, and dismiss on a timer or with a swipe.
- [Toggle Group](https://uim.suiss.app/docs/components/toggle-group): A set of toggles that share one value, for formatting controls, alignment options and segmented controls.
- [Toggle](https://uim.suiss.app/docs/components/toggle): A two-state button that can be turned on or off, for formatting and filter controls.
- [Wheel Picker](https://uim.suiss.app/docs/components/wheel-picker): A scrolling wheel for picking one value per column, with items that curve away from the center.
- [Widget](https://uim.suiss.app/docs/components/widget): A rounded card for glanceable information in fixed widget sizes, with an optional drag handle to resize it.