# Rayden UI — Citrionus

Citrionus is Rayden's complete free default flavor.

Reference UI: 0.10.1
AI package: 0.1.5
Catalog schema: 1.0.0

This is reference information. Inspect the consuming project's installed version before generating code. Future flavors are not advertised as available.

## Read next

- /ai-integration: AI package, MCP, and copyable component guidance.
- /ai/catalog.json: Canonical structured component catalog, props, and prompts.
- /ai-integration/distribution: Local registry pilot and editable-source boundaries.
- /motion: Opt-in motion pilot, presets, and reduced-motion behavior.
- /r/registry.json: Registry pilot catalog; use the documented local setup.

## Conventions

Use actual named exports and their declared import paths. Preserve state, accessibility, styling tokens, and application logic. Resolve exact component names before aliases. Report unknown components or unsupported versions. Keep operating-system reduced-motion preferences effective. Do not assume registry endpoints or unreleased APIs are published.

## Component guidance

### Button

Build with Rayden UI's free default Citrionus flavor, using reference UI 0.10.1 and AI 0.1.5.
Use Button: Primary interactive element for triggering actions. Supports 8 variants, 2 appearances, 2 sizes, and icon positions.
Import { Button } from "@raydenui/ui".
Supported enum values: appearance: solid | outlined; as: button | a; iconPosition: none | leading | trailing | icon-only; size: sm | lg; variant: text | success | warning | primary | secondary | grey | destructive | info.
Preserve accessible labels, keyboard interaction, and reduced-motion preferences. Check the actual installed UI version before applying this reference.
Validate structured component usage; validation cannot establish runtime accessibility, callback behavior, or correctness of arbitrary React code.

### Badge

Build with Rayden UI's free default Citrionus flavor, using reference UI 0.10.1 and AI 0.1.5.
Use Badge: Status indicator or label component with multiple colors, types, and sizes.
Import { Badge } from "@raydenui/ui".
Supported enum values: color: disabled | success | warning | error | orange | blue | neutral; size: sm | md | lg; type: outline | filled | accent.
Preserve accessible labels, keyboard interaction, and reduced-motion preferences. Check the actual installed UI version before applying this reference.
Validate structured component usage; validation cannot establish runtime accessibility, callback behavior, or correctness of arbitrary React code.

### Icon

