Installation

You should have received a zip file with two folders zui-app and zestui.

zui-app contains a Rails 7.1 & Ruby 3.2 app configured with ZestUI ready to go.

Run the following for the initial setup

./bin/setup

To start the development server.

./bin/dev

Open http://localhost:3000 in your browser to see the app running.

Installing on an existing Rails app

Requirements

Rails app configured with TailwindCSS and a javascript bundler like esbuild like below
```
rails new -a propshaft -j esbuild -c tailwind
```
Ruby 3.0+

Import Maps

ZestUI doesn't support import maps and is unlikely to support it in the future. We use tailwind plugins which are not compatible with import maps. Also current importmap-rails implementation downloads the files instead of serving from CDN and this breaks some packages.

1. Install the gem

bundle add zestui

2. Install javascript dependencies

# If you are using yarn
yarn add @tailwindcss/forms --dev
yarn add tailwindcss-animate --dev
yarn add tinygesture

# if you are using node
npm install -D @tailwindcss/forms
npm install -D tailwindcss-animate
npm install tinygesture

3. Run the installer

ZESTUI_PATH=../zestui rails g zestui:install

ZESTUI_PATH is the path to the zestui folder you received in the zip file.

4. Configure layout

a. Add the following to <html> tag of your application layout

class="dark" data-zui-accent="jade" data-zui-gray="slate"

You can omit the class="dark" if you want light mode as default and change the accent color to your preference

If you are using a single accent color, you can remove all the other accent colors from the app/assets/stylesheets/zui/index.css file

b. Add the following to <body> tag of your application layout

class="max-w-[100vw] overflow-x-hidden bg-background text-gray-text"

c. Add the following to your application layout file just after the <body> tag

<%= zui 'toast/wrapper' do %>
  <%= zui_flash_to_toast %>
  <%= content_for(:toast_wrapper) %>
<% end %>

d. Add the following to your application layout file just after the <head> tag

<%= render partial: "shared/zui_theme_accent" %>

Manual Tailwind Configuration

If the automatic tailwind configuration doesn't work for you, follow the steps below

1. Config

Add the highlighted code to your tailwind.config.js file. You may need to adjust the path to the preset file depending on your project structure.

const zestuiPreset = require("./config/zestui/tailwind/preset");

module.exports = {
  presets: [zestuiPreset],

  content: [
    "./app/views/**/*.rb",
    "./app/components/**/*.rb",
    "./app/views/**/*.html.erb",
    "./app/helpers/**/*.rb",
    "./app/assets/stylesheets/**/*.css",
    "./app/javascript/**/*.js",
  ],
};

2. CSS

Add the following code to your application.tailwind.css file. You may need to adjust the path to the zui/index.css file depending on your project structure.

 @import './zui/index.css';