Installation
Important
Shadcn Phlexcomponents currently works with Tailwind v4.
For components requiring JavaScript, only esbuild and Vite are supported.
1. Add gems
bundle add shadcn_phlexcomponents phlex-rails tailwindcss-rails \tailwind_merge lucide-rails class_variants
2. Run the Tailwind install task (if you haven't)
./bin/rails tailwindcss:install
See https://github.com/rails/tailwindcss-rails for more information.
3. Run the Shadcn Phlexcomponents install task
Warning
Please commit or stash your working directory before running the command below as it'll generate a lot of files.
./bin/rails shadcn_phlexcomponents:install
The above command will:
- Copy all Phlex component files to
vendor/shadcn_phlexcomponents/components - Copy all Stimulus controller files (either TypeScript or JavaScript) to
vendor/shadcn_phlexcomponents/javascript - Copy all CSS files to
vendor/shadcn_phlexcomponents/stylesheets -
Copy an initializer file to
config/initializers/shadcn_phlexcomponents.rb
4. Import shadcn_phlexcomponents.css
@import '../../../vendor/shadcn_phlexcomponents/stylesheets/shadcn_phlexcomponents.css';
Copy the snippet above and paste it after the @import "tailwindcss"; line in app/assets/tailwind/application.css.
The theme above uses the default shadcn theme (with white/black as the primary color).
To change the theme, see Theming.
5. Install Stimulus controllers
Start by selecting the JS approach. Then follow the instructions to complete the setup.