Build with Rayden UI's free default Citrionus flavor, using reference UI 0.10.1 and AI 0.1.5.
Use Icon: SVG renderer for the Rayden icon set. Pass exactly one of name (dynamic registry lookup) or icon (static IconRecord data). Discover exact names and data exports through iconCatalog.
Import { Icon } from "@raydenui/ui".
Supported enum values: name: map | filter | at | list | copy | link | move | grid | text | next | previous | search | send | checkbox | heading | navigation | row | badge | 3d | AI-stars | AR | BTC | ETH | NFT | NFT-add | NFT-profile | NFT-remove | QR-code | VR-goggles | airplane | airpod | alarm-clock | align-center | align-justify | align-left | align-right | arrow-down | arrow-down-left | arrow-down-right | arrow-expand | arrow-left | arrow-right | arrow-shrink | arrow-up | arrow-up-left | arrow-up-right | arrow-up-split | backward | bag | ball | bank | bar-chart-h | bar-chart-v | battery | battery-charging | battery-empty | bed | beizer-curve | bell | bell-slash | bicycle | bin | bluetooth | bold | book | book-open | bookmark | bookmark-add | bookmarks | books | bot | box | box-1 | branch | brush | bug | building-1 | building-2 | building-3 | building-4 | building-5 | building-6 | bulb | bulb-slash | bus | calendar | calendar-add | calendar-alt | calendar-cross | calendar-remove | calendar-tick | call | call-add | call-cross | call-incoming | call-outgoing | call-remove | call-ringing | camera | camera-slash | candles-h | candles-v | car | card | card-add | card-cross | card-fund | card-in | card-out | card-remove | card-tick | card-withdraw | cart | cart-add | cart-check | cart-cross | cart-minus | chart | chart-down | chart-up | chat | chat-alt | chats | check | check-circle | checkbox-checked | chevron-down | chevron-h | chevron-left | chevron-right | chevron-up | chevron-v | clipboard | clock | cloud | cloud-1 | cloud-download | cloud-info | cloud-lightning | cloud-rain | cloud-slash | cloud-snowy | cloud-upload | clouds | code | code-2 | coin-stack | coin-swap | coins | coins-alt | color-picker | column | compass | conical-flask | corner | corner-down-left | corner-down-right | corner-left-down | corner-left-up | corner-right-down | corner-right-up | corner-up-left | corner-up-right | crop | cup | cursor | data | devices | dislike | division | dollar | dots-h | dots-h-circle | dots-v | dots-v-circle | download | elements | emoji | emoji-add | euro | expand | eye | eye-slash | face-id | feather | feather-AI | feather-add | file | file-alt | file-cloud | file-code | file-download | file-upload | filter-alt | fingerprint | first-aid | flag | flower | folder | folder-add | folder-cloud | folder-cross | folder-download | folder-lock | folder-move | folder-shield | folder-upload | folder-user | fork | forward | game-pad | gear-AI | gem | gift | globe | globe-alt | gps | grid-2 | hashtag | headphones | headset | health-plus | heart | heart-beat | heart-beat-wave | history | home | home-alt | image | image-add | image-check | image-circle | image-cross | image-remove | info-circle | info-hexagon | info-triangle | italics | key | keyboard | lamp | laptop | layer | lifebuoy | lightning | lightning-off | like | line-height | link-detach | list-add | lock | lock-open | loudspeaker | magic-wand | mail | mail-add | mail-check | mail-cross | mail-remove | map-alt | map-marker | media | merge | message | message-alt | messages | microphone | microphone-slash | minus | minus-circle | mobile | money | money-1 | money-2 | moon | moon-cloud | moon-stars | mouse | multiply | multiply-circle | music | music-AI | music-note | naira | navigation-alt | newspaper | paint-brush | paint-bucket | palette | paper-clip | paragraph-spacing | pause | pc | pc-lock | pc-speaker | pc-user | pencil | pencil-edit | pie-chart | pin | pin-alt | plant | plant-2 | play | playlist | plus | plus-circle | pounds | power | printer | processor | pull-request | question-circle | quote | radio-button | radio-selected | receipt | redo | refresh | repeat | repeat-once | road-sign | rocket | rocket-alt | rotate-left | rotate-right | route | save | scan | scissor | screenshot | send-AI | send-alt | server | server-alt | settings | settings-1 | settings-2 | share | share-alt | shield | shield-cross | shield-tick | ship | shower | shrink | shrink-alt | shuffle | sign-in | sign-out | signal | signal-off | sim | snooze | snowflake | sofa | speaker | star | stars | stop | stopwatch | store | strikethrough | subscript | suitcase | sun | sun-cloud | superscript | support | switch-diagonal | switch-horizontal | switch-vertical | tablet | target | taxi | terminal | thermometer | ticket | tissue | train | trophy | truck | tv | underline | undo | upload | user | user-add | user-circle | user-cross | user-group | user-heart | user-remove | user-tick | users | verified | video | video-slash | voice-note | volume | volume-low | volume-mute | volume-slash | wallet | wallet-add | wallet-check | wallet-cross | wallet-fund | wallet-remove | wallet-withdraw | water-drop | wifi | wristwatch | yen | zoom-in | zoom-out; variant: outline | solid.
Provide exactly one of name (registry name, loaded after mount) or icon (IconRecord from @raydenui/ui/icons, immediate/SSR rendering). Variants are outline and solid. Discover exact name/export pairs in catalog.icons.entries or the public iconCatalog export. Icon slots accept names, IconRecord data, or React nodes. Label icon-only controls on the control; meaningful standalone icons need aria-hidden={false}, role="img", and aria-label.
Preserve accessible labels, keyboard interaction, and reduced-motion preferences. Check the actual installed UI version before applying this reference.
Validate structured component usage; validation cannot establish runtime accessibility, callback behavior, or correctness of arbitrary React code.

### Divider

Build with Rayden UI's free default Citrionus flavor, using reference UI 0.10.1 and AI 0.1.5.
Use Divider: Visual separator between content sections. Supports multiple variants including with icon, label, title, and button.
Import { Divider } from "@raydenui/ui".
Supported enum values: variant: default | with-icon | with-label | with-title | with-button | with-title-and-button.
Preserve accessible labels, keyboard interaction, and reduced-motion preferences. Check the actual installed UI version before applying this reference.
Validate structured component usage; validation cannot establish runtime accessibility, callback behavior, or correctness of arbitrary React code.

### Tooltip

Build with Rayden UI's free default Citrionus flavor, using reference UI 0.10.1 and AI 0.1.5.
Use Tooltip: Contextual popup with additional information. Shows on hover/focus.
Import { Tooltip } from "@raydenui/ui".
Required props: content.
Supported enum values: placement: top | bottom | left | right; position: top-left | top-center | top-right | bottom-left | bottom-center | bottom-right | left-top | left-center | left-bottom | right-top | right-center | right-bottom; theme: light | dark.
Preserve accessible labels, keyboard interaction, and reduced-motion preferences. Check the actual installed UI version before applying this reference.
Validate structured component usage; validation cannot establish runtime accessibility, callback behavior, or correctness of arbitrary React code.

### Input

Build with Rayden UI's free default Citrionus flavor, using reference UI 0.10.1 and AI 0.1.5.
Use Input: Text input field with label, helper text, leading/trailing icons, and validation states (error/success).
Import { Input } from "@raydenui/ui".
Supported enum values: size: xs | sm | md | lg.
Preserve accessible labels, keyboard interaction, and reduced-motion preferences. Check the actual installed UI version before applying this reference.
Validate structured component usage; validation cannot establish runtime accessibility, callback behavior, or correctness of arbitrary React code.

