New Component

Copyimport { NewComponent } from "@/components/ui/new-component";
 
<NewComponent>Content</NewComponent>

Copy# Mint — NewComponent Specs
 
## Component
- name: new-component
- file: registry/mint/new-component.tsx
- installs to: components/ui/new-component.tsx
- dependencies: (none — add if needed, e.g. class-variance-authority, radix-ui)
 
## What is it
Replace this with a description of what the component does, when to use it,
and what problem it solves. Include any usage rules — e.g. "use X instead of Y
when the action changes state", "avoid using more than one per page", etc.
 
## Visual identity
Describe the visual character of this component in this theme.
- Shape/radius: (e.g. rounded-md, pill, square)
- Color role: (e.g. uses --primary for the active state)
- Weight: (e.g. medium presence, low visual noise)
- Key trait: (the one thing that makes it recognisable)
 
## Design tokens
--background: oklch(1 0 0)
--foreground: oklch(0.145 0 0)
--card: oklch(1 0 0)
--card-foreground: oklch(0.145 0 0)
--primary: oklch(0.5 0.14 155)
--primary-foreground: oklch(1 0 0)
--secondary: oklch(0.95 0.04 155)
--secondary-foreground: oklch(0.32 0.1 155)
--muted: oklch(0.96 0.02 155)
--muted-foreground: oklch(0.52 0.06 155)
--accent: oklch(0.92 0.05 155)
--accent-foreground: oklch(0.32 0.1 155)
--destructive: oklch(0.55 0.25 15)
--border: oklch(0.88 0.04 155 / 60%)
--input: oklch(0.88 0.04 155 / 60%)
--ring: oklch(0.5 0.14 155)
--radius: 1.25rem
 
## shadcn config (components.json)
- style: new-york
- rsc: true
- tsx: true
- baseColor: neutral
- cssVariables: true
- iconLibrary: lucide
- aliases:
  - components → @/components
  - ui → @/components/ui
  - utils → @/lib/utils
  - lib → @/lib
  - hooks → @/hooks
 
## Variants
- default → (describe the default appearance and use case)
- (add more variants as needed)
 
## States
- default:  (describe the resting appearance)
- hover:    (what changes on hover)
- focus:    (focus ring color and offset — always use --ring)
- active:   (pressed/active state if applicable)
- disabled: opacity-50, pointer-events-none
- loading:  (if applicable — Loader2Icon + animate-spin)
- empty:    (if the component has an empty state)
- error:    (if the component has an error state)
 
## Conventions
- Use cn() from @/lib/utils for all conditional classNames
- Props extend the native HTML element (e.g. HTMLDivElement)
- Tailwind CSS 4 utility classes only — no inline styles
- No external dependencies unless declared in registry.json
- One default variant per visual group maximum
- Spacing between adjacent instances: gap-2 (8px) minimum
- Interactive elements require aria-label when text is absent