UI Lab — Demo

Rails 8 · Tailwind CSS v4 · daisyUI · ViewComponent · Hotwire

← Accueil

Aucun utilisateur connecté

Connecte-toi pour voir les informations du compte.

A clean, overridable UI stack

Everything below is rendered with daisyUI classes compiled by the Tailwind v4 standalone CLI. If it is styled, the whole pipeline works.

ViewComponent

Rendered from app/components/ui/status_card_component.rb.

Build

Tailwind v4 standalone CLI

Styling

daisyUI 5 component classes

Components

Encapsulated as Ruby objects

Component library slots

Mock components living in their dedicated namespaces, ready to be replaced with the real thing.

rails_blocks (mock)

Rails Blocks

Mock placeholder component.

rails_designer (mock)

Rails Designer UI

Mock placeholder component.

Where the real components go

  • Rails Blocks (railsblocks.com): paste markup into app/components/rails_blocks/. These are mostly copy-paste daisyUI/Tailwind snippets — drop them into a ViewComponent template or directly into a view.
  • Rails Designer UI (railsdesigner.com): add components under app/components/rails_designer/. Some ship Stimulus controllers — register them under app/javascript/controllers/ (Stimulus is already enabled).
  • Your own components: keep them in app/components/ui/ and render with <%= render Ui::SomethingComponent.new(...) %>.

daisyUI themes are configured in app/assets/tailwind/application.css (light, dark, corporate). Rebuild CSS with bin/rails tailwindcss:build or run bin/dev for watch mode.