🧱 HotwireBits

The most comprehensive free UI component library for Ruby on Rails.

HotwireBits is a free, open-source UI component library for Ruby on Rails with 240+ components and 99 Stimulus controllers. Each component ships in two formats:

• ERB partials — Copy-paste friendly, no magic
• ViewComponent classes — Ruby-first, testable, composable

All styled with Tailwind CSS v4, interactive via Stimulus.js, and fully Turbo-compatible including Turbo Native.

# Gemfile
gem "hotwirebits"

bundle install
rails generate hotwirebits:install

gem install hotwirebits_cli
hotwirebits init
hotwirebits add button card alert

Button, Badge, Chip, Tag, Avatar, Status, Indicator, Label, Separator, Skeleton, Spinner, Typography, Kbd, Icon, CloseButton, Toggle, ThemeIcon, Progress, ProgressRing

Input, Password, Number, Search, Phone, Textarea, JsonInput, Checkbox, Radio, Switch, Toggle, Select, NativeSelect, Combobox, MultiSelect, Slider, Rating, DatePicker, InputOTP, InputTags, FileInput, ColorPicker

Card, Table, DataTable, Stats, Stat, Timeline, TreeView, List, Image, CodeBlock, NumberFormatter, Diff, Highlight, Mark, Accordion, Collapsible, Spoiler, MeterGroup, ColorSwatch, FormGroup

Navbar, Sidebar, Breadcrumb, Pagination, Tabs, Menu, Dropdown, NavigationMenu, Menubar, DockMenu, Steps, NavLink, Footer, Burger, SpeedDial

Dialog, AlertDialog, Sheet, Drawer, Popover, Tooltip, HoverCard, Toast, Notification, LoadingOverlay

Alert, EmptyState, Banner, SkeletonCard, Feedback, Swap, Countdown, AnimatedNumber, StatusDot, ThemeController

Container, Grid, Flex, Stack, Group, AspectRatio, ScrollArea, Resizable, Box, Center, SimpleGrid, Space, Divider, Join, Mask, BentoGrid, DeviceMockup, AppShell, Splitter, Fluid

Carousel, Calendar, Chart, ChatBubble, Testimonial, KanbanBoard, Search, Clipboard, QRCode, Marquee

Hero, FeatureSection, CTASection, PricingSection, FAQSection, TestimonialsSection, LogoCloud, AuthBlock, ErrorPage, CookieConsent

<%= render HotwireBits::ButtonComponent.new(label: "Click me", variant: :primary) %>

<%= render HotwireBits::CardComponent.new(title: "Welcome", description: "Get started") do %>
  <p>Your content here</p>
<% end %>

<%= render HotwireBits::AlertComponent.new(type: :success, title: "Success!", message: "Changes saved.") %>

<%= render HotwireBits::DialogComponent.new(title: "Confirm", size: :md) do %>
  <p>Are you sure?</p>
  <div class="flex gap-2 justify-end">
    <%= render HotwireBits::ButtonComponent.new(label: "Cancel", variant: :outline) %>
    <%= render HotwireBits::ButtonComponent.new(label: "Confirm", variant: :primary) %>
  </div>
<% end %>

HotwireBits uses CSS custom properties (shadcn-style) for theming:

/* Import the theme */
@import "hotwirebits/theme";

/* Or customize variables */
:root {
  --color-hw-primary: hsl(263 70% 58%);
  --color-hw-primary-foreground: hsl(0 0% 100%);
}

99 Stimulus controllers for interactive components:

hw-accordion  hw-alert      hw-banner     hw-burger
hw-calendar   hw-carousel   hw-clipboard  hw-collapsible
hw-combobox   hw-cookie     hw-countdown  hw-datepicker
hw-dialog     hw-drawer     hw-dropdown   hw-feedback
hw-highlight  hw-kanban     hw-marquee    hw-menubar
hw-multiselect hw-otp       hw-password   hw-popover
hw-rating     hw-resizable  hw-search     hw-sheet
hw-sidebar    hw-speed-dial hw-spoiler    hw-steps
hw-swap       hw-switch     hw-tabs       hw-tags
hw-theme      hw-toast      hw-toggle     hw-tree

MIT License — free for personal and commercial use.

bundle exec rake test   # Ruby tests
npm test                # JavaScript tests
bundle exec standardrb  # Lint

See CONTRIBUTING.md for detailed guidelines.

1. Fork it
2. Create your feature branch (git checkout -b feature/amazing)
3. Commit your changes (git commit -am 'feat: add amazing component')
4. Push to the branch (git push origin feature/amazing)
5. Create a Pull Request