Snazzy 🎩✨

Make your Rails app Snazzy!

Because life's too short for boring UI components. Snazzy brings the pizzazz your ViewComponents have been craving. It's like a fashion makeover for your Rails app, but with less reality TV drama and more actual functionality.

What's in the box? 📦

Snazzy is a collection of reusable UI components built with the holy trinity of modern Rails:

  • 🎨 ViewComponent - Because global partials are so 2010
  • 💅 TailwindCSS - Making things pretty without the CSS therapy sessions
  • ⚡ Hotwired - JavaScript that sparks joy (and actually works)
  • 🏃‍♂️ Slim Templates - Because life's too short for closing tags

Components Gallery 🎪

Available Components

🏷️ BadgeComponent

Little badges of honor for your UI. Perfect for status indicators, counts, or just making things look official.

= render Snazzy::BadgeComponent.new("New", color: "green", size: "small")

💊 PillComponent

Like badges, but rounder. Because sometimes you need that smooth, pharmaceutical aesthetic.

= render Snazzy::PillComponent.new("42 users", color: "blue", hoverable: true)

💬 TooltipComponent

Hover hints that actually work. No more cryptic UI elements!

= render Snazzy::TooltipComponent.new("I'm helpful text!") do
  = link_to "Hover me!", "#"

📋 CopyButtonComponent

One-click copying that gives users that satisfying "Copied!" feedback.

= render Snazzy::CopyButtonComponent.new("secret-api-key", label: "Copy API Key")

🏷️ TagCloudComponent & ArrayInputComponent

For when you need tags that users can add and remove. Includes built-in validations!

= render Snazzy::ArrayInputComponent.new(tag_labels: ["ruby", "rails", "snazzy"])

Installation 🚀

Add this line to your application's Gemfile:

gem 'snazzy_ui'
# or if you're living on the edge with a local copy:
# gem 'snazzy_ui', path: '../snazzy_ui'

Then execute:

$ bundle install
$ bin/rails snazzy:install

The install task will:

  1. Copy all the Stimulus controllers to app/javascript/controllers/snazzy/
  2. Add the import to your app/javascript/controllers/index.js
  3. Make your app instantly more snazzy ✨

JavaScript Dependencies 📦

Some components need a little extra JavaScript love:

For TooltipComponent - Add Popper.js for positioning magic:

$ yarn add @popperjs/core
# or
$ npm install @popperjs/core

Usage 🎯

Basic Usage

After installation, all components are available under the Snazzy:: namespace:

<!-- In your views -->
<%= render Snazzy::BadgeComponent.new("Beta", color: "yellow") %>
<%= render Snazzy::PillComponent.new("5 items", color: "green", size: "large") %>

<!-- With blocks -->
<%= render Snazzy::TooltipComponent.new("This button deletes everything!") do %>
  <button class="btn-danger">Don't Click Me</button>
<% end %>

Stimulus Controllers

All Stimulus controllers are namespaced with snazzy-- to avoid conflicts:

<div data-controller="snazzy--tooltip">
  <button data-action="mouseover->snazzy--tooltip#show">
    Hover for tooltip
  </button>
</div>

Styling

Components use TailwindCSS classes. Make sure your TailwindCSS configuration includes the snazzy gem's view paths:

// tailwind.config.js
module.exports = {
  content: [
    // ... your other paths
    './node_modules/snazzy/app/components/**/*.{erb,html,slim}',
  ],
  // ... rest of config
}

Component Options 🎛️

BadgeComponent & PillComponent

  • text (required) - The content to display
  • color - Color variant (e.g., "red", "green", "blue")
  • size - Size variant ("small", "medium", "large")
  • hoverable - Boolean for hover effects
  • iff - Conditional rendering (defaults to true)

TooltipComponent

  • text (required) - The tooltip content
  • Uses Popper.js for smart positioning

CopyButtonComponent

  • copyable (required) - The text to copy
  • label - Button text (default: "Copy")
  • tooltip - Optional tooltip text
  • icon - Icon path (default: "icons/clipboard.svg")
  • css_classes - Additional CSS classes

Development 🛠️

After checking out the repo:

$ bin/setup           # Install dependencies
$ bundle exec rspec   # Run the tests
$ bin/console         # Interactive prompt for experimentation

To install this gem onto your local machine:

$ bundle exec rake install

Contributing 🤝

Found a bug? Want to add a sparkly new component? Pull requests are welcome!

  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Make it snazzy
  4. Commit your changes (git commit -am 'Add some snazziness')
  5. Push to the branch (git push origin my-new-feature)
  6. Create a new Pull Request

Why "Snazzy"? 🤔

Because naming things is hard, and "AnotherUIComponentGem" was taken. Plus, who doesn't want their app to be snazzy? It's fun to say, easy to type, and makes your README 23% more entertaining.

License 📄

MIT License © 2024-Present Dan Brown

In other words: Use it, love it, make it even more snazzy. Just don't blame us if your app becomes too stylish for its own good.

Remember: A snazzy app is a happy app! ✨