### Select

Build with Rayden UI's free default Citrionus flavor, using reference UI 0.10.1 and AI 0.1.5.
Use Select: Dropdown select component with options. Compound component requiring SelectOption children.
Import { Select } from "@raydenui/ui".
Family exports: Select, SelectOption. Look up each export's own prop contract before using it.
Required props: children.
Composition guidance: {"root":"Select","description":"Dropdown select input","requiredChildren":["SelectOption"],"structure":{"Select":{"children":["SelectOption"],"minChildren":1},"SelectOption":{"parent":"Select"}}}
Preserve accessible labels, keyboard interaction, and reduced-motion preferences. Check the actual installed UI version before applying this reference.
Validate structured component usage; validation cannot establish runtime accessibility, callback behavior, or correctness of arbitrary React code.

### Checkbox

Build with Rayden UI's free default Citrionus flavor, using reference UI 0.10.1 and AI 0.1.5.
Use Checkbox: Checkbox input for boolean selections with optional label.
Import { Checkbox } from "@raydenui/ui".
Supported enum values: position: left | right.
Preserve accessible labels, keyboard interaction, and reduced-motion preferences. Check the actual installed UI version before applying this reference.
Validate structured component usage; validation cannot establish runtime accessibility, callback behavior, or correctness of arbitrary React code.

### Radio

Build with Rayden UI's free default Citrionus flavor, using reference UI 0.10.1 and AI 0.1.5.
Use Radio: Radio button for single selection from a group of options.
Import { Radio } from "@raydenui/ui".
Supported enum values: position: left | right.
Preserve accessible labels, keyboard interaction, and reduced-motion preferences. Check the actual installed UI version before applying this reference.
Validate structured component usage; validation cannot establish runtime accessibility, callback behavior, or correctness of arbitrary React code.

### Toggle

Build with Rayden UI's free default Citrionus flavor, using reference UI 0.10.1 and AI 0.1.5.
Use Toggle: Toggle switch for on/off states.
Import { Toggle } from "@raydenui/ui".
Supported enum values: position: left | right.
Preserve accessible labels, keyboard interaction, and reduced-motion preferences. Check the actual installed UI version before applying this reference.
Validate structured component usage; validation cannot establish runtime accessibility, callback behavior, or correctness of arbitrary React code.

### Chip

Build with Rayden UI's free default Citrionus flavor, using reference UI 0.10.1 and AI 0.1.5.
Use Chip: Compact element for input or filtering. Supports input variant (with close button) and filter variant (with chevron).
Import { Chip } from "@raydenui/ui".
Supported enum values: variant: filter | input.
Preserve accessible labels, keyboard interaction, and reduced-motion preferences. Check the actual installed UI version before applying this reference.
Validate structured component usage; validation cannot establish runtime accessibility, callback behavior, or correctness of arbitrary React code.

### Counter

Build with Rayden UI's free default Citrionus flavor, using reference UI 0.10.1 and AI 0.1.5.
Use Counter: Numeric input with increment/decrement buttons. Includes Counter for interactive input and NumberCounter for display-only badges.
Import { Counter } from "@raydenui/ui".
Family exports: Counter, NumberCounter. Look up each export's own prop contract before using it.
Supported enum values: shape: rounded | block | pill; size: sm | md | lg.
Preserve accessible labels, keyboard interaction, and reduced-motion preferences. Check the actual installed UI version before applying this reference.
Validate structured component usage; validation cannot establish runtime accessibility, callback behavior, or correctness of arbitrary React code.

### Slider

Build with Rayden UI's free default Citrionus flavor, using reference UI 0.10.1 and AI 0.1.5.
Use Slider: Draggable range input for selecting numeric values. Includes single Slider and dual-handle RangeSlider for selecting value ranges.
Import { Slider } from "@raydenui/ui".
Family exports: Slider, RangeSlider. Look up each export's own prop contract before using it.
Supported enum values: size: sm | md | lg.
Preserve accessible labels, keyboard interaction, and reduced-motion preferences. Check the actual installed UI version before applying this reference.
Validate structured component usage; validation cannot establish runtime accessibility, callback behavior, or correctness of arbitrary React code.

### DatePicker

Build with Rayden UI's free default Citrionus flavor, using reference UI 0.10.1 and AI 0.1.5.
Use DatePicker: Calendar date picker supporting single date, date range, and year selection modes. Includes min/max date constraints and optional footer with Clear/Done buttons.
Import { DatePicker } from "@raydenui/ui".
Supported enum values: mode: single | range | year.
Preserve accessible labels, keyboard interaction, and reduced-motion preferences. Check the actual installed UI version before applying this reference.
Validate structured component usage; validation cannot establish runtime accessibility, callback behavior, or correctness of arbitrary React code.

### Alert

