Components
Explore 70 accessible components and patterns for Oros applications.
Browse components
Accordion
Organizes related content into collapsible sections.
Alert
Highlights important information, status, or guidance.
Alert Dialog
Requests confirmation before a consequential action.
Aspect Ratio
Keeps media and embedded content at a consistent proportion.
Attachment
Displays files with metadata, progress, and actions.
Autocomplete
Suggests matching options as someone types.
Avatar
Represents a person or organization with an image or fallback.
Badge
Displays a compact label for status, category, or metadata.
Breadcrumb
Shows the current page's location within a hierarchy.
Bubble
Presents short conversational content in a message bubble.
Button
Triggers an action or submits a form.
Button Group
Arranges related actions as one connected control.
Calendar
Lets people select a date or date range from a calendar.
Card
Groups related content and actions on a contained surface.
Carousel
Presents a sequence of content in a scrollable viewport.
Chart
Builds accessible, theme-aware data visualizations with Recharts.
Checkbox
Lets people select or clear a single option.
Checkbox Group
Groups related checkboxes with shared labeling and validation.
Collapsible
Shows and hides a section of supporting content.
Combobox
Combines a text field with a searchable list of options.
Command
Provides a fast, keyboard-friendly command or search menu.
Context Menu
Shows actions for an item from a right-click or long-press.
Date Picker
Combines a date field with calendar selection for dates and ranges.
Dialog
Focuses attention on content or a task in an overlay.
Direction
Sets left-to-right or right-to-left reading direction for components.
Drawer
Displays supplementary content in a panel that slides from the edge.
Dropdown Menu
Shows a menu of actions from a trigger.
Empty
Explains an empty state and offers a useful next step.
Field
Connects labels, controls, descriptions, and validation messages.
Form
Combines accessible fields, controls, validation, and actions.
Frame
Groups content into structured header, panel, and footer regions.
Group
Keeps related controls or content together as one unit.
Hover Card
Reveals a concise preview when someone hovers or focuses a link.
Input
Collects a single line of text or another typed value.
Input Group
Combines an input with prefixes, suffixes, or inline actions.
Input OTP
Collects a one-time code in a segmented input.
Item
Lays out a reusable list item with media, content, and actions.
Kbd
Displays a keyboard key or shortcut.
Label
Names a form control and improves its accessible target.
Marker
Displays compact status, activity, or contextual information.
Menubar
Organizes application commands into persistent top-level menus.
Message
Builds structured conversations with avatars, content, and metadata.
Message Scroller
Keeps a message list anchored with controls for returning to the latest item.
Meter
Displays a value within a known range, such as capacity or score.
Native Select
Presents a browser-native select control with consistent styling.
Navigation Menu
Builds responsive navigation with nested links and rich panels.
Number Field
Collects a numeric value with keyboard and stepper controls.
Pagination
Moves through a collection split across multiple pages.
Popover
Displays contextual content in a floating panel.
Preview Card
Shows a rich preview when someone hovers or focuses a link.
Progress
Shows how much of a task or process is complete.
Radio Group
Lets people choose one option from a set.
Resizable
Creates adjustable panels separated by draggable handles.
Scroll Area
Adds a consistent, accessible scrollable area.
Select
Lets people choose one option from a dropdown list.
Separator
Visually or semantically divides related content.
Sheet
Opens supporting content in a panel from the edge of the screen.
Sidebar
Builds a responsive application sidebar with collapsible navigation.
Skeleton
Reserves layout space while content is loading.
Slider
Lets people choose a value or range along a track.
Sonner
Displays brief toast notifications for feedback and updates.
Spinner
Indicates that an action or result is still loading.
Switch
Turns a setting on or off.
Table
Presents structured data in rows and columns.
Tabs
Switches between related views without leaving the page.
Textarea
Collects longer, multi-line text.
Toggle
Switches a single button between pressed and unpressed states.
Toggle Group
Groups related toggle controls for single or multiple selection.
Toolbar
Groups frequently used controls in a keyboard-friendly row.
Tooltip
Labels or explains a control on hover or keyboard focus.