Raya UI
Components for your next interface.
Built for developers and AI.
Accessible, composable components built on Base UI and styled through Raya Systems. Browse a component, tune it, and copy the source into your app.
Forms
buttonTriggers an action with COSS-style variants, sizes, icons, and loading state.inputSingle-line text entry with focus, validation, disabled, and size states.textareaMulti-line text entry for longer messages and notes.selectA keyboard-friendly listbox for choosing one option from a menu.checkboxA binary control for selecting one or more independent options.checkbox-groupA semantic group of related checkbox controls.switchA compact control for toggling a setting on or off.radioA single selectable radio control.radio-groupA mutually exclusive set of options with a single selected value.sliderA draggable range control for selecting a numeric value.labelAn accessible label for a form control.fieldA composed label, control, description, and validation message pattern.formA semantic layout primitive for submitting related controls.fieldsetA labeled group of related form controls.input-groupA composed input with leading or trailing addons.autocompleteAn input that suggests filtered options as you type.comboboxAn input and listbox for choosing from known options.number-fieldA numeric input with accessible increment and decrement controls.otp-fieldA segmented numeric input for one-time verification codes.calendarA month grid for choosing and reviewing dates.date-pickerA popover date selection flow built on Calendar.
Display
cardA layered surface for grouping related content and actions.badgeA compact status label for categorization and state.avatarA visual identity marker with image and fallback content.tabsA horizontal navigation pattern for switching between related panels.segmented-controlA compact set of related choices for navigation, filtering, or view selection.dialogA modal surface for focused tasks without leaving the current page.alert-dialogA blocking confirmation surface for consequential actions.alertA semantic callout for important status or feedback.emptyA calm placeholder for views with no content yet.toggleA compact button that exposes an on or off pressed state.meterA semantic gauge for a scalar value within a known range.accordionA stack of collapsible sections for progressively disclosed content.collapsibleA single content section that can be expanded or tucked away.breadcrumbHierarchical navigation that shows the current location.kbdA compact keyboard-key label for shortcuts and command hints.groupA semantic grouping primitive for related controls.toggle-groupA coordinated set of pressed controls for one or more choices.paginationNavigation controls for moving through a collection of pages.frameA bordered surface for presenting content with an optional header.scroll-areaA constrained region with predictable overflow scrolling.sidebarA persistent navigation surface for application sections.navigation-menuA semantic primary navigation surface for related routes.menubarA horizontal menu of top-level application actions.toolbarA semantic row of grouped actions and controls.sheetA modal side surface for focused navigation or editing tasks.drawerA side surface for navigation or focused editing tasks.menuA discoverable list of actions anchored to a trigger.context-menuA pointer-anchored menu of actions for the current context.commandA keyboard-first searchable surface for application commands.filterable-menuA searchable list of actions for dense command surfaces.dropdown-menuA contextual menu of actions anchored to a trigger.popoverA lightweight anchored surface for supplemental content or controls.preview-cardAn anchored rich preview for a linked resource.tooltipA brief contextual hint revealed on hover or focus.toastA transient notification for completed actions and important updates.spinnerA compact loading indicator for async operations and pending states.separatorA visual divider for separating groups of related content.progressA determinate progress indicator for work moving toward completion.skeletonA quiet loading placeholder that preserves layout while content is arriving.
Data
tableA lightweight compositional table for ordinary tabular content.data-tableA sortable, paginated table for structured business data.kpi-cardA compact metric surface with value, delta, and optional trend.chart-lineA time-series line chart for tracking continuous change.chart-areaAn area chart for comparing volume and cumulative movement.chart-barA bar chart for comparing discrete categories.chart-pieA pie or donut chart for showing part-to-whole relationships.chart-sparklineA compact trend visualization for use inside metric surfaces.