Components

Rayden UI provides 33+ production-ready React components built with Tailwind CSS v4. All components are fully typed, accessible, and tree-shakeable.

Import


import { Button, Input, Badge, Table, Avatar } from "@raydenui/ui";

Forms & Inputs

Components for user input and form controls.

Component	Description
Button	Action buttons with variants, appearances, sizes, and icon support
ButtonGroup	Horizontal grouping of related buttons
Input	Text input with label, helper text, and validation states
Select	Dropdown select with icons, avatars, and status indicators
FormControl	Checkbox, Radio, and Toggle components
Chip	Compact input tags with close/filter actions
FileUpload	Drag-and-drop file upload with progress tracking
Counter	Numeric input with increment/decrement controls
Slider	Drag sliders for value and range selection
DatePicker	Calendar picker for date and range selection

Components for navigating between pages and sections.

Component	Description
Tabs	Tabbed navigation with line, pill, and segmented variants
Breadcrumb	Hierarchical page navigation with custom separators
Pagination	Page navigation with prev/next controls
SidebarMenu	Collapsible sidebar navigation with sections and themes
DropdownMenu	Accessible dropdown menu with keyboard navigation
Stepper	Step indicators for multi-step processes

Data Display

Components for presenting data and content.

Component	Description
Table	Data table with sorting, selection, and customizable cells
Avatar	User avatar with image, initials, icon, and status indicator
ActivityFeed	Activity timelines and notification feeds
MetricsCard	Dashboard metric cards with 6 layout variations
Icon	200+ icons with outline and solid variants
EmptyStateIllustration	19 empty state illustrations with custom palettes
Chart	Data visualization with Chart.js (8 chart types)

Feedback

Components for communicating status and messages.

Component	Description
Alert	Toast and banner notifications with actions
Badge	Status indicators and labels
Banner	Alert banners for notifications
ProgressBar	Linear progress indicator with segmented option
ProgressCircle	Circular progress indicator with segmented option
Spinner	Loading indicators (7 animation types)
Tooltip	Contextual information popover

Layout

Components for organizing and structuring content.

Component	Description
Accordion	Collapsible content sections
Divider	Content separator with optional label, icon, or button
Modal	Dialog overlay for focused interactions

Common Patterns

Component Structure

All components follow consistent patterns:


import { Button } from "@raydenui/ui";
import type { ButtonProps } from "@raydenui/ui";
 
// Components use forwardRef for ref forwarding
const MyComponent = () => {
  const buttonRef = useRef<HTMLButtonElement>(null);
 
  return <Button ref={buttonRef}>Click me</Button>;
};

Styling with `className`

All components accept a className prop for custom styling:


<Button className="w-full shadow-soft-lg">Full Width Button</Button>

TypeScript Support

All props are fully typed:


import type { ButtonVariant, ButtonAppearance, ButtonSize, InputState } from "@raydenui/ui";
 
const variant: ButtonVariant = "primary";
const appearance: ButtonAppearance = "solid";