Trilitech's design system for Tezos marketing experiences, built for consistency, accessibility, and scalability.
tezosx-ui is a production-ready component registry built on shadcn/ui that provides a comprehensive design system for Tezos marketing websites and applications.
- 6 production-ready components with Tezos-branded styling
- Dynamic color system for multi-brand flexibility
- Dark mode support out of the box
- TypeScript-first with full type safety
- Tailwind CSS for complete customization
- One-command installation via shadcn CLI
- Fully tested and ready for production use
Install components directly into your project using the shadcn CLI:
# Install a single component
npx shadcn@latest add https://tezosx-ui.vercel.app/registry/tezosx/button.json
# Install multiple components at once
npx shadcn@latest add \
https://tezosx-ui.vercel.app/registry/tezosx/button.json \
https://tezosx-ui.vercel.app/registry/tezosx/label.json \
https://tezosx-ui.vercel.app/registry/tezosx/input.json \
https://tezosx-ui.vercel.app/registry/tezosx/card.json \
https://tezosx-ui.vercel.app/registry/tezosx/textarea.json \
https://tezosx-ui.vercel.app/registry/tezosx/badge.json✅ All files install automatically - no manual setup required!
| Component | Status | Variants | Description |
|---|---|---|---|
| Button | ✅ Ready | 5 variants, 4 sizes | Primary, secondary, outline, ghost, destructive |
| Label | ✅ Ready | Default | Accessible form labels |
| Input | ✅ Ready | All types | Text, email, password, number, etc. |
| Card | ✅ Ready | 6 sub-components | Flexible content container with header, footer |
| Textarea | ✅ Ready | Default | Multi-line text input with resize |
| Badge | ✅ Ready | 6 variants | Status indicators and tags |
| Checkbox | 🚧 Coming Soon | - | Accessible checkbox (with Radix UI) |
| Select | 🚧 Coming Soon | - | Dropdown selection (with Radix UI) |
| Dialog | 🚧 Coming Soon | - | Modal dialogs (with Radix UI) |
| Accordion | 🚧 Coming Soon | - | Collapsible content (with Radix UI) |
6 components ready for production use! 🎉
tezosx-ui uses CSS variables for easy color customization. Each marketing site can override colors without changing component code:
/* Your marketing site's custom colors */
:root {
--primary: 220 90% 56%;
--secondary: 280 70% 50%;
/* ... override any color tokens */
}Dark mode is automatically supported and can be toggled programmatically or via user preference.
Comprehensive documentation with interactive examples:
- 🏠 Home - Overview and component showcase
- 🎨 Theming Guide - Color system and dark mode
- 🔘 Button - Button component docs
- 🏷️ Label - Label component docs
- 📝 Input - Input component docs
- 🃏 Card - Card component docs
- 📄 Textarea - Textarea component docs
- 🏅 Badge - Badge component docs
Each page includes live examples, code snippets, and API references.
- Framework: Next.js 16 + TypeScript
- Styling: Tailwind CSS v4
- Components: Radix UI primitives
- CLI: shadcn/ui
- Documentation: Next.js MDX
- Deployment: Vercel
Current Version: v1.0.0
Status: ✅ Production Ready (6/10 components complete)
- ✅ Planning & Architecture (100%)
- ✅ Project Foundation (100%)
- ✅ Theming System (100%)
- ✅ Component Development (60% - 6/10 complete)
- ✅ Registry Configuration (100%)
- ✅ Documentation (100% for available components)
- ✅ Deployment & Testing (100%)
- 6 production-ready components
- Complete theming system with dark mode
- Automatic component installation via CLI
- Comprehensive documentation
- Deployed and tested on Vercel
- Checkbox component (with Radix UI)
- Select component (with Radix UI)
- Dialog component (with Radix UI)
- Accordion component (with Radix UI)
Contributions are welcome! Please read CONTRIBUTING.md for guidelines.
MIT License - see LICENSE for details.
- GitHub Repository: https://github.com/trilitech/tezosx-ui
- Documentation: Coming Soon
- Registry: Coming Soon
- Tezos: https://tezos.com
- Trilitech: https://trili.tech
tezosx-ui/
├── src/
│ ├── app/ # Next.js App Router
│ ├── components/ui/ # Registry components
│ ├── lib/ # Utilities
│ ├── registry/ # Component registry definitions
│ └── content/docs/ # Documentation (MDX)
├── public/ # Static assets
├── PLAN.md # Detailed project plan
├── TODO.md # Task tracking
└── README.md # This file
Built with ❤️ by Trilitech for the Tezos community