Components

Every component reads the same design tokens, works with the keyboard and runs unchanged on desktop and in the browser. Open any of them for a live example, its code and its API.

#Actions and inputs

Buttons and controls that take a value.

  • Button - Clickable, focusable button with styles, sizes, icons, loading and selected states
  • IconButton - Square, icon-only button for toolbars
  • ToggleButton - Button that stays pressed, like bold or mute
  • ToggleGroup - Row of toggle buttons where one or several can be on
  • SegmentedControl - Row of mutually exclusive segments, like a compact tab bar
  • Toggle - On/off switch
  • Checkbox - Check box with a label
  • RadioGroup - One choice among several, shown as radio buttons
  • Slider - Draggable value between a minimum and a maximum, with a colored track or a neutral point
  • Stepper - Decrement, value and increment for small quantities
  • TextArea - Text on several lines, scrolling past its height or growing with the text
  • NumberField - A typed number or amount of money, formatted when you leave
  • MaskedField - Text that follows a pattern, like a phone number
  • TimePicker - A time of day, typed or picked from a list
  • DateTimePicker - A date and a time over one value
  • LookupField - Picks a record from a list searched on demand
  • FormLayout - Groups of fields in columns, tabs and a list of errors
  • FilterBuilder - Builds a filter out of lines, in the expression language
  • TagBox - Several values from a list, shown as tags
  • ColorPicker - A color from a palette, a shade square or typed
  • DateRangePicker - A period in two clicks, or ready-made
  • DropZone - Dashed area around any content, which takes dropped files
  • FileUpload - Files from the chooser or dropped, with a reason when refused
  • ImageField - A picture chosen by the person
  • Wizard - A task in steps that can refuse to be left
  • StepIndicator - Where a task in steps stands, for an app's own layout
  • StepBadge - The round mark of a step
  • Toolbar - Commands that fold into a menu when out of room
  • SplitButton - A main command with a menu of alternatives
  • ConfirmDialog - A question before something that cannot be undone
  • ColorSwatch - Round color to pick from a palette
  • ThemeSwitcher - Switches between Raven Dark, Raven Light and Raven Glass
  • ThemePicker - A small menu of themes that says which one is on.
  • ThemeEditor - Changes the tokens of the theme on screen, with live contrast and JSON to copy and paste.
  • FloatingToolbar - Translucent row of commands over its content, with a handle that moves it
  • ScrollEdgeArrow - A strip that scrolls, with an arrow at each end that has more to show
  • TitleBar - Title, actions and window buttons drawn by the app; does not move the window
  • ButtonGroup - Buttons glued side by side, as one control
  • ValueSlider - A value in small that opens a slider or can be typed
  • InlineRename - A name that turns into a field by a double click or F2
  • FavoriteToggle - Heart or star that marks a favorite: filled when on
  • SwatchGrid - Grid of color swatches; the handler gets the keys held with the click
  • NinePointAnchor - Three by three grid for a point of reference, moved by the arrow keys
  • ColorPair - Foreground and background colors, one over the other, with a swap button

#Forms

Fields, pickers and the layout around them.

  • TextField - Single-line text input with selection, clipboard, views inside and a clear button
  • Select - Picks one option from a list in a field-like trigger
  • Combobox - Select with a search box that filters the options
  • DatePicker - Field that opens a calendar in a popover
  • Calendar - Month grid to pick a date
  • EventCalendar - A month with its events inside each day
  • Chat - Conversation over a field to write in, with examples and cards to act on
  • RichText - Bold, italic, code and links in plain text, with the marks chat apps use
  • AttachmentStrip - Files about to go with a message, with size, how to send each one and a way to take it out
  • AudioPlayerButton - Plays and stops a recording, with progress and a transcript to open
  • SelectionBar - How many are chosen, a way out and what to do with them, with Escape to leave
  • FloatingPanel - Glowing sphere in a corner that opens a panel over the app and drags between corners
  • ModelPicker - Local AI models to download, try, use and remove
  • CodeBlock - A command to copy
  • ReleaseNotes - An app's versions and what each one brought
  • StatusBar - One fixed line at the foot of an app window
  • Timeline - Blocks along time on named tracks
  • ToolRail - A narrow bar of tools with their names under their icons
  • Scheduler - Timeline of resources: drag, resize and draw events, zoom the time axis
  • RecurrenceEditor - Edits how something repeats: how often, on which days, until when
  • CodeEditor - Source code with line numbers, colors by language, indenting keys and problems marked on their lines
  • Playground - Code beside what it makes, with examples, a run key and the last result that worked kept while the code has problems
  • ExpressionEditor - An expression in several lines, with the fields, functions and operators that go in it and a check as it changes
  • InputOtp - Separate boxes for a one-time code
  • FormField - Labeled field with a hint and validation messages
  • Label - Form label with an optional required marker and hint

