tezosx-ui

Trilitech's design system for Tezos marketing experiences, built for consistency, accessibility, and scalability.

---

Overview

tezosx-ui is a production-ready component registry built on shadcn/ui that provides a comprehensive design system for Tezos marketing websites and applications. It offers a complete set of UI components with Tezos-branded styling, dynamic theming capabilities, and full TypeScript support.

---

Installation

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 \
  https://tezosx-ui.vercel.app/registry/tezosx/checkbox.json \
  https://tezosx-ui.vercel.app/registry/tezosx/select.json \
  https://tezosx-ui.vercel.app/registry/tezosx/dialog.json \
  https://tezosx-ui.vercel.app/registry/tezosx/accordion.json

All files install automatically - no manual setup required.

---

Components

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	Ready	Default	Accessible checkbox with Radix UI
Select	Ready	9 sub-components	Dropdown selection with Radix UI
Dialog	Ready	8 sub-components	Modal dialogs with Radix UI
Accordion	Ready	4 sub-components	Collapsible content with Radix UI

---

Dynamic Theming

tezosx-ui uses CSS custom properties (CSS variables) for comprehensive theming support. This allows each marketing site to customize colors, spacing, and other design tokens without modifying component code.

Color System

The theming system is built on HSL color values stored as CSS variables. All colors support both light and dark modes, with automatic switching based on the dark class applied to the root element.

Base Colors

Background and Foreground

• --background: Main background color for the application

  • Light mode: 0 0% 100% (white)
  • Dark mode: 180 25% 2% (Tezos black #030505)
  • Usage: Applied to body and main container backgrounds
  • Tailwind class: bg-background

• --foreground: Primary text color

  • Light mode: 0 0% 13% (dark gray)
  • Dark mode: 0 0% 98% (near white)
  • Usage: Default text color for body content
  • Tailwind class: text-foreground

Brand Colors

Primary

• --primary: Primary brand color (Tezos blue #0D61FF)
  • Value: 219 100% 53%
  • Usage: Primary buttons, links, focus rings, active states
  • Tailwind class: bg-primary, text-primary, border-primary
  • Foreground: --primary-foreground (0 0% 100% - white)

Secondary

• --secondary: Secondary brand color (Tezos purple #6843c3)
  • Value: 257 52% 51%
  • Usage: Secondary buttons, alternative actions, highlights
  • Tailwind class: bg-secondary, text-secondary, border-secondary
  • Foreground: --secondary-foreground (0 0% 100% - white)

Accent

• --accent: Accent color for highlights
  • Value: 257 52% 51% (matches secondary - Tezos purple)
  • Usage: Hover states, subtle highlights, interactive elements
  • Tailwind class: bg-accent, text-accent, hover:bg-accent
  • Foreground: --accent-foreground (0 0% 100% - white)

Destructive

• --destructive: Error and destructive action color
  • Value: 0 84% 60% (red)
  • Usage: Delete buttons, error messages, warning states
  • Tailwind class: bg-destructive, text-destructive, border-destructive
  • Foreground: --destructive-foreground (0 0% 100% - white)

UI Colors

Muted

• --muted: Muted background color
  • Light mode: 0 0% 96% (very light gray)
  • Dark mode: 0 0% 13% (Tezos grey #222222)
  • Usage: Subtle backgrounds, disabled states, code blocks
  • Tailwind class: bg-muted, text-muted
  • Foreground: --muted-foreground (light: 0 0% 45%, dark: 0 0% 65%)

Card

• --card: Card background color
  • Light mode: 0 0% 100% (white)
  • Dark mode: 0 0% 13% (Tezos grey #222222)
  • Usage: Card components, elevated surfaces, panels
  • Tailwind class: bg-card, border-card
  • Foreground: --card-foreground (light: 0 0% 13%, dark: 0 0% 98%)

Popover

• --popover: Popover and dropdown background
  • Light mode: 0 0% 100% (white)
  • Dark mode: 0 0% 13% (Tezos grey #222222)
  • Usage: Dropdown menus, tooltips, popovers
  • Tailwind class: bg-popover, border-popover
  • Foreground: --popover-foreground (light: 0 0% 13%, dark: 0 0% 98%)

Border

• --border: Border color
  • Light mode: 0 0% 90% (light gray)
  • Dark mode: 0 0% 20% (dark gray)
  • Usage: Borders, dividers, input borders
  • Tailwind class: border-border, border-t-border

Input

• --input: Input field border color
  • Light mode: 0 0% 90% (light gray)
  • Dark mode: 0 0% 20% (dark gray)
  • Usage: Input field borders, form controls
  • Tailwind class: border-input

Ring

• --ring: Focus ring color
  • Value: 219 100% 53% (matches primary - Tezos blue)
  • Usage: Focus indicators, outline rings
  • Tailwind class: ring-ring, focus-visible:ring-ring

Spacing and Radius

Border Radius

• --radius: Base border radius
  • Value: 0.5rem (8px)
  • Usage: All rounded corners
  • Tailwind classes: rounded-lg (full radius), rounded-md (radius - 2px), rounded-sm (radius - 4px)

Customization

Override any CSS variable in your globals.css file to customize the theme:

@layer base {
  :root {
    /* Override brand colors */
    --primary: 220 90% 56%; /* Your brand color */
    --secondary: 280 70% 50%; /* Your secondary color */
    
    /* Override UI colors */
    --background: 0 0% 100%; /* Your background */
    --foreground: 222 47% 11%; /* Your text color */
    
    /* Override spacing */
    --radius: 0.75rem; /* Larger border radius */
  }
  
  .dark {
    /* Override dark mode colors */
    --background: 222 47% 11%; /* Dark background */
    --card: 217 33% 17%; /* Dark card background */
  }
}

Usage in Components

CSS variables are automatically mapped to Tailwind utility classes:

• Background colors: bg-primary, bg-secondary, bg-card, bg-muted
• Text colors: text-foreground, text-primary, text-muted-foreground
• Border colors: border-border, border-input, border-primary
• Focus rings: ring-ring, focus-visible:ring-ring

Components use these utilities internally, so customization automatically applies to all components.

Dark Mode

Dark mode is automatically supported. Apply the dark class to your root HTML element to enable dark mode:

<html lang="en" className="dark">

Or use a theme provider (like next-themes) for automatic system preference detection and manual toggling.

---

Documentation

Comprehensive documentation with interactive examples is available at https://tezosx-ui.vercel.app:

• Getting Started - Quick start guide
• Installation & Setup - Detailed setup instructions
• Theming Guide - Complete theming documentation
• Patterns & Examples - Common usage patterns
• Component Documentation - Individual component guides

Each page includes live examples, code snippets, and API references.

---

Tech Stack

• Framework: Next.js 16 + TypeScript
• Styling: Tailwind CSS v4
• Components: Radix UI primitives (for complex components)
• CLI: shadcn/ui
• Documentation: Next.js with interactive examples
• Deployment: Vercel

---

Built by Trilitech for the Tezos community