Raypx

Raypx uses shadcn/ui for its component library. Components live in packages/ui/ and are shared across the monorepo as the @raypx/ui workspace package.

Configuration

The shadcn/ui configuration is in packages/ui/components.json:

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "base-nova",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "src/styles/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "iconLibrary": "lucide",
  "aliases": {
    "components": "@raypx/ui/components",
    "utils": "@raypx/ui/lib/utils",
    "hooks": "@raypx/ui/hooks",
    "lib": "@raypx/ui/lib",
    "ui": "@raypx/ui/components"
  }
}

Key settings:

Style: base-nova — the newer shadcn/ui base style.
RSC: false — Raypx does not use React Server Components.
CSS Variables: true — colors are defined as CSS custom properties.
Base Color: neutral — neutral color palette.
Icon Library: lucide — Lucide React icons.

Adding Components

Use the shadcn CLI to add components to the packages/ui workspace:

pnpm dlx shadcn@latest add <component> -c packages/ui

For example, to add the dialog component:

pnpm dlx shadcn@latest add dialog -c packages/ui

The -c packages/ui flag tells the CLI to use the components.json in the packages/ui directory.

Adding Multiple Components

pnpm dlx shadcn@latest add button card dialog -c packages/ui

Updating All Components

To update all shadcn/ui components to their latest versions:

pnpm run bump-ui

This runs pnpm dlx shadcn@latest add --all --overwrite -c packages/ui, which fetches the latest source for every installed component and overwrites the local files.

The bump-ui command overwrites component files. If you have custom modifications to any component, back them up first or use version control to review the diff.

Import Pattern

Import components from the @raypx/ui workspace package:

import { Button } from "@raypx/ui/components/button"
import { Card, CardHeader, CardContent } from "@raypx/ui/components/card"
import { Dialog, DialogTrigger, DialogContent } from "@raypx/ui/components/dialog"

The import path follows the aliases.components setting in components.json: @raypx/ui/components/<name>.

Utility Function

The cn utility for merging class names is available from:

import { cn } from "@raypx/ui/lib/utils"

This is a thin wrapper around clsx and tailwind-merge, used by all shadcn/ui components internally.

Customizing Styles

shadcn/ui components are styled entirely through CSS variables. To change the look of a component, edit the CSS custom properties in packages/ui/src/styles/globals.css:

:root {
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --radius: 0.625rem;
}

Common customizations:

What to Change	Variables
Primary color	`--primary`, `--primary-foreground`
Border radius	`--radius` (affects all `radius-*` tokens)
Background color	`--background`
Destructive color	`--destructive`
Sidebar colors	`--sidebar`, `--sidebar-primary`, etc.

Both light and dark mode have their own set of variables. Make sure to update both :root and .dark selectors when changing colors.

File Structure

packages/ui/
  components.json
  src/
    components/
      button/
        button.tsx
        index.ts
      card/
        card.tsx
        card-header.tsx
        card-content.tsx
        index.ts
      ...
    lib/
      utils.ts
    styles/
      globals.css
    hooks/
      ...

Each component directory contains the component implementation and an index.ts barrel export.

shadcn/ui

On this page