Build with Rayden UI's free default Citrionus flavor, using reference UI 0.10.1 and AI 0.1.5.
Use Alert: Notification component for displaying messages, alerts, and notifications. Supports toast and banner variants with multiple states.
Import { Alert } from "@raydenui/ui".
Supported enum values: state: information | success | warning | error; variant: banner | toast.
Preserve accessible labels, keyboard interaction, and reduced-motion preferences. Check the actual installed UI version before applying this reference.
Validate structured component usage; validation cannot establish runtime accessibility, callback behavior, or correctness of arbitrary React code.

### Banner

Build with Rayden UI's free default Citrionus flavor, using reference UI 0.10.1 and AI 0.1.5.
Use Banner: Full-width notification banner for important announcements. Supports 6 status types, bold/subtle emphasis, and optional action button.
Import { Banner } from "@raydenui/ui".
Required props: title.
Supported enum values: emphasis: bold | subtle; size: sm | lg; status: information | success | warning | error | feature | opportunity.
Preserve accessible labels, keyboard interaction, and reduced-motion preferences. Check the actual installed UI version before applying this reference.
Validate structured component usage; validation cannot establish runtime accessibility, callback behavior, or correctness of arbitrary React code.

### ProgressBar

Build with Rayden UI's free default Citrionus flavor, using reference UI 0.10.1 and AI 0.1.5.
Use ProgressBar: Linear progress indicator showing completion percentage with optional label and metadata.
Import { ProgressBar } from "@raydenui/ui".
Supported enum values: percentagePosition: top | bottom; size: sm | md | lg; type: basic | segmented.
Preserve accessible labels, keyboard interaction, and reduced-motion preferences. Check the actual installed UI version before applying this reference.
Validate structured component usage; validation cannot establish runtime accessibility, callback behavior, or correctness of arbitrary React code.

### ProgressCircle

Build with Rayden UI's free default Citrionus flavor, using reference UI 0.10.1 and AI 0.1.5.
Use ProgressCircle: Circular progress indicator showing completion percentage with optional center text.
Import { ProgressCircle } from "@raydenui/ui".
Supported enum values: size: xs | sm | md | lg | xl; variant: default | segmented.
Preserve accessible labels, keyboard interaction, and reduced-motion preferences. Check the actual installed UI version before applying this reference.
Validate structured component usage; validation cannot establish runtime accessibility, callback behavior, or correctness of arbitrary React code.

### Spinner

Build with Rayden UI's free default Citrionus flavor, using reference UI 0.10.1 and AI 0.1.5.
Use Spinner: Loading indicator with 7 animation types and optional label. Supports brand and white color styles for different backgrounds.
Import { Spinner } from "@raydenui/ui".
Supported enum values: colorStyle: white | brand; labelPosition: after | before | above | below; size: xs | sm | md | lg | xl | 2xl | 3xl; type: bold | thin | duo-tone | buffering-thin | buffering-bold | dot | juggling.
Preserve accessible labels, keyboard interaction, and reduced-motion preferences. Check the actual installed UI version before applying this reference.
Validate structured component usage; validation cannot establish runtime accessibility, callback behavior, or correctness of arbitrary React code.

### Tabs

Build with Rayden UI's free default Citrionus flavor, using reference UI 0.10.1 and AI 0.1.5.
Use Tabs: Tabbed navigation component with line and pill variants. Compound component with Tab children.
Import { Tabs } from "@raydenui/ui".
Family exports: Tabs, Tab. Look up each export's own prop contract before using it.
Required props: children.
Supported enum values: motion: false | true | calm | snappy | playful | reduced; orientation: horizontal | vertical; size: sm | md | lg; variant: pill | segmented | line.
Composition guidance: {"root":"Tabs","description":"Tabbed navigation","requiredChildren":["Tab"],"structure":{"Tabs":{"children":["Tab"],"minChildren":1},"Tab":{"parent":"Tabs"}}}
Preserve accessible labels, keyboard interaction, and reduced-motion preferences. Check the actual installed UI version before applying this reference.
Validate structured component usage; validation cannot establish runtime accessibility, callback behavior, or correctness of arbitrary React code.

### Breadcrumb

Build with Rayden UI's free default Citrionus flavor, using reference UI 0.10.1 and AI 0.1.5.
Use Breadcrumb: Navigation breadcrumb trail showing current location in hierarchy.
Import { Breadcrumb } from "@raydenui/ui".
Required props: items.
Supported enum values: separator: chevron | double-chevron | slash.
Preserve accessible labels, keyboard interaction, and reduced-motion preferences. Check the actual installed UI version before applying this reference.
Validate structured component usage; validation cannot establish runtime accessibility, callback behavior, or correctness of arbitrary React code.

### Pagination

Build with Rayden UI's free default Citrionus flavor, using reference UI 0.10.1 and AI 0.1.5.
Use Pagination: Page navigation component for navigating through paginated content.
Import { Pagination } from "@raydenui/ui".
Required props: currentPage, onPageChange, totalPages.
Preserve accessible labels, keyboard interaction, and reduced-motion preferences. Check the actual installed UI version before applying this reference.
Validate structured component usage; validation cannot establish runtime accessibility, callback behavior, or correctness of arbitrary React code.

