Getting started

Start from a shadcn project

Any React 19 app with Tailwind CSS v4 works; the examples assume Next.js App Router. Initialize shadcn with the Base UI component library.

$npx shadcn@latest init -b base -p nova

Register the @particular namespace

Items reference each other as @particular/…, so the namespace has to be known before the first install.

$npx shadcn@latest registry add @particular=https://ui.particular.tech/r/{name}.json

This writes the following to components.json:

{
  "registries": {
    "@particular": "https://ui.particular.tech/r/{name}.json"
  }
}

Install the theme and providers

The theme sets every color token for light and dark mode, the fonts, and the radius. Providers wires up theme switching, tooltips, and toasts.

$npx shadcn@latest add @particular/theme @particular/providers

Load Geist and wrap your app

The theme reads --font-geist-sans and --font-geist-mono and falls back to system fonts.

import { Geist, Geist_Mono } from "next/font/google"

import { Providers } from "@/components/providers"
import "./globals.css"

const geistSans = Geist({ variable: "--font-geist-sans", subsets: ["latin"] })
const geistMono = Geist_Mono({ variable: "--font-geist-mono", subsets: ["latin"] })

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  )
}

Add components

Add what you need, or everything at once with @particular/all. Each item pulls in the registry items and npm packages it depends on.

$npx shadcn@latest add @particular/button @particular/status-indicator @particular/log-viewer

Browse the components and blocks. Blocks install as components under components/; you render them from your own pages and pass data and callbacks as props.