Rails UI – Documentation

Docs

Configuration

Once you've installed Rails UI, you'll be prompted to configure some basic settings. Enter your app name, support email, choose a theme, and adjust brand colors. Pages that come with each theme along with its brand colors are installed by default.

The railsui.yml config file

When you install Rails UI, a railsui.yml file is added to your config directory. This file manages your configuration options and is automatically generated, but you can manually adjust it if needed.

General

Some general options all you to customize the display name of your app as well as add a support email. These primarily get used in email templates, pages, and some front-facing areas of a given template like a footer.

Access those in this manner:

Railsui.config.application_name
Railsui.config.support_email

Select a theme

In Rails UI, components and views (pre-designed UI) are theme-driven. Each theme includes a preview for you to get a feel for the design and layout.

Every theme comes with UI components, pre-designed views (optional), mailers, and custom color schemes by default. You can customize these at any time since it's integrated inside your app.

Themes are based on real-world use cases and niches. We source most ideas from the SaaS (software as a service) space given that Ruby on Rails is a great framework to leverage for that use case.

We'll add more free and premium themes as time goes on to grow Rails UI into a larger library.

Changing themes

Changing things is now possible but not so trivial.

Rails UI generated pages, partials (app/views/rui) and images (app/assets/images/railsui) are replaced with the newly chosen theme's files. This includes all files found in app/assets/stylesheets/railsui/.

Tip: To keep using any views in the app/views/rui directory or images in the app/assets/images/railsui directory, copy these files to a backup location or elsewhere in your app before making changes. For best results, consider pages as code snippets for your app and treat them as read-only.

Configuring colors

Rails UI includes two custom colors in addtion to Tailwind CSS 4's color palette: primary and secondary.

/* Example theme setup for Hound theme */
@theme {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

  --color-primary-50: oklch(0.962 0.0179 272.31); /* #eef2ff */
  --color-primary-100: oklch(0.93 0.0334 272.79); /* #e0e7ff */
  --color-primary-200: oklch(0.8699 0.0622 274.04); /* #c7d2fe */
  --color-primary-300: oklch(0.7853 0.1041 274.71); /* #a5b4fc */
  --color-primary-400: oklch(0.6801 0.1583 276.93); /* #818cf8 */
  --color-primary-500: oklch(0.5854 0.2041 277.12); /* #6366f1 */
  --color-primary-600: oklch(0.5106 0.2301 276.97); /* #4f46e5 */
  --color-primary-700: oklch(0.4568 0.2146 277.02); /* #4338ca */
  --color-primary-800: oklch(0.3984 0.1773 277.37); /* #3730a3 */
  --color-primary-900: oklch(0.3588 0.1354 278.7); /* #312e81 */
  --color-primary-950: oklch(0.2573 0.0861 281.29); /* #1e1b4b */

  --color-secondary-50: oklch(0.9842 0.0034 247.86); /* #f8fafc */
  --color-secondary-100: oklch(0.9683 0.0069 247.9); /* #f1f5f9 */
  --color-secondary-200: oklch(0.9288 0.0126 255.51); /* #e2e8f0 */
  --color-secondary-300: oklch(0.869 0.0198 252.89); /* #cbd5e1 */
  --color-secondary-400: oklch(0.7107 0.0351 256.79); /* #94a3b8 */
  --color-secondary-500: oklch(0.5544 0.0407 257.42); /* #64748b */
  --color-secondary-600: oklch(0.4455 0.0374 257.28); /* #475569 */
  --color-secondary-700: oklch(0.3717 0.0392 257.29); /* #334155 */
  --color-secondary-800: oklch(0.2795 0.0368 260.03); /* #1e293b */
  --color-secondary-900: oklch(0.2077 0.0398 265.75); /* #1e293b */
  --color-secondary-950: oklch(0.1288 0.0406 264.7); /* #020617 */

  --animate-toast-from-right: toast-from-right 0.5s
    cubic-bezier(0.68, -0.55, 0.27, 1.55);
  --animate-toast-from-left: toast-from-left 0.5s
    cubic-bezier(0.68, -0.55, 0.27, 1.55);

  @keyframes toast-from-right {
    0% {
      transform: translateX(50%);
      opacity: 0%;
    }

    100% {
      transform: translateX(0);
      opacity: 100%;
    }
  }

  @keyframes toast-from-left {
    0% {
      transform: translateX(-50%);
      opacity: 0%;
    }

    100% {
      transform: translateX(0);
      opacity: 100%;
    }
  }
}

@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }
}

/* Installed as a depenency when using the Hound theme */
@plugin "@tailwindcss/typography";

/* Keep: Include Rails UI content paths i.e. /railsui */
@config "../../stylesheets/railsui/tailwind.config.js";

Configuration

The railsui.yml config file

General

Select a theme

Changing themes

Configuring colors

Pages

Installing pages

Customizing pages

On this page