RapidRailsUI

Configuration

Complete reference for customizing RapidRails UI defaults, colors, sizes, and behavior.

Initializer Setup

The RapidRails UI installer creates an initializer file at config/initializers/rapid_rails_ui.rb. This is where you configure global defaults for your application.

Basic Structure


RapidRailsUI.configure do |config|
  # Component defaults
  config.button_color = :primary
  config.button_size = :md
  config.button_variant = :solid

  # Icon defaults
  config.icon_size = :md

  # Custom colors (optional)
  # config.colors = { ... }

  # Custom sizes (optional)
  # config.sizes = { ... }
end

Note: The initializer is optional. RapidRails UI works perfectly with sensible defaults. Only create one if you need to customize global behavior.

Color System

RapidRails UI supports 22 Tailwind colors plus semantic color names.

Available Colors

You can use any of these colors with the color: option:

primary
danger
success
warning
neutral
slate
gray
zinc
stone
red
orange
amber
yellow
lime
green
emerald
teal
cyan
sky
blue
indigo
violet
purple
fuchsia
pink
rose

Customizing Semantic Colors

Override semantic colors to match your brand: 

RapidRailsUI.configure do |config|
  # Change 'primary' to purple instead of blue
  config.colors[:primary] = {
    base: "purple-600",
    hover: "purple-700",
    active: "purple-800",
    text: "white"
  }

  # Add a custom 'brand' color
  config.colors[:brand] = {
    base: "indigo-600",
    hover: "indigo-700",
    active: "indigo-800",
    text: "white"
  }
end

Dark Mode Color Overrides

Specify different colors for dark mode: 

RapidRailsUI.configure do |config|
  config.colors[:primary] = {
    base: "blue-600",
    hover: "blue-700",
    active: "blue-800",
    text: "white",
    dark: {
      base: "blue-500",      # Lighter in dark mode
      hover: "blue-600",
      active: "blue-700",
      text: "white"
    }
  }
end

Size System

RapidRails UI provides a consistent size scale across all components.

Default Size Options

All components support these size options:

xs Extra small
sm Small
md Medium (default)
lg Large
xl Extra large

Customizing Size Classes

Override size definitions for specific components: 

RapidRailsUI.configure do |config|
  # Customize button sizes
  config.sizes[:button] = {
    xs: "px-2 py-1 text-xs",
    sm: "px-3 py-1.5 text-sm",
    md: "px-4 py-2 text-base",
    lg: "px-5 py-2.5 text-lg",
    xl: "px-6 py-3 text-xl"
  }

  # Customize icon sizes
  config.sizes[:icon] = {
    xs: "w-3 h-3",
    sm: "w-4 h-4",
    md: "w-5 h-5",
    lg: "w-6 h-6",
    xl: "w-8 h-8"
  }
end

Component Defaults

Set default options for each component type.

Button Defaults

RapidRailsUI.configure do |config|
  # Default color for all buttons
  config.button_color = :blue

  # Default size for all buttons
  config.button_size = :md

  # Default variant for all buttons
  config.button_variant = :solid
  # Options: :solid, :outline, :ghost, :link
end

Social Button Defaults

RapidRailsUI.configure do |config|
  # Default size for social buttons
  config.social_button_size = :md

  # Default variant for social buttons
  config.social_button_variant = :solid
  # Options: :solid, :outline
end

Available Variants

Most components support these variants:

solid

Filled background with solid color (default)

outline

Transparent background with colored border

ghost

Transparent background, no border, shows background on hover

link

Text-only appearance with underline on hover

Icon Configuration

Configure default behavior for icons across your application.

Icon Defaults

RapidRailsUI.configure do |config|
  # Default icon size
  config.icon_size = :md

  # Default stroke width for all icons
  config.icon_stroke_width = 2

  # Whether to use solid fill for icons
  config.icon_fill = "none"
end

RapidRails UI includes 1500+ Lucide icons. Find all available icons at: lucide.dev/icons

Quick Reference

Complete configuration reference with all available options: 


RapidRailsUI.configure do |config|
  # === Button Configuration ===
  config.button_color = :primary      # Default: :primary
  config.button_size = :md             # Default: :md
  config.button_variant = :solid       # Default: :solid

  # === Social Button Configuration ===
  config.social_button_size = :md      # Default: :md
  config.social_button_variant = :solid # Default: :solid

  # === Icon Configuration ===
  config.icon_size = :md               # Default: :md
  config.icon_stroke_width = 2         # Default: 2
  config.icon_fill = "none"            # Default: "none"

  # === Custom Colors (Optional) ===
  config.colors = {
    primary: {
      base: "blue-600",
      hover: "blue-700",
      active: "blue-800",
      text: "white"
    },
    danger: {
      base: "red-600",
      hover: "red-700",
      active: "red-800",
      text: "white"
    },
    success: {
      base: "green-600",
      hover: "green-700",
      active: "green-800",
      text: "white"
    },
    warning: {
      base: "amber-500",
      hover: "amber-600",
      active: "amber-700",
      text: "white"
    },
    neutral: {
      base: "zinc-600",
      hover: "zinc-700",
      active: "zinc-800",
      text: "white"
    }
  }

  # === Custom Sizes (Optional) ===
  config.sizes = {
    button: {
      xs: "px-2 py-1 text-xs",
      sm: "px-3 py-1.5 text-sm",
      md: "px-4 py-2 text-base",
      lg: "px-5 py-2.5 text-lg",
      xl: "px-6 py-3 text-xl"
    },
    icon: {
      xs: "w-3 h-3",
      sm: "w-4 h-4",
      md: "w-5 h-5",
      lg: "w-6 h-6",
      xl: "w-8 h-8"
    }
  }
end

Remember: All configuration is optional. RapidRails UI ships with sensible defaults that work great out of the box. Only customize what you need!

Patterns Changelog