Getting Started

Welcome to tezosx-ui! Learn how to get started with Trilitech's design system for Tezos marketing experiences.

What is tezosx-ui?

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:

Consistency

Unified design language across all Tezos marketing experiences

Accessibility

Built with accessibility in mind using Radix UI primitives

Scalability

Dynamic theming system for multi-brand flexibility

Type Safety

Full TypeScript support with autocomplete and type checking

Prerequisites

Before you begin, make sure you have the following set up:

•Next.js 13+ with App Router (or React 18+ for other frameworks)
•TypeScript (recommended for best experience)
•Tailwind CSS configured in your project
•Node.js 18+ installed

Quick Start

Get up and running in minutes with these simple steps:

1. Install a component

Use the shadcn CLI to install any component from the registry:

npx shadcn@latest add https://tezosx-ui.vercel.app/registry/tezosx/button.json

2. Import and use

Import the component in your React component:

import { Button } from "@/components/ui/button";

export default function Page() {
  return <Button variant="primary">Click me</Button>;
}

3. Customize (optional)

Override colors using CSS variables in your globals.css:

:root {
  --primary: 219 100% 53%; /* Your brand color */
}

Next Steps

Installation Guide

Detailed setup instructions and configuration

Theming Guide

Learn about the dynamic color system

Patterns & Examples

Common patterns and real-world examples

Components

Browse all available components

Need Help?

If you run into any issues or have questions:

•Check the Installation Guide for detailed setup instructions
•Browse Patterns & Examples for common use cases
•Visit our GitHub repository for issues and discussions