Assets

Uchi comes with a stylesheet generated by Tailwind and a compiled JavaScript file, but you don’t have to settle for the defaults.

JavaScript

The script tags for the default JavaScript are rendered by app/views/layouts/uchi/_javascript.html.erb. In order to replace all of Uchi’s client-side scripts, add that template to your host application and load whatever scripts you need in it.

If you want to extend the existing Uchi client-side code, include the default javascript_include_tag in app/views/layouts/uchi/_javascript.html.erb to still include the default scripts.

<%= javascript_include_tag "uchi/application", "data-turbo-track": "reload" %>

Stimulus

Uchi uses Stimulus for interactivity and exposes the Stimulus object as window.uchi.application. If you want to extend the Stimulus instance in your own assets, for example to register custom controllers, you can use that object in your scripts:

import MyController from './controllers/somewhere.js'
if (window.uchi.application) {
  window.uchi.application.register('my-controller', MyController)
}

Stylesheets

The CSS includes for the default styles are rendered by app/views/layouts/uchi/_stylesheets.html.erb. In order to replace all of Uchi’s styles add that template to your host application and include whatever styles you need in it.

If you want to extend the existing Uchi CSS, include the default stylesheet_link_tag in app/views/layouts/uchi/_stylesheets.html.erb to still include the default styles:

<%= stylesheet_link_tag "uchi/application", media: "all", "data-turbo-track": "reload" %>

Theming

Uchi’s UI is built on Flowbite and Tailwind (using flowbite-components for Rails).

This means you have access to all of Flowbite’s theme variables to customize colors and fonts and even all of Tailwind’s theme variables, which allow you to modify pretty much every design token in Uchi.

For example, to create a… unique… theme, you could add the following to app/views/layouts/uchi/_stylesheets.html.erb:

<%= stylesheet_link_tag "uchi/application", media: "all", "data-turbo-track": "reload" %>
<style>
  * {
    --color-brand: red;
    --color-neutral-secondary-soft: yellow;
    --radius-base: 100px;
    --tracking-tight: 1em;
  }
</style>