Rails UI Components

The first professionally-designed UI components library for Ruby on Rails apps. More than 200 components used by 1,000+ developers globally.

Get Access Today View Components

Last week, 28 new developers got their copy of Rails Designer's UI Components.

Suspicious Login Attempt

We've prevented a login from an unrecognized source.

• Review Activity
• It's Me

Design •7:36

Want to hire a great Rails designer? Check out Rails Designers

Explore the benefits of starting a blog to showcase your design skills and attract potential clients.

• 134
• 98

• Built with ViewComponent

  ViewComponent keeps UI components manageable and maintainable.

• Designed with Tailwind CSS

  Tailwind CSS is the quickest, and most developer-friendly, way to built stunning UI for your Rails apps.

• Enhanced with Hotwire

  When needed, components are enhanced with sprinkles of JavaScript using the Hotwire trifecta.

Rails Designer's UI components, built with ViewComponent, designed with Tailwind CSS and enhanced with Hotwire, are reusable and extendable components for modern SaaS apps developed in Ruby on Rails. It's the first professionally-designed Rails UI components library featuring a 200+ selection of components with multiple variants, transforming weeks of effort into minutes.

• Elements

  Improve your app’s user interface with UI elements designed for clarity and concise information delivery.

  • Accordions
  • Avatars
  • Badges
  • Copy To Clipboard
  • Dropdowns
  • Hovercards
  • Tooltips

• Navigation

  Exploration of your Rails app should be a priority. Now easy as ever with these navigation components.

  • Breadcrumbs
  • Command Menu
  • Contextual Menus
  • Global Hotkeys
  • Navbars
  • Sidebar Navigation
  • Tabs

  • Paginations Planned

• Overlay

  Introduce layers of context and interaction with overlays, enriching your user’s journey by providing or getting information while keeping their context.

  • Modals
  • Notifications
  • Slide Overs

• Feedback

  Convey system statuses and user feedback with clarity.

  • Alerts
  • Empty States
  • Time Zone Updater

• Headings

  Structure your Rails app clearly, guiding users through content layers with visual markers that signify relevance and hierarchy without being overwhelming.

  • Card Headings
  • Page Headings
  • Section Headings

• Data Display

  Simplify your complex data through intuitive visual formats, enabling users to grasp significant insights quickly for informed actions.

  • Calendar
  • Stats

  • Description Lists Planned

• Form Elements

  Optimize your user’s input with advanced form elements, ensuring accuracy and thus, delighted emails in your support inbox.

  Also check out the Form Builder.

  • Buttons
  • Checkboxes
  • Confirm Field
  • Form Labels
  • Image Previews
  • Local Autosaves
  • Textarea Autogrow
  • Page Refresh Confirm

  • Autocomplete Planned

  • Color Pickers Planned

• Lists

  Streamline your heavy data- and content-sections, whether it’s for engaging chats, systematic content sections, or vibrant feeds, facilitating information consumption and user interaction.

  • Bulk Actions
  • Chats
  • Feeds
  • Grids
  • Stacked

  • Content sections Planned

  • Kanban Boards Planned