Rivetous Showcase
A complete demonstration of the Rivetous UI Branded Component Kit
[Screenshot placeholder — train-themed showcase]
The Project
Rivetous Showcase is the reference implementation for every Branded Component Kit we deliver. It demonstrates the complete component library in a cohesive, branded environment.
Built with a train theme (rivet = metal fastener used in railways and metalwork), the showcase presents all components in context: navigation, forms, data tables, modals, alerts, and more.
The Challenge
When selling Branded Component Kits, customers need to see what they're buying. A Storybook alone isn't enough — it shows components in isolation, not in a real application.
The challenge was to build a complete site using only the components we'd deliver, demonstrating how they work together in a production environment.
The Solution
A multi-page site with realistic use cases: catalog browsing, search and filters, data tables with pagination, forms with validation, and interactive UI patterns.
Every component in Rivetous UI is used somewhere in the showcase. Every pattern is demonstrated with working code. The site itself serves as living documentation.
Key Features
Complete catalog and detail pages with real content
Search, filtering, and pagination patterns
Form validation with react-hook-form + Zod
Data tables with sorting and selection
Modal dialogs, alerts, and toast notifications
Responsive design across all screen sizes
Tech Stack
Framework
React 19 + TypeScript 6
Vite 8 for build tooling
React Router for navigation
Components
Ark UI (headless primitives)
CVA for variant styling
Tailwind v4 via @tailwindcss/vite
Tooling
Biome for linting and formatting
Vitest for unit testing
Storybook for component docs
Deployment
Cloudflare Pages
GitHub Actions CI/CD
See It In Action
Explore the live showcase to see every component in context, or browse the Storybook for isolated component documentation.