Moving around an application.

  • DocumentTabs - Tabs for open documents that close, move, rename and say what was not saved
  • FileBrowser - Folders and files from the app, with a breadcrumb, sorting and selection
  • YearView - The twelve months of a year, with marks on the days
  • Ribbon - Office-style command bar with tabs, groups and quick access
  • Menubar - Horizontal bar of menus such as File, Edit and View
  • Tabs - Tab bar with one content view per tab
  • Sidebar - Navigation column with sections, items and counts
  • SidebarBrand - The name of an app at the top of a sidebar
  • Breadcrumb - Path of locations ending at the current page
  • Pagination - Previous, numbered pages with ellipses, and Next
  • Accordion - Disclosures separated by hairlines
  • Disclosure - Header that shows or hides its content

#Overlays

Content that floats above the page.

  • Dialog - Modal window over a dimmed backdrop
  • Sheet - Panel that slides over the UI from one edge
  • SplashScreen - Opening screen that covers the window while the app loads
  • Popover - Floating content anchored below a view
  • HoverCard - Rich content shown while the pointer is over a trigger
  • Tooltip - Short label shown on hover, with an optional key cap
  • HelpTip - A small question mark that explains something
  • DropdownMenu - Button that opens a list of actions, with submenus and check marks
  • ContextMenu - Menu opened at the pointer on right click
  • CommandPalette - Searchable list of commands, opened with Cmd/Ctrl+K
  • Toaster - Stacked notifications that dismiss themselves

#Data

Showing records and numbers.

  • VirtualList - A list of any length with rows of any height, which jumps to a row and stays at the end
  • SortableList - Rows put in order by a drag or with Alt and the arrows
  • TreeView - Items inside items: opens, selects, checks and filters
  • CardView - Records as cards, only those in sight are built
  • DataGrid - Virtualized grid for 100,000 rows: sorting, filters, grouping and export
  • Table - Simple table with a header, hover rows and numeric columns
  • List - Bordered list with icons, titles and trailing text
  • Stat - Headline number with a label and a change indicator
  • Chart - Area, bar, line, pie, doughnut, radar and radial charts in the patterns of the shadcn/ui catalog, with tooltips, keyboard, a focus that glides between categories, lines of reference and a fixed axis; scatter, sparklines and candlesticks too
  • ChartReference - A dashed line at a value that matters, with a label, over a chart
  • SankeyChart - How much flows from what to what: ribbons between nodes, arrow keys, and a clear message when the flows go in a circle
  • ChartCard - A chart's card: title, description, what changes it, tabs with totals, and how it trends
  • BarChart - Bar chart with labels and faint gridlines
  • AreaChart - Smooth area chart of evenly spaced values
  • Barcode - QR Code and linear barcodes that scanners can read

#Layout

