shadcn/phlexcomponents

Configuring

As running the upgrade task will cause the files in your vendor/shadcn_phlexcomponents folder to be overwritten, you can customize component classes so that it will persist between upgrades by configuring them in config/initializers/shadcn_phlexcomponents.rb.

For example, to configure the Alert component, you define the styles in config/initializers/shadcn_phlexcomponents.rb. 

ShadcnPhlexcomponents.configure do |config|

  config.alert = {

    root: {

      base: <<~HEREDOC,

        relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr]

        grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5

        [&>svg]:text-current

      HEREDOC

      variants: {

        variant: {

          default: "bg-card text-card-foreground",

          destructive: "text-destructive bg-card [&>svg]:text-current *:data-[shadcn-phlexcomponents=alert-description]:text-destructive/90"

        }

      },

      defaults: {

        variant: :default

      }

    },

    title: {

      base: "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight"

    },

    description: {

      base: "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed"

    }

  }

end

You can inspect the components individually in the vendor/shadcn_phlexcomponents/components folder to have an idea of their structure.