shadcn/phlexcomponents

Esbuild

1. Install JavaScript dependencies 

yarn add @floating-ui/dom @hotwired/stimulus @hotwired/turbo-rails dayjs \

  dompurify fuse.js hotkeys-js inputmask nouislider stimulus-use vanilla-calendar-pro

2. Initialize components 

import * as shadcnPhlexcomponentsControllers from '../../../vendor/shadcn_phlexcomponents/javascript/shadcn_phlexcomponents'



// Make sure this is after const application = Application.start()

Object.keys(shadcnPhlexcomponentsControllers).forEach((controllerName) => {

  const controller = shadcnPhlexcomponentsControllers[controllerName]

  application.register(controller.name, controller)

})

Copy the JavaScript snippet above and paste it in your Stimulus application entrypoint file. The entrypoint file should be in app/javascript/controllers/application.js if you're using the -j esbuild flag when running the rails new command.

Your Stimulus application entrypoint file should look similar to: 

import { Application } from '@hotwired/stimulus'

import * as shadcnPhlexcomponentsControllers from '../../../vendor/shadcn_phlexcomponents/javascript/shadcn_phlexcomponents'



const application = Application.start()



Object.keys(shadcnPhlexcomponentsControllers).forEach((controllerName) => {

  const controller = shadcnPhlexcomponentsControllers[controllerName]

  application.register(controller.name, controller)

})



// Configure Stimulus development experience

application.debug = false

window.Stimulus = application



export { application }

3. Initialize specific components 

import { AccordionController, DialogController } from '../../../vendor/shadcn_phlexcomponents/javascript/shadcn_phlexcomponents'



// Make sure this is after const application = Application.start()

application.register(AccordionController.name, AccordionController)

application.register(DialogController.name, DialogController)