Welcome to SolarUI
SolarUI is a modern UI component library built with React, Tailwind CSS, and shadcn/ui. Accessible, customizable, and ready to drop into your project.
Overview
Introduction
What is SolarUI and how it works
Installation
Add SolarUI to your project in minutes
MCP
Connect SolarUI with model context protocols
Figma
Explore the SolarUI Figma Community file
Changelog
Track updates and new releases
Foundation
Theming
Core
Direction
LTR and RTL layout direction support
Aspect Ratio
Maintain consistent width-to-height ratios
Resizable
Drag-to-resize panel layouts
Scroll Area
Custom-styled scrollable containers
Components
Action
Button
Trigger actions with a single click
Button Group
Group related buttons side by side
Toggle
Switch between two states on/off
Toggle Group
A set of mutually exclusive toggles
Form
Field
Label and validation wrapper for inputs
Input
Single-line text input field
Input Group
Input with prefix or suffix elements
Input OTP
One-time password with separate digit fields
Textarea
Multi-line text input field
Checkbox
Select one or more options from a list
Radio Group
Select a single option from a list
Switch
Toggle between enabled and disabled states
Slider
Pick a value by dragging along a range
Select
Choose from a dropdown list of options
Combobox
Searchable select with autocomplete
Date Picker
Pick a date from a calendar overlay
Feedback
Tooltip
Show brief contextual info on hover
Hover Card
Rich preview card that appears on hover
Popover
Floating panel anchored to a trigger
Alert
Display important contextual messages
Badge
Small label to highlight status or count
Kbd
Display keyboard shortcut keys
Progress
Show the completion of a task
Skeleton
Placeholder shown while content loads
Spinner
Loading indicator for async operations
Sonner
Unobtrusive toast notifications
Alert Dialog
Modal dialog for critical confirmations
Layout
Accordion
Collapsible sections of content
Card
Container with header, body, and footer
Collapsible
Expandable content section
Command
Command palette with search
Dialog
Modal overlay for focused tasks
Drawer
Sliding panel from the screen edge
Empty
Placeholder for empty states
Separator
Visual divider between content sections
Sheet
Slide-in panel overlay
Text
Display
Large headings for hero and marketing sections
Title
Semantic h1–h6 headings for page structure
Body
Paragraph text with default and compact sizes
Code
Monospace inline code references
Label
Accessible label for form controls
Content
Avatar
User profile picture or initials
Calendar
Display and interact with dates
Carousel
Cycle through items one at a time
Context Menu
Right-click contextual actions
Navigation
Breadcrumb
Show the current location in a hierarchy
Dropdown Menu
Menu that opens below a trigger
Menubar
Horizontal menu bar with submenus
Navigation Menu
Main navigation with dropdown panels
Pagination
Navigate between pages of content
Tabs
Switch between related content views
Data
Data Table
Sortable and filterable data grid
Item
Single row in a list or data display
Table
Structured rows and columns of data
Chart
Last updated on