shadcn-ui-conventions

UI コンポーネントの規約

components/ui ディレクトリでは、プロジェクトの他の部分とは異なる規約を使用します。shadcn/ui のパターンを維持するため、Biome/Ultracite のリンティング対象から除外されています。

このスキルを使用する場面

• 新しい UI コンポーネントを作成するとき
• 既存の shadcn/ui コンポーネントを変更するとき
• 8 ビットのレトロなスタイルを実装するとき
• コンポーネントのインポートや型を扱うとき

リンティング

• Biome はこのディレクトリを除外します：biome.jsonc の includes に "!components/ui" が設定されています
• Ultracite によるフォーマットは行いません：コンポーネント独自のパターンを使用します
• 必要に応じて手動でリンティングを実行します：npx biome check components/ui/

インポートのパターン

ベースコンポーネント（例：button.tsx）：

import type * as React from "react";

import { Slot } from "@radix-ui/react-slot";
import { type VariantProps, cva } from "class-variance-authority";

import { cn } from "@/lib/utils";

8bit コンポーネント（例：8bit/button.tsx）：

import { type VariantProps, cva } from "class-variance-authority";

import { cn } from "@/lib/utils";

import { Button as ShadcnButton } from "@/components/ui/button";

import "@/components/ui/8bit/styles/retro.css";

インポートの順序：

1. 外部ライブラリ（class-variance-authority、@radix-ui）
2. 内部ユーティリティ（@/lib/utils）
3. ベースコンポーネントのエイリアス（@/components/ui/component）
4. レトロなスタイルシート（@/components/ui/8bit/styles/retro.css）

型定義

ベースコンポーネント：関数とインラインの props 型を使用します

function Button({
  className,
  variant,
  ...props
}: React.ComponentProps<"button"> &
  VariantProps<typeof buttonVariants> & {
    asChild?: boolean;
  })

8bit コンポーネント：インターフェースを個別にエクスポートします

export interface BitButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  asChild?: boolean;
  ref?: React.Ref<HTMLButtonElement>;
}

function Button({ children, asChild, ...props }: BitButtonProps)

ref の処理

ベースコンポーネント：React.forwardRef を使用します

const DialogOverlay = React.forwardRef<
  React.ComponentRef<typeof DialogPrimitive.Overlay>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Overlay ref={ref} {...props} />
));
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;

8bit コンポーネント：ref プロパティを使用します（React 19 のパターン）

export interface BitButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  ref?: React.Ref<HTMLButtonElement>;
}

function Button({ ref, ...props }: BitButtonProps) {
  return <ShadcnButton ref={ref} {...props} />
}

8bit コンポーネントのパターン

レトロ CSS のインポート：すべての 8bit コンポーネントで必須です

import "@/components/ui/8bit/styles/retro.css";

ベースコンポーネントのエイリアス：ベースコンポーネントをエイリアス付きでインポートします

import { Button as ShadcnButton } from "@/components/ui/button";

バリアントの上書き：8bit バリアントでは最小限のスタイルを指定することがよくあります（枠線や色は CSS で処理します）

export const buttonVariants = cva("", {
  variants: {
    variant: {
      default: "bg-foreground",
      // ...
    },
  },
});

参考ファイル

• components/ui/button.tsx - ベースコンポーネントの例
• components/ui/8bit/button.tsx - 8bit ラッパーの例
• components/ui/dialog.tsx - Radix プリミティブを使用した複雑なベースコンポーネント