website·Indexed 31 days ago
https://loco-motion.profoundry.usA UI component library built on Ruby on Rails, ViewComponent, and DaisyUI v5. It features 70 components across categories such as actions, navigation, and data display, providing idiomatic patterns for form building, layout structure, and Rails integration.
daisy_ and hero_ prefixes.The Daisy::Feedback namespace provides components to communicate system state to the user:
AlertComponent: Informs users about important information or system changes.LoadingComponent: Indicates background processes are active.ProgressComponent: Linear progress bars.RadialProgressComponent: Circular progress bars.SkeletonComponent: Placeholders for loading content.ToastComponent: Temporary notifications (relies on the Alert component's Stimulus controller).TooltipComponent: Small descriptive popups (includes daisy_tooltip for wrapping entire elements).daisy_megamenu helper creates a horizontal menu where items open popovers containing complex navigation blocks. It uses native HTML popover and popovertarget attributes with CSS anchor positioning, requiring no JavaScript. To make the menu responsive on small screens, add the max-sm:megamenu-vertical class to collapse it into a toggleable full-width popover.= daisy_megamenu(css: "max-sm:megamenu-vertical") do
- # Megamenu content heredaisy_hero helper creates large, responsive introduction sections. It supports a content_wrapper_css parameter to control the layout of the internal content (e.g., using max-sm:flex-col to stack content on small screens). Images can be added as the first or last child of the hero to create a split layout.= daisy_hero(css: "block max-w-[1000px] mx-4 sm:mx-16 py-8 lg:mx-32 bg-base-200", content_wrapper_css: "max-sm:flex-col") do
%img.h-40.rounded{ src: image_path('landscapes/mountain-river.jpg'), alt: "Beautiful Landscape" }
%h1.text-5xl.font-bold
Hello, World!
%p.my-6
Welcome to the world of LocoMotion.
= daisy_button(css: "btn btn-primary", title: "Get Started", href: "/")Organize the high-level structure of a page using the following DaisyUI components:
daisy_hero: Use for page headers and introductions.daisy_card: Use to wrap and group content into sections.daisy_divider: Use to visually separate different content sections.daisy_footer: Use for the page footer.form.daisy_checkbox to automatically handle name and id attributes from the form object. By default, it emits a hidden field for unchecked boxes (sending "0"), similar to standard Rails check_box. This behavior can be disabled by passing include_hidden: false.= form_with(url: "#", method: :post, scope: :user, class: "flex flex-col gap-8") do |form|
= form.daisy_label(:terms) do
= form.daisy_checkbox(:terms)
I accept the terms and conditions
= form.daisy_checkbox(:newsletter, toggle: true, trailing: "Subscribe to newsletter")ViewComponent::Base. This allows components to use Rails helpers, access controller data, and request data while maintaining standard Rails naming conventions.= theme_preload_script helper to the <head> section of your layout. This inline script sets the theme from localStorage before the page renders.-# In your layout's <head>
= theme_preload_scriptThe daisy_alert helper (based on Daisy::Feedback::AlertComponent) is used to inform users of important system information. Alerts typically include a leading icon to indicate the alert type.
Common Parameters:
icon: The name of the icon to display at the start of the alert.css: CSS classes for styling and coloring.html: A hash of HTML attributes.Styling Variants (via css parameter):
alert-info, alert-success, alert-warning, alert-error.alert-soft (soft style), alert-outline (outline style).alert-vertical (stacks icon above content). Use responsive modifiers like sm:alert-horizontal to change layout based on screen size.# Standard Colored Alert with Icon
= daisy_alert(icon: "check-circle", css: "alert-success w-full max-w-100") do |alert|
Success! You did it!
# Soft Style Alert
= daisy_alert(icon: "information-circle", css: "alert-info alert-soft") do
Info alert.
# Vertical Alert (Responsive)
= daisy_alert(icon: "exclamation-triangle", css: "alert-warning alert-vertical sm:alert-horizontal") do
This alert is vertical on small screens.
# Custom HTML/Icon Content
= daisy_alert do |alert|
= loco_icon("star", css: "text-yellow-500")
Custom icon alert!Choose the appropriate Daisy component based on the selection requirement:
daisy_select: For dropdown menus; use option groups for better organization.daisy_radio_button: For mutually exclusive choices.daisy_checkbox: For allowing multiple selections.
Always include a daisy_label to ensure accessibility.daisy_button helper creates interactive buttons. It supports various styles via the css parameter (e.g., btn-primary, btn-secondary, btn-accent, btn-ghost, btn-link, btn-outline).= daisy_button do
Plain Button
= daisy_button(css: "btn-primary") do
Primary Button
= daisy_button(css: "btn-outline") do
Outline Button