### SidebarMenu

Build with Rayden UI's free default Citrionus flavor, using reference UI 0.10.1 and AI 0.1.5.
Use SidebarMenu: Sidebar navigation menu with sections, items, and nested sub-menus. Compound component.
Import { SidebarMenu } from "@raydenui/ui".
Family exports: SidebarMenu, SidebarMenuItem, SidebarMenuSection, SidebarMenuSub, SidebarMenuSubItem. Look up each export's own prop contract before using it.
Required props: children.
Supported enum values: theme: blue | light | dark-blue | dark-grey.
Composition guidance: {"root":"SidebarMenu","description":"Navigation sidebar with sections and items","structure":{"SidebarMenu":{"children":["SidebarMenuSection","SidebarMenuItem"]},"SidebarMenuSection":{"parent":"SidebarMenu","children":["SidebarMenuItem","SidebarMenuSub"]},"SidebarMenuItem":{"parent":["SidebarMenu","SidebarMenuSection"]},"SidebarMenuSub":{"parent":"SidebarMenuSection","children":["SidebarMenuSubItem"]},"SidebarMenuSubItem":{"parent":"SidebarMenuSub"}}}
Preserve accessible labels, keyboard interaction, and reduced-motion preferences. Check the actual installed UI version before applying this reference.
Validate structured component usage; validation cannot establish runtime accessibility, callback behavior, or correctness of arbitrary React code.

### Stepper

Build with Rayden UI's free default Citrionus flavor, using reference UI 0.10.1 and AI 0.1.5.
Use Stepper: Multi-step progress indicator for workflows. Includes Stepper for step-by-step navigation, LinearStepper for progress bars, and SegmentedStepper for segmented progress.
Import { Stepper } from "@raydenui/ui".
Family exports: Stepper, LinearStepper, SegmentedStepper. Look up each export's own prop contract before using it.
Required props: steps.
Supported enum values: indicator: number | icon | dot; orientation: horizontal | vertical.
Preserve accessible labels, keyboard interaction, and reduced-motion preferences. Check the actual installed UI version before applying this reference.
Validate structured component usage; validation cannot establish runtime accessibility, callback behavior, or correctness of arbitrary React code.

### Table

Build with Rayden UI's free default Citrionus flavor, using reference UI 0.10.1 and AI 0.1.5.
Use Table: Data table with sortable columns and row selection. Compound component requiring TableHeader, TableBody, TableRow, TableHead, and TableCell sub-components.
Import { Table } from "@raydenui/ui".
Family exports: Table, TableHeader, TableBody, TableRow, TableHead, TableCell. Look up each export's own prop contract before using it.
Composition guidance: {"root":"Table","description":"Data table with sortable columns and selectable rows","requiredChildren":["TableHeader","TableBody"],"structure":{"Table":{"children":["TableHeader","TableBody"],"minChildren":2,"maxChildren":2,"order":["TableHeader","TableBody"]},"TableHeader":{"parent":"Table","children":["TableRow"],"minChildren":1},"TableBody":{"parent":"Table","children":["TableRow"],"minChildren":0},"TableRow":{"parent":["TableHeader","TableBody"],"children":["TableHead","TableCell"]},"TableHead":{"parent":"TableRow","mustBeInsideOf":"TableHeader"},"TableCell":{"parent":"TableRow","mustBeInsideOf":"TableBody"}},"validationRules":["TableHead should only be used in TableRow within TableHeader","TableCell should only be used in TableRow within TableBody","First child of Table must be TableHeader","Second child of Table must be TableBody"]}
Preserve accessible labels, keyboard interaction, and reduced-motion preferences. Check the actual installed UI version before applying this reference.
Validate structured component usage; validation cannot establish runtime accessibility, callback behavior, or correctness of arbitrary React code.

### Avatar

Build with Rayden UI's free default Citrionus flavor, using reference UI 0.10.1 and AI 0.1.5.
Use Avatar: User avatar displaying image, initials, or icon with optional status indicator.
Import { Avatar } from "@raydenui/ui".
Family exports: Avatar, AvatarGroup. Look up each export's own prop contract before using it.
Supported enum values: size: xs | sm | md | lg | xl | 2xl; status: none | verified | online | offline; type: image | icon | initials.
Composition guidance: {"root":"AvatarGroup","description":"Avatar group for multiple users","structure":{"AvatarGroup":{"children":["Avatar"]},"Avatar":{"parent":["AvatarGroup",null]}}}
Preserve accessible labels, keyboard interaction, and reduced-motion preferences. Check the actual installed UI version before applying this reference.
Validate structured component usage; validation cannot establish runtime accessibility, callback behavior, or correctness of arbitrary React code.

### MetricsCard

