Welcome to the Stick design system Wiki. This documentation serves as a living blueprint detailing HTML structures, Tailwind CSS custom variables, and JavaScript trigger hooks required to build premium, high-fidelity interactive elements using the Shadcn aesthetic.
The backend routes and documentation handlers are located under src/docs/. Shared components reside in templates/components/. The rest of the application is packaged inside clean vertical feature directories (e.g. src/auth/, src/tasks/, src/audit/).
Designed to minimize heavy JS bundles. Using vanilla JavaScript with document-level event delegation (e.g. for Modals, Sheets, Accordions, and Tabs) keeping the interactive shell fast and responsive.
The layout relies on standard Tailwind themes mapped onto raw HSL variables, allowing instant utility customization.
| Variable | Raw HSL Mapping | Render Example |
|---|---|---|
| --background | 224 71% 4% | |
| --primary | 210 40% 98% | |
| --border / --input | 216 34% 17% | |
| --ring | 216 12.2% 83.9% |
Rather than attaching active event listeners to every individual DOM node, the design system utilizes document-level event delegation and global query selector hooks. This keeps page loads incredibly fast and handles dynamically rendered components automatically.
To make components interactive, they must contain specific functional CSS classes or attributes (e.g., .modal-dialog, [data-modal-target], .custom-select) that the Javascript file uses to query the DOM. If these functional hooks are missing or renamed, the interactivity will fail.
.modal-dialog, .modal-content, .modal-backdrop, .modal-close, .select-trigger, and .select-item) are required structure hooks. These must remain unchanged because our JavaScript code expects them to animate opacity, visibility, translation transform stages, and handle keydown events.
bg-slate-900, padding/margin p-6 mt-2, border-radius rounded-3xl, drop shadows shadow-xl, borders border-border, and custom fonts) can be modified, replaced, or completely restyled. As long as you maintain the core HTML nesting hierarchy and functional selector names, the component will work perfectly.