Components

Beautifully designed components built with Tailwind CSS. Available in ERB, Phlex, and ViewComponent.

Accordion

Accordion container component (Phlex) Wraps collapsible accordion items with Stimulus controller

Alert

Alert - Phlex implementation

Alert Dialog

AlertDialog - Phlex implementation

Aspect Ratio

AspectRatio - Phlex implementation

Avatar

Avatar - Phlex implementation

Badge

Badge - Phlex implementation

Breadcrumb

Breadcrumb - Phlex implementation

Button

Button - Phlex implementation

Button Group

A container that groups related buttons together with consistent styling and shared borders.

Calendar

Calendar component (Phlex) A date picker calendar with support for single, range, and multiple selection

Card

A container component for displaying content in a structured, visually distinct box with optional header, footer, and actions.

Carousel

Checkbox

Collapsible

Combobox

Wrapper - Phlex implementation

Command

Context Menu

ContextMenu - Phlex implementation

Dialog

Drawer

Dropdown Menu

DropdownMenu - Phlex implementation

Empty

Displays empty states in applications with customizable media, titles, descriptions, and actions.

Field

Field - Phlex implementation

Hover Card

HoverCard - Phlex implementation

Input

Input Group

Textarea - Phlex implementation

Input Group Addon

Addon - Phlex implementation

Input Group Button

Button - Phlex implementation

Input OTP

InputOtp - Phlex implementation

Input OTP Slot

Slot - Phlex implementation

Item

Kbd

Kbd - Phlex implementation

Label

Label - Phlex implementation

Menubar

Menubar - Phlex implementation

Menubar Menu

Menu - Phlex implementation

Navigation Menu

NavigationMenu - Phlex implementation

Pagination

Pagination component (Phlex) Container for pagination navigation

Popover

Popover - Phlex implementation

Progress

Progress - Phlex implementation

Radio Button

Resizable

ResizablePanel component (Phlex) Individual resizable panel within a panel group

Scroll Area

ScrollArea - Phlex implementation

Select

Displays a list of options for the user to pick from, triggered by a button.

Separator

Separator - Phlex implementation

Sheet

Sidebar

Sidebar - Phlex implementation

Skeleton

Skeleton - Phlex implementation

Sonner

Sonner Toaster component (Phlex) Container for toast notifications - render once in your layout

Spinner

Spinner - Phlex implementation

Switch

Switch - Phlex implementation

Table

Tabs

Tabs container component (Phlex) Root component for tabbed interface with keyboard navigation

Textarea

Toggle

Toggle - Phlex implementation

Toggle Group

A set of two-state buttons that can be toggled on or off, supporting single or multiple selection.

Tooltip

Tooltip - Phlex implementation