Shadix #
A set of beautiful and customizable components for Phoenix LiveView. It's shadcn/ui but for Phoenix: start here, then make it your own. See examples on our docs site.
When you install a component from shadix, it gets copied into your own codebase where you can freely edit it -- styled with Tailwind v4.
Warning
This project is still in early development and does not have a stable API. See readiness and follow-ups for coverage and remaining release gates.
The tested baseline requires Phoenix LiveView 1.2.9+, Phoenix 1.8.9+, and Tailwind CSS 4.2.3+. See consumer compatibility checks.
Usage #
# One-time setup
mix shadix.init
# The installed Tailwind theme imports this animation utility.
npm --prefix assets install tw-animate-css
# Copy a component (and its dependencies) into your app
# (module 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.
mix shadix.init prints the Tailwind imports required by the copied theme and
colocated component CSS. Interactive components may also print hook-registration
and npm-dependency instructions when you add them.