スタイリング

スキャフォールドには Tailwind CSS と @murasakijs/ui が同梱されています — Radix プリミティブの上に構築された shadcn/ui スタイルのコンポーネントライブラリで、 shadcn/ui ユーザーがすでに知っている cn() + class-variance-authority の慣習でスタ イリングされています。それが提供するすべてのコンポーネントは、 Components セクションでライブに文書化されています — このガイド では、ライブラリがスキャフォールドされたアプリにどう組み込まれているかだけを扱います。

import { Button } from "@murasakijs/ui";export function ButtonDemo() {return <Button>Button</Button>;}

セットアップ

スタイルシートを一度 import し(スキャフォールドはすでにルートレイアウトでこれを行って います)、共有プリセットで 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 します:

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 に加え て、別の要素としてレンダーするための asChild（Radix の Slot）をサポートしています — ライブラリの他の部分と同じパターンです。

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

次へ