Styles

A style swaps the Tailwind class strings each component returns. Themes change colors via CSS tokens; styles change structure — border thickness, corner radius, shadow offset, typography.

Declaring a style

Put override classes under Shadcnrb::Styles::<Name> — one per component, named after the component module. Each overrides whichever methods on the parent Style class it wants to change.

# app/components/shadcnrb/styles/brutalist.rb
module Shadcnrb::Styles::Brutalist
  class Button < Shadcnrb::Button::Style
    def base
      "inline-flex items-center justify-center rounded-none border-2 border-black " \
        "font-bold uppercase tracking-wide shadow-[4px_4px_0_0_#000]"
    end
  end
end

Applying a style

Shadcnrb::Style.apply(:brutalist)   # flip the look
Shadcnrb::Style.reset               # back to defaults

apply resets first, then finds each override class by name and assigns a new instance to the matching component. No apply! boilerplate, no COMPONENTS hash — just the class definitions.

Per-request application

Styles are server-side global state. Apply the active one in a before_action so each request renders with the right classes:

class ApplicationController < ActionController::Base
  before_action :apply_shadcnrb_style

  private

  def apply_shadcnrb_style
    Shadcnrb::Style.apply(cookies[:shadcnrb_style])
  end
end

Reference implementation

This example app ships Shadcnrb::Styles::Neobrutalism covering every visual component. Pick Neobrutalism in the style switcher at the top of the page to see it live, or read the full source at app/components/shadcnrb/styles/neobrutalism.rb.

Pair with a user-facing picker — see StyleSwitcherHelper and StyleSwitcherController in this repo.