Build with Rayden UI's free default Citrionus flavor, using reference UI 0.10.1 and AI 0.1.5.
Use MetricsCard: Card displaying key metrics and statistics with trend indicators and optional actions.
Import { MetricsCard } from "@raydenui/ui".
Required props: label, value.
Supported enum values: variation: 1 | 2 | 3 | 4 | 5 | 6.
Preserve accessible labels, keyboard interaction, and reduced-motion preferences. Check the actual installed UI version before applying this reference.
Validate structured component usage; validation cannot establish runtime accessibility, callback behavior, or correctness of arbitrary React code.

### EmptyStateIllustration

Build with Rayden UI's free default Citrionus flavor, using reference UI 0.10.1 and AI 0.1.5.
Use EmptyStateIllustration: Illustration component for empty states, error pages, and placeholder content.
Import { EmptyStateIllustration } from "@raydenui/ui".
Required props: name.
Supported enum values: name: search | calendar | chat | contacts | dashboard | favorites | file-manager | forms | gallery | inbox | invoice | notifications | product-catalog | project-list | shopping-cart | subscriptions | survey | task-templates | team.
Preserve accessible labels, keyboard interaction, and reduced-motion preferences. Check the actual installed UI version before applying this reference.
Validate structured component usage; validation cannot establish runtime accessibility, callback behavior, or correctness of arbitrary React code.

### ActivityFeed

Build with Rayden UI's free default Citrionus flavor, using reference UI 0.10.1 and AI 0.1.5.
Use ActivityFeed: Timeline and notification feed components for displaying user activity, comments, and events. Includes ActivityItem for feed entries and ActivityContent for rich content blocks.
Import { ActivityItem, ActivityContent } from "@raydenui/ui".
ActivityFeed is a family name, not an importable component; use its named exports.
Family exports: ActivityItem, ActivityContent. Look up each export's own prop contract before using it.
Preserve accessible labels, keyboard interaction, and reduced-motion preferences. Check the actual installed UI version before applying this reference.
Validate structured component usage; validation cannot establish runtime accessibility, callback behavior, or correctness of arbitrary React code.

### RaydenChart

Build with Rayden UI's free default Citrionus flavor, using reference UI 0.10.1 and AI 0.1.5.
Use RaydenChart: Chart.js wrapper with Rayden UI theme defaults. Supports line, bar, pie, doughnut, radar, scatter, bubble, and polar-area chart types.
Import { RaydenChart } from "@raydenui/ui/chart".
Required props: data, type.
Supported enum values: type: line | bar | pie | doughnut | radar | scatter | bubble | polar-area.
Preserve accessible labels, keyboard interaction, and reduced-motion preferences. Check the actual installed UI version before applying this reference.
Validate structured component usage; validation cannot establish runtime accessibility, callback behavior, or correctness of arbitrary React code.

### Accordion

Build with Rayden UI's free default Citrionus flavor, using reference UI 0.10.1 and AI 0.1.5.
Use Accordion: Collapsible content panels for organizing information. Supports single/multiple open items with default or nested visual styles.
Import { Accordion } from "@raydenui/ui".
Family exports: Accordion, AccordionItem, AccordionTrigger, AccordionContent. Look up each export's own prop contract before using it.
Supported enum values: type: default | nested.
Preserve accessible labels, keyboard interaction, and reduced-motion preferences. Check the actual installed UI version before applying this reference.
Validate structured component usage; validation cannot establish runtime accessibility, callback behavior, or correctness of arbitrary React code.

### Card

Build with Rayden UI's free default Citrionus flavor, using reference UI 0.10.1 and AI 0.1.5.
Use Card: Flexible container component for grouping related content with optional header, body, footer, and image sections.
Import { Card } from "@raydenui/ui".
Family exports: Card, CardHeader, CardBody, CardFooter, CardImage. Look up each export's own prop contract before using it.
Supported enum values: rounded: sm | md | lg | xl | full; shadow: none | sm | md | lg; size: sm | md | lg; variant: default | outlined | elevated | ghost.
Preserve accessible labels, keyboard interaction, and reduced-motion preferences. Check the actual installed UI version before applying this reference.
Validate structured component usage; validation cannot establish runtime accessibility, callback behavior, or correctness of arbitrary React code.

### Modal

Build with Rayden UI's free default Citrionus flavor, using reference UI 0.10.1 and AI 0.1.5.
Use Modal: Accessible dialog overlay with title, description, icon, and action buttons. Renders via portal with backdrop blur, keyboard dismiss, and focus management.
Import { Modal } from "@raydenui/ui".
Required props: onClose, open.
Supported enum values: footerOrientation: horizontal | vertical; motion: false | true | calm | snappy | playful | reduced; size: sm | md | lg.
Preserve accessible labels, keyboard interaction, and reduced-motion preferences. Check the actual installed UI version before applying this reference.
Validate structured component usage; validation cannot establish runtime accessibility, callback behavior, or correctness of arbitrary React code.

### ButtonGroup

