Get Started | Leguan UI

Prerequisites

You need a React project with Tailwind CSS. The shadcn CLI is used to add registry files into your app.

Optional: Initialize shadcn

Skip this if your project already has shadcn configured. For a new app, run init once to set up paths, aliases, and globals.

Terminal

pnpm dlx shadcn@latest init

Registry setup

1. Add the Leguan registry

Terminal

pnpm dlx shadcn@latest registry add @leguan=https://leguan-ui.pages.dev/r/{name}.json

Namespace: @leguan. URL template: https://leguan-ui.pages.dev/r/{name}.json

2. Install foundation

Foundation ships shared helpers most components depend on. Prefer the direct URL so dependencies resolve without extra registry configuration.

Terminal

pnpm dlx shadcn@latest add https://leguan-ui.pages.dev/r/foundation.json

3. Install fonts

Leguan UI uses Inter for body text, Rubik for headings, and Geist Mono for code and charts. Install the fonts registry item, then apply the font variables on your root layout. All three load from Google Fonts through next/font.

Terminal

pnpm dlx shadcn@latest add https://leguan-ui.pages.dev/r/fonts.json

app/layout.tsx

import { leguanFontVariables } from "@/lib/fonts"

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={`${leguanFontVariables} h-full antialiased`}>
      <body>{children}</body>
    </html>
  )
}

Install a component

Direct URL install

Works for any catalog slug. Each component page shows the exact command for that entry.

Terminal

pnpm dlx shadcn@latest add https://leguan-ui.pages.dev/r/buttons.json

Registry shorthand

After adding the registry, you can install with the namespace prefix.

Terminal

pnpm dlx shadcn@latest add @leguan/buttons

Next steps

Browse the component catalog for live previews and manual copy paths. For agent-oriented machine readable docs, open AGENTS.md. See Inspiration for design credits and third-party references.