Styling

The scaffold ships Tailwind CSS and @murasakijs/ui — a React Aria-based component library styled with the familiar cn() + class-variance-authority conventions. React Aria provides accessible interaction, focus management, keyboard navigation, and overlay positioning; Murasaki supplies the visual system and compatibility API. Every component it ships is documented, live, in the Components section — this guide only covers how the library is wired into a scaffolded app.

Setup

Import the stylesheet once (the scaffold already does this in the root layout), and extend your Tailwind config with the shared preset:

import '@murasakijs/ui/styles.css'
import './globals.css'

import type { Config } from 'tailwindcss'

export default {
  presets: [require('@murasakijs/ui/tailwind-preset')],
  content: [
    './src/**/*.{ts,tsx}',
    './node_modules/@murasakijs/ui/dist/**/*.js',
  ],
  darkMode: ['selector', '[data-theme="dark"]'],
} satisfies Config

Components

Import components directly from @murasakijs/ui:

import { Button, Card, CardHeader, CardTitle, CardContent } from '@murasakijs/ui'

function Example() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Try it out</CardTitle>
      </CardHeader>
      <CardContent>
        <Button variant="outline">Click me</Button>
      </CardContent>
    </Card>
  )
}

The package currently ships:

• Layout & content — Card, Separator, Accordion, Tabs, ScrollArea, Table, Skeleton
• Forms & inputs — Button, Input, Textarea, Label, Checkbox, Switch, RadioGroup, Select
• Overlays — Dialog, Sheet, Popover, Tooltip, DropdownMenu, Command (a command palette)
• Feedback — Alert, Badge, Progress, Toast / Toaster (+ useToast)
• Misc — Avatar, cn (the clsx + tailwind-merge class helper)

Button supports variant (default / secondary / outline / ghost / destructive / link) and size (default / sm / lg / icon) props, plus asChild to render as a different element through Murasaki's local compatibility slot — the same pattern as the rest of the library.

Every one of these is documented on its own page under Components, with a live, interactive preview and the full prop table — not just the short list above.

Next