Build with Rayden UI's free default Citrionus flavor, using reference UI 0.10.1 and AI 0.1.5.
Use ButtonGroup: Horizontal group of connected buttons with shared styling. Compound component with ButtonGroupItem children.
Import { ButtonGroup } from "@raydenui/ui".
Family exports: ButtonGroup, ButtonGroupItem. Look up each export's own prop contract before using it.
Required props: children.
Composition guidance: {"root":"ButtonGroup","description":"Grouped buttons with connected borders","requiredChildren":["ButtonGroupItem"],"structure":{"ButtonGroup":{"children":["ButtonGroupItem"],"minChildren":2},"ButtonGroupItem":{"parent":"ButtonGroup"}}}
Preserve accessible labels, keyboard interaction, and reduced-motion preferences. Check the actual installed UI version before applying this reference.
Validate structured component usage; validation cannot establish runtime accessibility, callback behavior, or correctness of arbitrary React code.

### DropdownMenu

Build with Rayden UI's free default Citrionus flavor, using reference UI 0.10.1 and AI 0.1.5.
Use DropdownMenu: Context menu or action dropdown. Compound component with trigger and content containing menu items.
Import { DropdownMenu } from "@raydenui/ui".
Family exports: DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuSeparator. Look up each export's own prop contract before using it.
Required props: children.
Composition guidance: {"root":"DropdownMenu","description":"Context menu or dropdown with keyboard navigation","requiredChildren":["DropdownMenuTrigger","DropdownMenuContent"],"structure":{"DropdownMenu":{"children":["DropdownMenuTrigger","DropdownMenuContent"],"minChildren":2,"maxChildren":2},"DropdownMenuTrigger":{"parent":"DropdownMenu","children":"any","notes":"Usually wraps a Button component"},"DropdownMenuContent":{"parent":"DropdownMenu","children":["DropdownMenuGroup","DropdownMenuLabel","DropdownMenuItem","DropdownMenuSeparator"]},"DropdownMenuGroup":{"parent":"DropdownMenuContent","children":["DropdownMenuItem","DropdownMenuLabel","DropdownMenuSeparator"]},"DropdownMenuItem":{"parent":["DropdownMenuContent","DropdownMenuGroup"]},"DropdownMenuLabel":{"parent":["DropdownMenuContent","DropdownMenuGroup"]},"DropdownMenuSeparator":{"parent":["DropdownMenuContent","DropdownMenuGroup"]}}}
Preserve accessible labels, keyboard interaction, and reduced-motion preferences. Check the actual installed UI version before applying this reference.
Validate structured component usage; validation cannot establish runtime accessibility, callback behavior, or correctness of arbitrary React code.

### FileUpload

Build with Rayden UI's free default Citrionus flavor, using reference UI 0.10.1 and AI 0.1.5.
Use FileUpload: File upload component with drag and drop support. Compound component with drop zone and file items.
Import { FileUpload } from "@raydenui/ui".
Family exports: FileUpload, FileUploadDropZone, FileUploadItem. Look up each export's own prop contract before using it.
Required props: files, onFilesChange.
Composition guidance: {"root":"FileUpload","description":"File upload with drop zone","structure":{"FileUpload":{"children":["FileUploadDropZone","FileUploadItem"]},"FileUploadDropZone":{"parent":"FileUpload"},"FileUploadItem":{"parent":"FileUpload"}}}
Preserve accessible labels, keyboard interaction, and reduced-motion preferences. Check the actual installed UI version before applying this reference.
Validate structured component usage; validation cannot establish runtime accessibility, callback behavior, or correctness of arbitrary React code.

### ApplicationShellBlock

Build with Rayden UI's free default Citrionus flavor, using reference UI 0.10.1 and AI 0.1.5.
Use ApplicationShellBlock: Responsive application frame with navigation, workspace switcher, search and content slots.
Import { ApplicationShellBlock } from "@raydenui/ui/blocks".
Supported enum values: expandAt: sm | md | lg; mainScroll: page | region; navStatus: error | loading | idle; sectionHeadingLevel: h1 | h2 | h3 | h4 | h5 | h6.
Preserve accessible labels, keyboard interaction, and reduced-motion preferences. Check the actual installed UI version before applying this reference.
Validate structured component usage; validation cannot establish runtime accessibility, callback behavior, or correctness of arbitrary React code.

### PageHeaderBlock

Build with Rayden UI's free default Citrionus flavor, using reference UI 0.10.1 and AI 0.1.5.
Use PageHeaderBlock: Page title, breadcrumbs, prioritized actions and collapsible context details.
Import { PageHeaderBlock } from "@raydenui/ui/blocks".
Required props: title.
Supported enum values: headingLevel: h1 | h2 | h3 | h4 | h5 | h6; state: default | error | loading; variant: plain | surface.
Preserve accessible labels, keyboard interaction, and reduced-motion preferences. Check the actual installed UI version before applying this reference.
Validate structured component usage; validation cannot establish runtime accessibility, callback behavior, or correctness of arbitrary React code.

### WorkspaceSwitcherBlock

