Overriding a component

After install you own every file under app/components/shadcnrb/. Edit freely — this is the shadcn philosophy. For one-off tweaks, reach for a style class override; for a site-wide alternate look, build a named style.

Adding a variant

Each component's Style class returns its variant lookup table. Add a key and it's available via variant::

# app/components/shadcnrb/button/style.rb
module Shadcnrb
  module Button
    class Style
      def variants
        {
          default:         "bg-primary text-primary-foreground ...",
          destructive:     "bg-destructive text-destructive-foreground ...",
          outline:         "border border-input bg-background ...",
          outline_primary: "border border-primary text-primary hover:bg-primary/10",
          ghost:           "hover:bg-accent hover:text-accent-foreground"
        }
      end
    end
  end
end

<%= sui.button "Brand action", variant: :outline_primary %>

Rewriting the markup

For anything beyond class strings — a different element tree, new attributes, extra slots — edit component.rb directly. The file is yours; the gem only re-copies it on shadcnrb:install --force.

When to use a style instead

An ad-hoc variant or copy tweak stays in the component's own Style class. When you want a whole alternate look — rounded-none + thick borders + shadow offsets — reach for a named style module so it's toggleable and lives alongside the default.