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:installgem install hotwirebits_cli
hotwirebits init
hotwirebits add button card alertButton, 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.
| Suite | Tests | Tool |
|---|---|---|
| Components & Helpers | 670 tests, 1477 assertions | Minitest |
| Stimulus Controllers | 156 tests | Vitest + jsdom |
| Generators | 11 tests | Minitest |
bundle exec rake test # Ruby tests
npm test # JavaScript tests
bundle exec standardrb # LintSee CONTRIBUTING.md for detailed guidelines.
- Fork it
- Create your feature branch (
git checkout -b feature/amazing) - Commit your changes (
git commit -am 'feat: add amazing component') - Push to the branch (
git push origin feature/amazing) - Create a Pull Request