スタイリング

スキャフォールドには Tailwind CSS と @murasakijs/ui が同梱されています — React Aria を基盤とし、cn() + class-variance-authority の慣習でスタイリングされたコンポーネントライブラリです。アクセシブルな操作、フォーカス管理、キーボード操作、オーバーレイ配置を React Aria が提供し、Murasaki がビジュアルシステムと互換 API を提供します。すべてのコンポーネントは、Components セクションでライブに文書化されています — このガイドでは、ライブラリがスキャフォールドされたアプリにどう組み込まれているかだけを扱います。

セットアップ

スタイルシートを一度インポートし（スキャフォールドはすでにルートレイアウトでこれを行っています）、共有プリセットで Tailwind の設定を拡張します:

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

コンポーネント

コンポーネントは @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>
  )
}

現時点でパッケージが提供しているのは:

• レイアウト & コンテンツ — Card、Separator、Accordion、Tabs、ScrollArea、Table、Skeleton
• フォーム & 入力 — Button、Input、Textarea、Label、Checkbox、Switch、RadioGroup、Select
• オーバーレイ — Dialog、Sheet、Popover、Tooltip、DropdownMenu、Command（コマンドパレット）
• フィードバック — Alert、Badge、Progress、Toast / Toaster（+ useToast）
• その他 — Avatar、cn（clsx + tailwind-merge のクラスヘルパー）

Button は variant（default / secondary / outline / ghost / destructive / link）と size（default / sm / lg / icon）の props に加えて、Murasaki 独自の互換 Slot を通じて別の要素としてレンダリングする asChild をサポートしています — ライブラリの他の部分と同じパターンです。

これらすべては、Components の下でそれぞれ専用ページとして文書化されており、上のリストだけでなく、ライブでインタラクティブなプレビューと完全な props テーブルが用意されています。

次へ