YoonetYoonet

Select Component Prompt

Prompt intent

Generate Select implementations that follow Yoonet AU & NZ tokens, typography, spacing, and interaction conventions.

Output target

Select variants + usage-ready code

select-prompt.txtComponent prompt
# Select — Yoonet AU & NZ Component Prompt

You are building a Select component for Yoonet AU & NZ.
Use shadcn/ui with the CSS variables below applied to :root.

## Active Brand Tokens
--primary: hsl(231 100% 77%);         /* #8A9EFF */
--primary-foreground: hsl(0 0% 100%); /* #fff */
--secondary: hsl(183 70% 76%);
--secondary-foreground: hsl(235 22% 12%);
--destructive: hsl(341 100% 70%); /* #FF6495 */
--radius: 0.5rem;
--font-heading: var(--font-heading);  /* Manrope */
--font-body: var(--font-body);        /* Inter */

## Typography
- Heading font: Manrope (weights 700, 800)
- Body / UI font: Inter (weights 400, 700)

## Code Conventions
- Import from @/components/ui/select
- Use cn() from @/lib/utils for conditional classes
- "use client" only when state or events are needed
- No inline hex values — always reference CSS variables
## Usage
```tsx
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

<Select>
  <SelectTrigger>
    <SelectValue placeholder="Select status" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="draft">Draft</SelectItem>
    <SelectItem value="review">In review</SelectItem>
    <SelectItem value="active">Active</SelectItem>
    <SelectItem value="archived">Archived</SelectItem>
  </SelectContent>
</Select>
```

## Rules
- Trigger uses var(--input) border, var(--background) fill
- Selected item highlighted with var(--accent)
- Always include a meaningful placeholder
- Body font (Inter) for option text

Recommended workflow

- Select your brand and component variant first.

- Paste this prompt in your AI tool and request one state at a time.

- Validate spacing, contrast, and interaction states before shipping.