Main Content Area
This layout is fully responsive with dark mode support and a mobile-ready off-canvas sidebar.
Style Guide
A collection of reusable UI components built with Tailwind CSS, Stimulus, and ViewComponents.
Cards
Simple Card
This is a basic card component with just a title and body content.
Custom Header
Active
Cards can have custom headers and footers using slots.
Forms & Inputs
Input Component
Must be unique
Please enter a valid email address
Form Layout
Full form with sections, file upload, checkboxes, and radio buttons. Dark mode ready.
Tables
Interactive Elements (Stimulus)
UI Blocks
Application Shell (Sidebar Layout)
A complete application layout with mobile-ready sidebar using @tailwindplus/elements.
Supports dark mode, a profile slot for the desktop sidebar footer,
and a user_menu slot for the mobile top bar.
Slots:
sidebar_content— navigation rendered inside both the mobile off-canvas and desktop sidebarprofile— user profile link pinned to the bottom of the desktop sidebaruser_menu— avatar/menu shown in the mobile top bar
Options: position: :fixed (default) or position: :absolute for embedded demos
Modal
Dialog
Uses @tailwindplus/elements el-dialog. Trigger with command="show-modal" commandfor="[id]", close with command="close".
Dialog — Centered, wide with two actions
Show Page
Description List
Use UI::DescriptionListComponent to display record details in a structured label/value layout with dark mode support.
Applicant Information
Personal details and application.
- Full name
- Margot Foster
- Application for
- Backend Developer
- Email address
- margotfoster@example.com
- Salary expectation
- $120,000
- About
- Fugiat ipsum ipsum deserunt culpa aute sint do nostrud anim incididunt cillum culpa consequat. Excepteur qui ipsum aliquip consequat sint. Sit id mollit nulla mollit nostrud in ea officia proident. Irure nostrud pariatur mollit ad adipisicing reprehenderit deserunt qui eu.
Slots:
field(label:)— a label/value row; accepts any content block for complex values
Options: title: (required), subtitle: (optional)
Page Layouts
Top Nav Shell
Full-page layout with a horizontal top navigation bar instead of a sidebar. Includes desktop nav links, a user menu, and a collapsible mobile menu via el-disclosure.
Dashboard
Page content goes here
Slots:
nav_content— desktop horizontal nav links (border-b-2active style)mobile_nav_content— mobile disclosure menu content (border-l-4active style); also shows hamburger buttonuser_menu— right-side actions (notifications, profile dropdown)
Options: title: (optional page heading), id: (default: "top-nav", used to scope the mobile menu toggle)