ZestUI

https://zestui.com/docs
Admin
ZestUI is a UI component library for Rails applications, offering a collection of pre-built...
Tokens:1,771
Snippets:12
Trust Score:5.7
Update:1 year ago
Show doc for...
Tokens:
Raw
### Setup ZestUI Rails Application

Source: https://zestui.com/docs/installation

Command to run the initial setup script for a new ZestUI Rails application. This prepares the development environment and installs necessary dependencies.

```shell
./bin/setup
```

--------------------------------

### Start ZestUI Development Server

Source: https://zestui.com/docs/installation

Command to start the development server for a ZestUI-integrated Rails application. Access the running application via http://localhost:3000.

```shell
./bin/dev
```

--------------------------------

### Run ZestUI Installer Generator

Source: https://zestui.com/docs/installation

Executes the ZestUI Rails generator to install the framework. The ZESTUI_PATH environment variable specifies the location of the ZestUI folder.

```shell
ZESTUI_PATH=../zestui rails g zestui:install
```

--------------------------------

### Install ZestUI JavaScript Dependencies

Source: https://zestui.com/docs/installation

Installs required JavaScript packages for ZestUI, including TailwindCSS plugins and gesture libraries, using either Yarn or npm.

```shell
# 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
```

--------------------------------

### Render ZestUI Theme Accent Partial

Source: https://zestui.com/docs/installation

Renders a partial responsible for applying the selected accent color theme in ZestUI.

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

--------------------------------

### ZestUI Toast Wrapper and Flash Integration

Source: https://zestui.com/docs/installation

Includes ZestUI's toast wrapper and a helper to convert flash messages into toasts within your application layout.

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

--------------------------------

### Add ZestUI Gem to Rails Project

Source: https://zestui.com/docs/installation

Installs the ZestUI gem into your Rails application using Bundler. Ensure you have the gem added to your Gemfile.

```ruby
bundle add zestui
```

--------------------------------

### Configure Tailwind CSS with ZestUI Preset

Source: https://zestui.com/docs/installation

Integrates ZestUI's Tailwind CSS preset into your project's `tailwind.config.js` file, defining content sources and applying presets.

```javascript
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",
  ],
};
```

--------------------------------

### Create New Rails App with TailwindCSS

Source: https://zestui.com/docs/installation

Command to generate a new Rails application pre-configured with TailwindCSS and esbuild, suitable for ZestUI integration.

```shell
rails new -a propshaft -j esbuild -c tailwind
```

--------------------------------

### Import ZestUI CSS in Application

Source: https://zestui.com/docs/installation

Imports the main ZestUI CSS file into your application's primary Tailwind CSS file, ensuring all ZestUI styles are loaded.

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

--------------------------------

### Configure Body Tag for ZestUI Layout

Source: https://zestui.com/docs/installation

Applies styling to the `<body>` tag to ensure proper layout and prevent horizontal scrolling within the ZestUI application.

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

--------------------------------

### Configure HTML Tag for ZestUI Theming

Source: https://zestui.com/docs/installation

Adds necessary classes and data attributes to the `<html>` tag in your application layout for ZestUI's dark mode and accent color theming.

```html
class="dark" data-zui-accent="jade" data-zui-gray="slate"
```
Tokens:
Raw