shadcn-ui-component

Files (1)

• SKILL.md

SKILL.md (first lines)

# shadcn/ui Component Creation

## When to Use

- Adding a new reusable UI component to `src/shared/components/ui/`
- Extending an existing component with new variants
- Understanding the cva + cn + Tailwind v4 pattern

## Technology Stack

| Tool                       | Usage                                     |
| -------------------------- | ----------------------------------------- |
| `@base-ui/react`           | Primitives (Button, Dialog, Select, etc.) |
| `class-variance-authority` | Component variant definitions             |
| `clsx` + `tailwind-merge`  | Class merging via `cn()` helper           |
| Tailwind CSS v4            | Utility-first styling                     |
| `lucide-react`             | Icons                                     |

## cn() Utility

Defined in `src/shared/lib/utils.ts`:

```typescript
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}
```

Always use `cn()` for combining class names — it handles conflicts and conditional classes.

## Component Template

```typescript
import { Component as ComponentPrimitive } from "@base-ui/react/component"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "../../lib/utils"

const componentVariants = cva(
  // Base styles — always present
  "inline-flex items-center rounded-lg text-sm font-medium transition-all outline-none",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground",
        secondary: "bg-secondary text-secondary-foreground",
        ghost: "hover:bg-muted hover:text-foreground",
      },
      size: {
        default: "h-8 px-3",
        sm: "h-7 px-2 text-xs",
        lg: "h-9 px-4",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

function Component({
  className,
  variant,
  size,
  ...props
}: ComponentPrimitive.Props & VariantProps<typeof componentVariants>) {
  return (
    <ComponentPrimitive
      data-slot="component"
      className={cn(componentVariants({ variant, size, className }))}
      {...props}
    />
  )
}

export { Component, componentVariants }
```

## Tailwind v4 Specifics

This codebase uses **Tailwind CSS v4** (not v3). Key differences:

### Theme Variables

Defined in `src/index.css` using `@theme inline`:

```css
@theme inline {
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --radius-sm: calc(var(--radius) * 0.6);
}
```

Refer to theme variables as `bg-primary`, `text-primary-foreground`, `rounded-sm`.

### Dark Mode

```css
@custom-variant dark (&:is(.dark *));
```

Use `.dark` class-based dark mode. Components don't need `dark:` prefixes for CSS variables — they switch automatically. Use `dark:` only for hardcoded values like `dark:border-white/10`.

### Focus Ring Pattern

```typescript
"focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50";
```

### Disabled State

```typescript
"disabled:pointer-events-none disabled:opacity-50";
```

From NarihitoM/MultimateAi, MIT.

More from NarihitoM/MultimateAi