App getting started

Why Clinia product apps run the Luma style, and how to set one up.

Installation lists what a web project needs before it starts. This page covers how product apps differ in configuration once the project base has been configured.

For a marketing site, see Marketing getting started.

Luma, for product

All product apps run shadcn's Luma style. Clinia's app is where users create workspaces, monitor usage and subscribe to paid product tiers: configuration screens, usage views and dashboards used every day.

This selected style is optimized for this use with:

Soft elevation over loud shadows, calm motion over flourish: keeps attention on the data, not the chrome.
Sentence-case controls, efficient spacing: scans fast on dense, repeat-use screens.
Rounded geometry: reads as approachable and calm, right for a tool users return to daily.

1. Initialize with the Clinia base

Run shadcn init pointing directly at the Clinia base registry item:

bash

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

This creates a components.json at the root of your project configured with:

style set to the shadcn style for the surface, base-luma for product apps
@clinia namespace pre-registered so you can install Clinia registry items by name

It also installs the icons item that the base depends on. That lands Clinia's utility icons under components/ui/icons/ (one module per icon).

See Iconography for the convention.

Your components.json will look similar to this after initialization:

json

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "base-luma",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "css": "app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true
  },
  "iconLibrary": "lucide",
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "registries": {
    "@clinia": {
      "url": "https://ui.clinia.dev/r/{style}/{name}.json"
    }
  }
}

2. Install the Clinia theme

The theme registry item installs the @clinia/tailwindcss package and writes the necessary imports into your globals.css:

bash

pnpm dlx shadcn@latest add @clinia/theme

After running this, your globals.css will contain:

css

@import "@clinia/tailwindcss/fonts";
@import "@clinia/tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";

The first import declares the brand fonts (step 3). The second brings in all design tokens (colours, typography, spacing, ...). The last two bring the animations the components use: dialogs, popovers and menus that fade in, and accordions that slide open.

3. Host the brand fonts

@clinia/tailwindcss declares the fonts but ships no font files: the CircularXX and NaN Serf B licenses don't allow redistribution. The theme already imports the declarations. Get the seven licensed .woff2 files from the brand drive and put them in public/fonts/. Until they're there, text falls back to the system fonts.

4. Add the brand assets

Run the following command to import the required logos:

bash

pnpm dlx shadcn@latest add @clinia/brand-logo
curl -LO https://ui.clinia.dev/favicon/favicon.zip
unzip favicon.zip -d public/favicon
cp public/favicon/light/favicon.ico public/favicon.ico

brand-logo: the logomark and logotype, as SVGs in public/. See Logo.
favicon.zip: the light and dark tab icons, plus the app and manifest icons. See Favicon for the <link> tags.

5. Add components

Add shadcn components, based on what your app needs. They will inherit Clinia tokens automatically from the configuration run above:

bash

pnpm dlx shadcn@latest add @clinia/button @clinia/card @clinia/input

This lands the component source code in components/ui/. To prevent style drift, keep Clinia's colour and accessibility branding choices in these files as shipped when adding. If a component needs to change, request it.

Every component in Components ships from @clinia: Luma, wired to the icon modules, with Clinia's contrast fixes (solid input borders, visible selected states, no Trust fill behind small text). A component Clinia doesn't list isn't installed from shadcn: request it.