# New Component

Replace this description with a one-line summary of what the component does.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).





<ComponentThemeTabs>
  <ThemeTab name="mint">
    <PreviewWithCode name="new-component">
      <NewComponent className="p-6">
        New component
      </NewComponent>
    </PreviewWithCode>
  </ThemeTab>

  <ThemeTab name="berries">
    <PreviewWithCode name="new-component">
      <NewComponent className="p-6">
        New component
      </NewComponent>
    </PreviewWithCode>
  </ThemeTab>

  <ThemeTab name="citrine">
    <PreviewWithCode name="new-component">
      <NewComponent className="p-6">
        New component
      </NewComponent>
    </PreviewWithCode>
  </ThemeTab>

  <ThemeTab name="cinnamon">
    <PreviewWithCode name="new-component">
      <NewComponent className="p-6">
        New component
      </NewComponent>
    </PreviewWithCode>
  </ThemeTab>
</ComponentThemeTabs>

## Variants [#variants]

Add a description of each variant here.

<div className="flex flex-wrap gap-3 items-center my-6">
  <NewComponent className="p-4">
    Default
  </NewComponent>
</div>

## Props [#props]

| Prop        | Type              | Default | Description                  |
| ----------- | ----------------- | ------- | ---------------------------- |
| `className` | `string`          | —       | Additional CSS classes       |
| `children`  | `React.ReactNode` | —       | Content inside the component |

## Usage [#usage]

```tsx
import { NewComponent } from "@/components/ui/new-component";

<NewComponent>Content</NewComponent>
```

## Specs [#specs]

```md
# 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
```

## Installation [#installation]

<CommandBox componentName="new-component" className="mt-2" />