Components

Interactive showcase of PhxShadcn components. T2 components have dedicated pages with all 3 state modes. T1 components are collected on the Kitchen Sink page.

Forms Guide

End-to-end form integration with Ecto changesets, validation, form primitives, and interactive components (Checkbox, Switch, Toggle, ToggleGroup, Slider) with hidden inputs.

JS Events Guide

Explore the consistent JS event API shared by all interactive components. Control components from vanilla JS, wire them together, or command them from the server.

Accordion T2

Vertically stacked set of interactive headings that reveal content.

Collapsible T2

An interactive component that expands/collapses a panel.

Toggle T2

A two-state button that can be toggled on or off.

ToggleGroup T2

A set of toggle buttons supporting single or multiple selection.

RadioGroup T2

A set of radio buttons with keyboard navigation and single selection.

Switch T2

A control that allows the user to toggle between checked and unchecked.

Progress T2

Displays an indicator showing the completion progress of a task.

ScrollArea T2

Augments native scroll with custom, styled scrollbar overlays.

Slider T2

A draggable range input for selecting a numeric value.

Tabs T2

A set of layered sections of content displayed one at a time.

AlertDialog T3

A forced-choice modal that requires an explicit user action. No backdrop dismiss.

Dialog T3

A modal dialog that interrupts the user with important content and expects a response.

Sheet T3

A panel that slides in from an edge. Unifies Sheet + Drawer with native <dialog>.

Popover T3

A floating panel anchored to a trigger with Floating UI positioning.

Tooltip T3

A popup that displays information on hover or focus using Floating UI.

HoverCard T3

A card that appears on hover with rich content. Like Tooltip's trigger with Popover's visual style.

ContextMenu T4

A right-click triggered floating menu with cursor-anchored positioning and full keyboard navigation.

DropdownMenu T4

A click-triggered floating menu with keyboard navigation, typeahead, and checkbox/radio items.

Menubar T4

A horizontal menu bar with multi-menu coordination, hover-to-switch, and cross-menu keyboard navigation.

Alert T1

Displays a callout for important messages.

AspectRatio T1

Displays content within a desired ratio.

Avatar T1

An image element with a fallback for representing the user.

Badge T1

Displays a badge or a component that looks like a badge.

Breadcrumb T1

Displays a breadcrumb navigation trail.

Checkbox T1

A native checkbox with CSS-only styling. No JS hook needed.

Button T1

Displays a button or a component that looks like a button.

Card T1

Displays a card with header, content, and footer.

Input T1

Displays a form input field.

Label T1

Renders an accessible label associated with controls.

Pagination T1

Navigation for paged content.

Separator T1

Visually or semantically separates content.

Skeleton T1

Used to show a placeholder while content is loading.

Table T1

A responsive table component.

Textarea T1

Displays a multi-line text input.