Table Component Prompt
Prompt intent
Generate Table implementations that follow Yoonet AU & NZ tokens, typography, spacing, and interaction conventions.
Output target
Table variants + usage-ready code
| Name | Status | Owner | Updated |
|---|---|---|---|
| Brand Refresh | Active | Ada Chen | 2d ago |
| API v3 Docs | In review | Max Park | 5d ago |
| Mobile App | Draft | Sara Lin | 1w ago |
table-prompt.txtComponent prompt
# Table — Yoonet AU & NZ Component Prompt
You are building a Table 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/table
- 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 { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from "@/components/ui/table"
<Table>
<TableHeader>
<TableRow>
<TableHead>Name</TableHead>
<TableHead>Status</TableHead>
<TableHead>Owner</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell>Brand Refresh</TableCell>
<TableCell><Badge variant="secondary">Active</Badge></TableCell>
<TableCell>Ada Chen</TableCell>
</TableRow>
</TableBody>
</Table>
```
## Rules
- TableHead: text-muted-foreground, font-medium
- Row hover: bg-muted/50
- Status cells use Badge component, never plain text with colour
- Body font (Inter), 14pxRecommended 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.