@raypx/ui

@raypx/ui is the shared component library for Raypx. It is built on shadcn/ui and provides a collection of accessible, composable React components with Tailwind CSS 4 styling.

Adding Components

Use the shadcn CLI to add new components to the package:

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

The -c packages/ui flag targets the components.json configuration in packages/ui.

Updating Components

To update existing components to their latest shadcn versions:

pnpm run bump-ui

Import Patterns

The package exports components, hooks, utilities, and styles through path aliases defined in package.json:

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

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

// Hooks
import { useTheme } from "@raypx/ui/hooks/use-theme"

// Global styles
import "@raypx/ui/styles/globals.css"

Package Exports

The package.json defines the following export map:

Component List

The package includes over 50 components. Some of the most commonly used:

• Form: Button, Input, Textarea, Label, Field, Select, Checkbox, Switch, RadioGroup, NativeSelect, InputOTP, Combobox
• Layout: Card, Tabs, Separator, Sheet, Sidebar, Resizable, ScrollArea
• Feedback: Alert, AlertDialog, Sonner (toast), Skeleton, Spinner, Progress
• Navigation: Breadcrumb, NavigationMenu, Menubar, Pagination, DropdownMenu, ContextMenu, HoverCard, Command
• Data Display: Table, Badge, Avatar, Calendar, Chart, Carousel, Tooltip, Popover, Drawer, Collapsible, Accordion
• Theming: ThemeProvider, Direction

Tailwind CSS 4 Integration

The package uses Tailwind CSS 4 with CSS variables for theming. The global stylesheet (src/styles/globals.css) defines CSS custom properties for colors, spacing, and radii.

Theming with next-themes

Dark/light mode theming is handled by next-themes via the ThemeProvider component:

import { ThemeProvider } from "@raypx/ui/components/theme-provider"

function App({ children }) {
  return (
    <ThemeProvider attribute="class" defaultTheme="dark" enableSystem={false}>
      {children}
    </ThemeProvider>
  )
}

components.json

The shadcn configuration is stored 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" -- uses the base-nova shadcn style variant
• rsc: false -- components are client-side React components (no React Server Components)
• baseColor: "neutral" -- neutral base color palette
• iconLibrary: "lucide" -- uses Lucide React icons