Modern UI components for Ruby on Rails, powered by TailwindCSS and Stimulus
Maquina Components provides a collection of ready-to-use UI components for Ruby on Rails applications. Built with ERB, TailwindCSS 4.0, and Stimulus, it offers a modern and maintainable approach to building beautiful user interfaces without the complexity of JavaScript frameworks.
- 🎨 Pre-built UI components based on shadcn/ui design system
- ⚡️ Powered by TailwindCSS 4.0
- 🧩 Seamless Rails integration with ERB partials
- 📱 Fully responsive components
- 🎯 Interactive behaviors with Stimulus controllers
- 🌙 Dark mode support out of the box
- ♿️ Accessibility-first components
Add this line to your application's Gemfile:
gem 'maquina-components'Then execute:
bundle install- Install TailwindCSS 4.0 in your Rails application
- Add the required Stimulus controllers to your application
- Use Shadcn/UI standard color variables:
/* app/assets/stylesheets/application.css */
@theme {
/* Default background color of <body />...etc */
--color-background: var(--background);
--color-foreground: var(--foreground);
/* Primary colors for Button */
--color-primary: var(--primary-color);
--color-primary-foreground: var(--primary-foreground-color);
/* Muted colors */
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
/* Secondary colors */
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
/* Accent colors */
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
/* Destructive colors */
--color-destructive: var(--destructive);
--color-destructive-foreground: var(--destructive-foreground);
/* Default input color */
--color-input: var(--input);
/* Default border color */
--color-border: var(--border);
/* Default ring color */
--color-ring: var(--ring);
--color-ring-destructive: var(--destructive);
/* Background color for Card */
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
/* Sidebar colors */
--color-sidebar: var(--sidebar-background);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-ring: var(--sidebar-ring);
--color-sidebar-border: var(--sidebar-border);
}<%# app/views/layouts/application.html.erb %>
<body class="bg-background text-primary font-display antialiased">
<div class="flex min-h-screen">
<%= render "components/sidebar" do %>
<%= render "components/sidebar_header" do %>
<%= render "shared/ui/menu_button",
title: "My App",
subtitle: "Dashboard",
text_icon: "MA" %>
<% end %>
<%= render "components/sidebar_content" do %>
<!-- Sidebar content here -->
<% end %>
<% end %>
<main class="flex-1 pl-(--sidebar-width)">
<%= yield %>
</main>
</div>
</body><%= render "components/card" do %>
<%= render "components/card_header",
title: "Account Balance",
icon: :dollar %>
<%= render "components/card_content" do %>
<p class="text-2xl font-bold">
<%= number_to_currency(@balance) %>
</p>
<p class="text-xs text-muted-foreground">
Current balance
</p>
<% end %>
<% end %><%= link_to new_transaction_path, class: "button-primary" do %>
New Transaction
<%= icon_for(:money) %>
<% end %>Work in progress...
- Layout
- Sidebar
- Card
- Navigation
- Menu Button
- Navigation Menu
- Elements
- Button
- Alert
- Badge
- Forms
- Input
- Select
- Checkbox
- Radio
Customize the look and feel of your components by modifying the theme variables:
@theme {
/* Colors */
--color-primary: oklch(21.34% 0 0);
--color-primary-foreground: oklch(98.48% 0 0);
/* Typography */
--font-display: "Inter var", "sans-serif";
/* Spacing */
--sidebar-width: 16rem;
/* ... other customizations ... */
}Bug reports and pull requests are welcome on GitHub at https://github.com/maquina-app/maquina_components.
The gem is available as open source under the terms of the MIT License.
- Design system inspired by shadcn/ui
- Built with TailwindCSS
- Powered by Ruby on Rails