| name | fivfold-kits |
| description | FivFold UI Kits conventions for React/Next.js projects. Use when working with FivFold Kits (Email, Kanban, Chat, Auth, Media Uploader), import paths, theming, Tailwind CSS v4, shadcn/ui components, or kit customization. |
| license | MIT |
| metadata | {"author":"Fivex Labs","version":"1.0.0"} |
FivFold Kits
Conventions for using FivFold UI Kits in React and Next.js projects.
When to Apply
- Importing or customizing FivFold Kits (Email, Kanban, Chat, Auth, Media Uploader)
- Setting up theming, Tailwind CSS v4, or shadcn/ui
- Working with kit component exports and props
Key Conventions
Import Paths
| Purpose | Import Path |
|---|
| shadcn/ui components | @/components/ui/<component> (or config aliases.ui) |
| FivFold Kits | @/components/ui/kits/<name> (or config aliases.kits) |
| Utilities (cn) | @/lib/utils (or config aliases.utils) |
Component Rules
- shadcn/ui components: do not modify directly
- Kits: can be customized to fit your needs
- Client components: must have
"use client" at the top
- Use
cn() for conditional class merging
Styling
- Tailwind CSS v4 exclusively:
@import "tailwindcss" in CSS; no tailwind.config.js
- Use semantic classes:
bg-background, text-foreground, bg-card, text-muted-foreground
- Avoid hardcoded colors inside Kits; use CSS variable-based classes
Adding Kits
npx @fivfold/ui list
npx @fivfold/ui add <name>
npx @fivfold/ui add <name> --theme zinc
Available Kits
| Kit | Description |
|---|
| Email | Full-featured email client with folders, threads, compose |
| Kanban | Drag-and-drop board with columns, tasks, priorities |
| Chat | Threads, Socket.IO-ready kit: dropdown menus, inline composer (poll/emoji/GIF), search — wire optional ChatKit callbacks to your API |
| Auth | Login, Register, ForgotPassword (Firebase, Cognito, Auth0, JWT) |
| Media Uploader | MediaUploaderKit: presign + finalizeUpload, optional simulateTransport for demos; pair with @fivfold/api add media-uploader |
