UI Lab — Demo
Rails 8 · Tailwind CSS v4 · daisyUI · ViewComponent · Hotwire
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 placeholder component.
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 underapp/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.