Shadix

shadcn-style, copy-paste UI components for Phoenix LiveView.

Shadix is a distribution model, not a runtime dependency: a Mix generator copies component source into your project, where you own and freely edit it — styled with Tailwind CSS v4, behavior built on Phoenix.LiveView.JS + TypeScript hooks.

Status: early development. The component foundation, 16 presentational components, and the generator (mix shadix.add / mix shadix.init) exist and are tested. The storybook preview harness and the JavaScript-driven interactive components are still in progress — see the checklist below.

Usage

# One-time: install the theme CSS + the cn helper, and print Tailwind wiring
mix shadix.init

# Copy a component (and its dependencies) into your app, with the module
# namespace rewritten to your app (defaults to <YourApp>Web.Components.UI):
mix shadix.add button
mix shadix.add card dialog        # multiple at once
mix shadix.add button --namespace MyAppWeb.UI --dir lib/my_app_web/ui

Files are copied into your project — you own and edit them. Re-running won't overwrite your edits unless you pass --force.

How it works

• Components are Phoenix.Component function components carrying stable data-slot attributes (mirroring shadcn) for styling/targeting.
• Class composition uses a tiny cn/1 helper; conflict resolution is delegated to Tailwind v4 cascade layers, so a caller's class always wins over a default (no tailwind-merge needed).
• Theme tokens (shadcn new-york-v4) live in priv/templates/theme.css.

Components

Foundation

• cn/1 class helper
• Theme tokens (CSS variables + cascade layers)

Presentational (no JavaScript)

• Button
• Input
• Label
• Textarea
• Card
• Badge
• Alert
• Separator
• Table
• Avatar
• Skeleton
• Aspect Ratio
• Breadcrumb
• Progress
• Pagination
• Kbd
• Empty / Placeholder

Form controls

• Checkbox
• Radio Group
• Switch
• Slider
• Toggle
• Toggle Group
• Input OTP
• Form helpers

Interactive (TypeScript hooks + Floating UI)

• Dialog
• Alert Dialog
• Sheet
• Drawer
• Popover
• Dropdown Menu
• Context Menu
• Menubar
• Navigation Menu
• Tooltip
• Hover Card
• Select
• Combobox
• Command
• Tabs
• Accordion
• Collapsible
• Scroll Area
• Resizable
• Carousel
• Sonner (toast)
• Data Table
• Sidebar

Chart is intentionally out of scope (no Recharts equivalent for LiveView; revisit separately if needed).

Development

This repo uses mise for the toolchain and hk for git hooks.

mise run setup        # install tools, fetch deps, wire git hooks
mix test              # run the test suite
mix tailwind storybook  # build the storybook CSS (first run: mix tailwind.install)
mix dev               # boot the storybook at http://localhost:4001

Components are developed as real modules under lib/shadix/components/; the same modules are what the generator copies (with namespace rewriting) into a host app. Tailwind classes are lifted verbatim from the vendored shadcn source. A phoenix_storybook dev harness (dev/, storybook/) previews every component.

License

MIT