shadcn/phlexcomponents

Vite

After installing and running the Vite install task, you can follow one of the installation steps below, depending on whether you are using JavaScript or TypeScript.

JavaScript Installation

1. Install 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. Add alias

In vite.config.mjs, add the following alias: 

alias: {

  '@shadcn_phlexcomponents': path.resolve(

    __dirname,

    'vendor/shadcn_phlexcomponents/javascript',

  ),

}

Your vite.config.mjs should look something like this: 

import { defineConfig } from 'vite'

import ViteRails from 'vite-plugin-rails'

import path from 'path'



export default defineConfig({

  plugins: [ViteRails()],

  resolve: {

    alias: {

      '@shadcn_phlexcomponents': path.resolve(

        __dirname,

        'vendor/shadcn_phlexcomponents/javascript',

      ),

    },

  },

})

3. Initialize components 

import * as shadcnPhlexcomponentsControllers from '@shadcn_phlexcomponents/shadcn_phlexcomponents'

    

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

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

  const controller =

    shadcnPhlexcomponentsControllers[

      controllerName as keyof typeof shadcnPhlexcomponentsControllers

    ]

  application.register(controller.name, controller)

})

Your app/javascript/entrypoints/application.js should look something like this: 

import '@hotwired/turbo-rails'

import { Application } from '@hotwired/stimulus'

import * as shadcnPhlexcomponentsControllers from '@shadcn_phlexcomponents/shadcn_phlexcomponents'



const application = Application.start()



// Configure Stimulus development experience

application.debug = false

window.Stimulus = application



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

  const controller =

    shadcnPhlexcomponentsControllers[

      controllerName as keyof typeof shadcnPhlexcomponentsControllers

    ]

  application.register(controller.name, controller)

})

4. Initialize specific components 

import { AccordionController, DialogController } from '@shadcn_phlexcomponents/shadcn_phlexcomponents'

    

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

application.register(AccordionController.name, AccordionController)

application.register(DialogController.name, DialogController)

TypeScript Installation

1. Install dependencies 

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

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

yarn add @types/inputmask -D

2. Add alias

In vite.config.mts, add the following alias: 

alias: {

  '@shadcn_phlexcomponents': path.resolve(

    __dirname,

    'vendor/shadcn_phlexcomponents/javascript',

  ),

}

Your vite.config.mts should look something like this: 

import { defineConfig } from 'vite'

import ViteRails from 'vite-plugin-rails'

import path from 'path'



export default defineConfig({

  plugins: [ViteRails()],

  resolve: {

    alias: {

      '@shadcn_phlexcomponents': path.resolve(

        __dirname,

        'vendor/shadcn_phlexcomponents/javascript',

      ),

    },

  },

})

3. Add path

In tsconfig.json, add the following path: 

"paths": {

  "@shadcn_phlexcomponents/*": ["../../vendor/shadcn_phlexcomponents/javascript/*"]

}

Your tsconfig.json should look something like this: 

{

  "compilerOptions": {

    "noImplicitAny": true,

    "strict": true,

    "noImplicitReturns": true,

    "esModuleInterop": true,

    "target": "esnext",

    "module": "esnext",

    "moduleResolution": "node",

    "types": ["vite/client"],

    "baseUrl": "app/javascript",

    "paths": {

      "@shadcn_phlexcomponents/*": ["../../vendor/shadcn_phlexcomponents/javascript/*"]

    }

  }

}

4. Initialize components 

import * as shadcnPhlexcomponentsControllers from '@shadcn_phlexcomponents/shadcn_phlexcomponents'

    

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

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

  const controller =

    shadcnPhlexcomponentsControllers[

      controllerName as keyof typeof shadcnPhlexcomponentsControllers

    ]

  application.register(controller.name, controller)

})

Your app/javascript/entrypoints/application.ts should look something like this: 

import '@hotwired/turbo-rails'

import { Application } from '@hotwired/stimulus'

import * as shadcnPhlexcomponentsControllers from '@shadcn_phlexcomponents/shadcn_phlexcomponents'



declare global {

  interface Window {

    Stimulus: Application

  }

}

const application = Application.start()



// Configure Stimulus development experience

application.debug = false

window.Stimulus = application



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

  const controller =

    shadcnPhlexcomponentsControllers[

      controllerName as keyof typeof shadcnPhlexcomponentsControllers

    ]

  application.register(controller.name, controller)

})

5. Initialize specific components 

import { AccordionController, DialogController } from '@shadcn_phlexcomponents/shadcn_phlexcomponents'

    

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

application.register(AccordionController.name, AccordionController)

application.register(DialogController.name, DialogController)