# Rails

> Set up Tabler in Rails and build a first working page.

Install Tabler in Rails - load the CSS and JS with the standard bundling gems and render a minimal ERB layout with a Tabler card.

Source: https://docs.tabler.io/ui/getting-started/frameworks/rails

---

Rails renders server-side HTML through ERB templates, so Tabler classes work directly in your views, and the compiled CSS and JS integrate with the standard Rails bundling gems (`cssbundling-rails` and `jsbundling-rails`).

You will install `@tabler/core`, import its assets in your application bundles, and render a first view with a Tabler card.

## Setup

### Install Tabler package

Install `@tabler/core` with your preferred package manager:

```shell
npm install @tabler/core
yarn add @tabler/core
pnpm install @tabler/core
bun install @tabler/core
```

You can also use CDN files when you need a quick setup:

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/core@1.5.0/dist/css/tabler.min.css" />
<script src="https://cdn.jsdelivr.net/npm/@tabler/core@1.5.0/dist/js/tabler.min.js"></script>
```

### Import styles

For Rails with `cssbundling-rails`, import Tabler CSS in `app/assets/stylesheets/application.scss`:

```scss
@import '@tabler/core/dist/css/tabler.min.css';
```

For full theme customization, import SCSS sources instead:

```scss
@use '@tabler/core/scss/tabler';
```

### Import and initialize JavaScript

Tabler JavaScript is required for interactive components such as dropdowns, modals, and tooltips.

If you use `jsbundling-rails`, import Tabler JS in `app/javascript/application.js`:

```js
import '@tabler/core/dist/js/tabler.min.js'
```

Rails-specific note: if you use `importmap-rails` without npm bundling, prefer CDN for Tabler JS or add compiled files to your asset pipeline and include them from your layout.

### Minimal working example

Create a simple layout in `app/views/layouts/application.html.erb`:

```erb
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
    <%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>
  </head>
  <body>
    <%= yield %>
  </body>
</html>
```

Then add a simple page in `app/views/home/index.html.erb`:

```html
<div class="page">
  <div class="page-wrapper">
    <div class="container-xl py-4">
      <div class="card">
        <div class="card-body">
          <h3 class="card-title">Rails + Tabler</h3>
          <p class="text-secondary mb-0">Your Tabler setup is working.</p>
        </div>
      </div>
    </div>
  </div>
</div>
```

Run the app:

```shell
bin/rails server
```

Open the local Rails URL and confirm the card is styled with Tabler.

### Next steps

- Continue with [Customize](/ui/getting-started/customize) to adjust styles and build setup.
- Explore [Layout](/ui/layout) to choose page structures.
- Browse [Components](/ui/components) to add UI building blocks.
