Component Library
ShadCN components customized with OFS Design Kit tokens. Browse, preview, and track theming progress for each component.
Inputs
Interactive elements for user input
Button
Displays a button or a component that looks like a button.
Button Group
Groups multiple buttons together with consistent styling.
Icon Button
Animated icon button with particle burst and glow effects on activation.
Input
Displays a form input field or a component that looks like an input field.
Input Group
Combines input with prefix/suffix elements.
Input OTP
Accessible one-time password component with copy paste functionality.
Textarea
Displays a form textarea or a component that looks like a textarea.
Checkbox
A control that allows the user to toggle between checked and not checked.
Animated Checkbox
A Lottie-animated checkbox with smooth check/uncheck transitions.
Radio Group
A set of checkable buttons where only one can be checked at a time.
Rating
Display and collect star ratings with half-star precision and custom icons.
Select
Displays a list of options for the user to pick from.
Native Select
A native HTML select element with custom styling.
Combobox
Autocomplete input and command palette with a list of suggestions.
Switch
A control that allows the user to toggle between on and off.
Toggle
A two-state button that can be either on or off.
Toggle Group
A group of toggle buttons where one or multiple can be selected.
Theme Toggle
Animated theme switcher with View Transitions API for smooth light/dark mode.
Slider
An input where the user selects a value from within a given range.
Kbd
Displays keyboard key or shortcut.
Forms
Form controls and validation
Field
Wrapper for form inputs with label, description, and error message.
Label
Renders an accessible label associated with controls.
Form
Building forms with React Hook Form and Zod validation.
React Hook Form
Form integration with React Hook Form library.
TanStack Form
Form integration with TanStack Form library.
Date & Time
Date and time selection
Feedback
Status indicators and notifications
Alert
Displays a callout for user attention.
Progress
Displays an indicator showing the completion progress of a task.
Spinner
A loading spinner indicator.
Skeleton
Use to show a placeholder while content is loading.
Toast
A succinct message that is displayed temporarily.
Sonner
An opinionated toast component for React.
Overlays
Modal dialogs and floating panels
Dialog
A window overlaid on the primary window, rendering content.
Alert Dialog
A modal dialog that interrupts the user with important content.
Drawer
A panel that slides out from the edge of the screen.
Sheet
Extends the Dialog component to display content in a sheet.
Popover
Displays rich content in a portal, triggered by a button.
Tooltip
A popup that displays information related to an element.
Hover Card
For sighted users to preview content behind a link.
Navigation
Navigation patterns and menus
Breadcrumb
Displays the path to the current resource using a hierarchy.
Pagination
Pagination with page navigation, next and previous links.
Navigation Menu
A collection of links for navigating websites.
Menubar
A visually persistent menu common in desktop applications.
Tabs
A set of layered sections of content displayed one at a time.
Sidebar
A composable, themeable and customizable sidebar component.
Data Display
Components for displaying data
Card
Displays a card with header, content, and footer.
Accordion
A vertically stacked set of interactive headings.
Collapsible
An interactive component that expands/collapses a panel.
Table
A responsive table component.
Data Table
Powerful table with sorting, filtering and pagination.
Badge
Displays a badge or a component that looks like a badge.
Avatar
An image element with a fallback for representing the user.
Chart
Beautiful charts built using Recharts.
Typography
Styles for headings, paragraphs, lists and more.
Item
A versatile list item with media, content, and actions.
Menus
Contextual and dropdown menus
Layout
Layout utilities and containers
Separator
Visually or semantically separates content.
Aspect Ratio
Displays content within a desired ratio.
Scroll Area
Augments native scroll functionality for custom styling.
Resizable
Accessible resizable panel groups and layouts.
Carousel
A carousel with motion and swipe built using Embla.
Empty
Placeholder for empty states in layouts.
Pattern Overlay
Background patterns (dots, grid, lines, etc.) as overlays for any element.