Build with Rayden UI's free default Citrionus flavor, using reference UI 0.10.1 and AI 0.1.5.
Use WorkspaceSwitcherBlock: Searchable workspace selection with current state, destination links and availability explanations.
Import { WorkspaceSwitcherBlock } from "@raydenui/ui/blocks".
Supported enum values: status: error | loading | idle.
Preserve accessible labels, keyboard interaction, and reduced-motion preferences. Check the actual installed UI version before applying this reference.
Validate structured component usage; validation cannot establish runtime accessibility, callback behavior, or correctness of arbitrary React code.

### CommandPaletteBlock

Build with Rayden UI's free default Citrionus flavor, using reference UI 0.10.1 and AI 0.1.5.
Use CommandPaletteBlock: Keyboard-searchable navigation and actions with optional shortcuts and explicit loading, error and empty states.
Import { CommandPaletteBlock } from "@raydenui/ui/blocks".
Supported enum values: filterMode: local | external; status: error | loading | idle.
Preserve accessible labels, keyboard interaction, and reduced-motion preferences. Check the actual installed UI version before applying this reference.
Validate structured component usage; validation cannot establish runtime accessibility, callback behavior, or correctness of arbitrary React code.

## Motion guidance

### MotionProvider

Build with Rayden UI's free default Citrionus flavor, using reference UI 0.10.1 and AI 0.1.5.
Use MotionProvider: Context-only motion preset scope; system reduced-motion preferences always take precedence.
Import { MotionProvider } from "@raydenui/ui/motion".
Family exports: MotionProvider, Pressable, Reveal, Collapse, SharedLayout. Look up each export's own prop contract before using it.
Required props: children.
Supported enum values: preset: calm | snappy | playful | reduced.
Preserve accessible labels, keyboard interaction, and reduced-motion preferences. Check the actual installed UI version before applying this reference.
Validate structured component usage; validation cannot establish runtime accessibility, callback behavior, or correctness of arbitrary React code.

### Pressable

Build with Rayden UI's free default Citrionus flavor, using reference UI 0.10.1 and AI 0.1.5.
Use Pressable: Optional Pressable motion primitive. Consult catalog.motion for semantic recipes and constraints.
Import { Pressable } from "@raydenui/ui/motion".
Family exports: MotionProvider, Pressable, Reveal, Collapse, SharedLayout. Look up each export's own prop contract before using it.
Supported enum values: motion: false | true | calm | snappy | playful | reduced.
Preserve accessible labels, keyboard interaction, and reduced-motion preferences. Check the actual installed UI version before applying this reference.
Validate structured component usage; validation cannot establish runtime accessibility, callback behavior, or correctness of arbitrary React code.

### Reveal

Build with Rayden UI's free default Citrionus flavor, using reference UI 0.10.1 and AI 0.1.5.
Use Reveal: Optional Reveal motion primitive. Consult catalog.motion for semantic recipes and constraints.
Import { Reveal } from "@raydenui/ui/motion".
Family exports: MotionProvider, Pressable, Reveal, Collapse, SharedLayout. Look up each export's own prop contract before using it.
Supported enum values: motion: false | true | calm | snappy | playful | reduced; recipe: appear.fade | appear.fadeUp | appear.scale.
Preserve accessible labels, keyboard interaction, and reduced-motion preferences. Check the actual installed UI version before applying this reference.
Validate structured component usage; validation cannot establish runtime accessibility, callback behavior, or correctness of arbitrary React code.

### Collapse

Build with Rayden UI's free default Citrionus flavor, using reference UI 0.10.1 and AI 0.1.5.
Use Collapse: Optional Collapse motion primitive. Consult catalog.motion for semantic recipes and constraints.
Import { Collapse } from "@raydenui/ui/motion".
Family exports: MotionProvider, Pressable, Reveal, Collapse, SharedLayout. Look up each export's own prop contract before using it.
Required props: open.
Supported enum values: motion: false | true | calm | snappy | playful | reduced.
Preserve accessible labels, keyboard interaction, and reduced-motion preferences. Check the actual installed UI version before applying this reference.
Validate structured component usage; validation cannot establish runtime accessibility, callback behavior, or correctness of arbitrary React code.

### SharedLayout

Build with Rayden UI's free default Citrionus flavor, using reference UI 0.10.1 and AI 0.1.5.
Use SharedLayout: Optional SharedLayout motion primitive. Consult catalog.motion for semantic recipes and constraints.
Import { SharedLayout } from "@raydenui/ui/motion".
Family exports: MotionProvider, Pressable, Reveal, Collapse, SharedLayout. Look up each export's own prop contract before using it.
Required props: layoutKey.
Supported enum values: motion: false | true | calm | snappy | playful | reduced.
Preserve accessible labels, keyboard interaction, and reduced-motion preferences. Check the actual installed UI version before applying this reference.
Validate structured component usage; validation cannot establish runtime accessibility, callback behavior, or correctness of arbitrary React code.