@salonradar/ui

The SalonRadar design system — a warm coral + cream theme built on shadcn/ui (new-york style), Radix UI, and Tailwind CSS v4. Ships ~55 accessible React components, design tokens, light/dark themes, and a ThemeProvider.

Installation

npm install @salonradar/ui
# peer dependencies
npm install react react-dom

This package targets bundler-based React apps (Next.js, Vite, etc.) and Tailwind CSS v4.

Setup

Import the theme stylesheet once at your app's entry (it defines the design tokens, base layer, and fonts hookup):

import "@salonradar/ui/styles.css"

With Tailwind CSS v4, also tell Tailwind to scan this package so its component class names aren't purged. In your global CSS, after @import 'tailwindcss':

@import 'tailwindcss';
@import '@salonradar/ui/styles.css';
@source '../node_modules/@salonradar/ui/dist';

Wrap your app in the provider for light/dark theming:

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

export default function App({ children }: { children: React.ReactNode }) {
  return (
    <ThemeProvider attribute="class" defaultTheme="light" enableSystem>
      {children}
    </ThemeProvider>
  )
}

The theme expects the Geist and Instrument Serif fonts to be loaded by the host app (e.g. via next/font or <link>), mapped to --font-sans and --font-serif.

Usage

import { Button } from "@salonradar/ui/button"
import { Card, CardHeader, CardTitle, CardContent } from "@salonradar/ui/card"

export function Example() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Book your appointment</CardTitle>
      </CardHeader>
      <CardContent>
        <Button>Reserve</Button>
      </CardContent>
    </Card>
  )
}

Every component is also available from the barrel entry:

import { Button, Card, Badge, Input } from "@salonradar/ui"

License

MIT