What is Clinia UI?

Clinia UI is a design system built from tailwindcss and shadcn. It encodes Clinia's brand guidelines — color, typography, and motion — into reusable components and design tokens so that teams can build consistent, accessible interfaces without reinventing the wheel on every project.

Components are distributed as source files through a shadcn-compatible registry at https://ui.clinia.dev/r. This means you own the code: when you add a component, it lands in your repository and you can modify it freely.

Key Features

• 24 brand swatches — a carefully curated color palette grounded in Clinia's three anchor colors: Vital (#ff5c00), Infinite (#1a1a1e), and Serene (#fffdf9).
• shadcn-compatible registry — install components with the standard npx shadcn@latest add workflow. Standard shadcn components (button, card, input, etc.) automatically inherit Clinia tokens.
• Base UI primitives — unstyled, accessible headless components from Base UI underpin interactive elements. Clinia UI does not use Radix UI.
• WCAG AA compliance — all color pairings and interactive states are tested against contrast requirements.
• Tailwind v4 — tokens are expressed as CSS custom properties bridged into Tailwind via @theme inline, so you can use utility classes like bg-primary or text-foreground anywhere.

Quick Start

Add your first component to a Next.js project:

pnpm dlx shadcn@latest init https://ui.clinia.dev/r/base.json
pnpm dlx shadcn@latest add @clinia/theme
pnpm dlx shadcn@latest add button

Then use the component in your app:

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

export default function Page() {
  return (
    <Button variant="default">Get started</Button>
  )
}

The init command configures your components.json with the base-maia style, hugeicons icon library, and the @clinia registry namespace. Components are then installed via the standard shadcn CLI. See Installation for the full setup guide.