Installation & Setup

Complete guide to installing and configuring tezosx-ui components in your project.

Initialize Your Project

If you don't have a Next.js project yet, create one:

npx create-next-app@latest my-app --typescript --tailwind --app

Make sure to select TypeScript and Tailwind CSS when prompted.

Configure shadcn CLI

Initialize shadcn in your project (if not already done):

npx shadcn@latest init

This will create a components.json file. Make sure it has the following configuration:

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "src/app/globals.css",
    "baseColor": "slate",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui"
  }
}

Install Components

Install components from the tezosx-ui registry:

Single component:

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

Multiple components:

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

What gets installed?

The CLI automatically installs the component file, required dependencies, and the utility file (lib/utils.ts). No manual setup needed!

Setup Theme Provider (Optional)

For dark mode support, wrap your app with the ThemeProvider:

1. Install next-themes:

npm install next-themes

2. Create theme provider:

// components/theme-provider.tsx
"use client";

import * as React from "react";
import { ThemeProvider as NextThemesProvider } from "next-themes";

export function ThemeProvider({
  children,
  ...props
}: React.ComponentProps<typeof NextThemesProvider>) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
}

3. Wrap your app:

// app/layout.tsx
import { ThemeProvider } from "@/components/theme-provider";

export default function RootLayout({ children }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}

Configure Colors (Optional)

Customize colors by overriding CSS variables in your globals.css:

/* app/globals.css */
@layer base {
  :root {
    --primary: 219 100% 53%; /* Tezos blue */
    --secondary: 257 52% 51%; /* Tezos purple */
    /* Override other colors as needed */
  }
  
  .dark {
    --background: 180 25% 2%; /* Dark mode background */
    --card: 0 0% 13%; /* Dark mode cards */
  }
}

See the Theming Guide for complete color customization options.

Verify Installation

Test that everything is working by creating a simple page:

// app/page.tsx
import { Button } from "@/components/ui/button";

export default function Home() {
  return (
    <div className="p-8">
      <Button variant="primary">Hello tezosx-ui!</Button>
    </div>
  );
}

If the button renders correctly, you're all set! 🎉

Troubleshooting

Component not found

Make sure the component was installed correctly. Check that the file exists in components/ui/ and that your import path matches your components.json aliases.

Styles not applying

Ensure Tailwind CSS is properly configured and that your tailwind.config.ts includes the component paths. Also verify that globals.css is imported in your root layout.

TypeScript errors

Make sure all dependencies are installed. Run npm install to ensure all packages are up to date. Check that your TypeScript version is 5.0+.

Dark mode not working

Verify that the ThemeProvider is set up correctly and that the dark class is being applied to the html element. Check browser console for any errors.

tezosx-ui