Design system

HEEx + React components derived from Tailwind UI v4. Grouped by source pack — pick a component on the left or below.

Application UI

Shells

Multi column

Demo · LiveView · React

Sidebar shell

Demo · LiveView · React

Stacked shell

Demo · LiveView · React

Elements

Avatars

Demo · LiveView · React

Badges

Demo · LiveView · React

Button groups

Demo · LiveView · React

Buttons

Demo · LiveView · React

Dropdowns

Demo · LiveView · React

Forms

Action panels

Demo · LiveView · React

Comboboxes

Demo · LiveView · React

Form inputs

Demo · LiveView · React

Form layouts

Demo · LiveView · React

Input groups

Demo · LiveView · React

Radio groups

Demo · LiveView · React

Sign in forms

Demo · LiveView · React

Feedback

Alerts

Demo · LiveView · React

Empty states

Demo · LiveView · React

Notifications

Demo · LiveView · React

Layout

Cards

Demo · LiveView · React

Containers

Demo · LiveView · React

Dividers

Demo · LiveView · React

List containers

Demo · LiveView · React

Media objects

Demo · LiveView · React

Lists

Feeds

Demo · LiveView · React

Grid lists

Demo · LiveView · React

Stacked lists

Demo · LiveView · React

Tables

Demo · LiveView · React

Headings

Card headings

Demo · LiveView · React

Page headings

Demo · LiveView · React

Section headings

Demo · LiveView · React

Navigation

Breadcrumbs

Demo · LiveView · React

Command palettes (HEEx)

Demo · LiveView · React

Command palettes (React)

Demo · LiveView · React

Navbars

Demo · LiveView · React

Pagination

Demo · LiveView · React

Progress bars

Demo · LiveView · React

Sidebar navigation

Demo · LiveView · React

Tabs

Demo · LiveView · React

Vertical navigation

Demo · LiveView · React

Overlays

Drawers

Demo · LiveView · React

Modals

Demo · LiveView · React

Data display

Calendars

Demo · LiveView · React

Description lists

Demo · LiveView · React

Stats

Demo · LiveView · React

Marketing

Sections

Bento grids

Demo · LiveView · React

Blog sections

Demo · LiveView · React

Contact sections

Demo · LiveView · React

Content sections

Demo · LiveView · React

CTA sections

Demo · LiveView · React

FAQ sections

Demo · LiveView · React

Feature sections

Demo · LiveView · React

Footers

Demo · LiveView · React

Header (section)

Demo · LiveView · React

Heroes

Demo · LiveView · React

Logo clouds

Demo · LiveView · React

Newsletter sections

Demo · LiveView · React

Pricing

Demo · LiveView · React

Stats sections

Demo · LiveView · React

Team sections

Demo · LiveView · React

Testimonials

Demo · LiveView · React

Elements

Banners

Demo · LiveView · React

Flyout menus

Demo · LiveView · React

Marketing headers

Demo · LiveView · React

Feedback

Error pages

Demo · LiveView · React

Ecommerce

Components

Category filters

Demo · LiveView · React

Category previews

Demo · LiveView · React

Checkout forms

Demo · LiveView · React

Incentives

Demo · LiveView · React

Order history

Demo · LiveView · React

Order summaries

Demo · LiveView · React

Product features

Demo · LiveView · React

Product lists

Demo · LiveView · React

Product overviews

Demo · LiveView · React

Product quickviews

Demo · LiveView · React

Promo sections

Demo · LiveView · React

Reviews

Demo · LiveView · React

Shopping carts

Demo · LiveView · React

Store navigation

Demo · LiveView · React

Conventions

  • HEEx modules live under lib/goodbones_web/components/ui/; alias the module at the call site.
  • React components live under assets/js/ui/; import from the barrel assets/js/ui/index.mjs.
  • Status of every source category is tracked in lib/goodbones_web/components/ui/PROGRESS.md.
  • Agent-facing usage + add-a-component checklist live in the Design system section of CLAUDE.md.
  • Interactive HTML uses @tailwindplus/elements — that library is not shipped; translate behavior to Phoenix.LiveView.JS and @headlessui/react.