Arranging everything else.

  • TileLayout - A dashboard of tiles to drag and resize
  • VStack - Lays children out in a column
  • HStack - Lays children out in a row
  • Grid - Equal-width columns that wrap into rows
  • Spacer - Flexible space that pushes its siblings apart
  • ScrollView - Scrolling stack, vertical or horizontal
  • ScrollScene - A section that holds its content on screen for a length of scrolling, for steps that change as you scroll
  • ScrollLinked - Fades, moves or scales its content by how far the page has scrolled
  • Sticky - Stays below the top while its section scrolls past
  • Anchor - A place a #name link scrolls to, gliding there
  • Ticker - A strip of content that keeps moving sideways, still under reduced motion
  • CountUp - A number that counts up when it first shows on screen
  • Link - Text that opens an address, or scrolls to an anchor
  • QuadField - A plane of squares that waves like a floor and stands up into a picture as the page scrolls
  • Splitter - Two panes with a draggable divider
  • SplitPanes - Any number of panes with a bar between each two, and limits
  • SplitHandle - A bar to drag that changes a size
  • DockArea - Panels in a tree of splits and tabs that move by a drag, by keys or by a menu, resize, collapse, close, and save their arrangement as text
  • Card - Grouped surface lifted off the canvas
  • GlassCard - Translucent card for Raven Glass compositions
  • Section - Titled group of content with an optional description
  • Divider - Hairline separator
  • Footer - Band that ends a page or app, with left, center and right areas
  • AspectRatio - Keeps content at a width-to-height ratio
  • Collapse - Animates its content's height as it opens and closes
  • ZStack - Views on top of each other, in a box as large as the largest
  • PropertyRow - A label on the left and its value on the right
  • PageHeader - Title, description, badges and actions at the top of a page

#Display and feedback

Text, status and progress.

  • Text - Text in the theme's type scale, with truncation
  • Alert - Tinted message box with an icon, a title and a description
  • Badge - Small pill for status, counts and categories
  • Avatar - Round avatar with initials colored from the name
  • Kbd - Keyboard key, for showing shortcuts
  • ProgressBar - Horizontal progress bar, with a label, a percentage and a detail
  • Spinner - Indeterminate activity indicator
  • Skeleton - Placeholder block shown while content loads
  • Dot - Small round mark of state, such as not saved
  • OverlayBadge - A small view on a corner of another
  • Rating - Stars for a score, to read or to give with the pointer and the keyboard
  • IconTile - An icon in a square tinted with its color
  • EmptyState - What an area shows when it has nothing: icon, title, sentence and actions
  • HeroBanner - Wide band in a strong color, readable from across the room
  • MultiProgress - Several progress bars stacked, for work with more than one part
  • ShimmerText - Text with a light passing over it, still when motion is reduced
  • DaySeparator - A line with a word in the middle that divides a list by day
  • ShortcutSheet - Dialog listing the keys of a screen, in groups
  • ShortcutHintBar - Line of key hints under what they act on

#Media

Pictures and custom drawing.

  • Filmstrip - A strip of thumbnails of any length, whose cells come from the app
  • PagedDocumentView - A bar with page and zoom over pages built only when they show
  • Icon - Vector icon from the built-in Lucide set
  • Image - Shows an image, with fit modes
  • Lottie - Plays Lottie animation files, drawn as curves on the GPU
  • Carousel - Slides with buttons, position dots and optional autoplay
  • Histogram - Overlapping channels from ready-made bins, linear or logarithmic, with clip marks
  • Ruler - Horizontal or vertical ruler in your units, with a round step for any zoom
  • ColorWheel - Hue and saturation on a disc, by a drag or the arrow keys
  • CurveEditor - Points you drag over a smooth curve, with an optional histogram behind
  • ZoomControl - Fit, 1:1, the percentage and buttons that zoom in and out
  • ZoomPanView - Zoom and pan with pinch, wheel, drag, keys and inertia, within limits
  • Minimap - Small copy of the content with a draggable rectangle around what is in view
  • RuleOfThirdsGrid - Composition lines over a picture: thirds, divisions, squares or the golden ratio
  • RubberBand - A rectangle drawn with a drag, in the units of the content, selected on release
  • Marquee - Marching ants around a rectangle, a path or loose segments
  • TransformHandles - Eight handles, a turn and a pivot over a box, returning its geometry
  • Protractor - A band of ticks along an arc that sets an angle
  • CropOverlay - A crop with a veil, proportion and angle, returning the rectangle and the angle
  • Eyedropper - An armed button that takes the color of the point clicked, supplied by the caller
  • CompareView - Two pictures side by side or across a divider you drag
  • ImageLightbox - A picture over the whole app, with zoom, arrows, Esc, caption and counter
  • Canvas - Box that draws whatever its closure appends to the scene