Dùng component

Import component

Sau npx werewolf-ui add card button field input, các file nằm trong alias UI của bạn, mặc định là @/components/ui. Import như mọi file khác trong app.

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Field, FieldControl, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

export function ProjectCard() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Project</CardTitle>
        <CardDescription>Last edited 2 hours ago.</CardDescription>
      </CardHeader>
      <CardContent>
        <Field>
          <FieldLabel>Name</FieldLabel>
          <FieldControl>
            <Input placeholder="My project" />
          </FieldControl>
        </Field>
      </CardContent>
      <CardFooter>
        <Button variant="secondary">Cancel</Button>
        <Button>Save</Button>
      </CardFooter>
    </Card>
  )
}

Code là của bạn

Cứ sửa file component khi cần. Chạy lại add sẽ bỏ qua file giống hệt và báo xung đột với mọi file khác nội dung, nên chỉnh sửa của bạn không bao giờ mất. Muốn lấy bản mới, xem phần khác biệt rồi truyền đúng đường dẫn đó vào --overwrite.

npx werewolf-ui add button --overwrite src/components/ui/button.tsx

Mỗi vùng một kích thước

Control nhận size: sm, md (mặc định), lg hoặc xl. Chọn kích thước cho cả vùng, không chọn riêng từng control, và không đặt hai cỡ liền kề trong cùng một hàng. Trên màn hình cảm ứng md, lg và xl tự to lên, nên đừng đổi kích thước theo breakpoint.

<div className="flex gap-sm">
  <Button size="sm" variant="ghost">Filter</Button>
  <Button size="sm" variant="ghost">Sort</Button>
</div>

<Button size="xl" fullWidth>Continue</Button>

Style bằng class token

Với layout của riêng bạn, dùng các class Tailwind mà stylesheet token thêm vào. Class màu là tên utility cộng tên token bỏ color-: bg-background-surface, text-text-secondary, border-border. Khoảng cách là p-md, gap-sm, mt-xs; góc bo là rounded-element và rounded-container; chữ là text-sm hoặc text-heading-3.

<section className="rounded-container border border-border bg-background-surface p-lg">
  <h2 className="text-heading-3 text-text-primary">Billing</h2>
  <p className="mt-xs text-sm text-text-secondary">Your plan renews on May 1.</p>
</section>

Bảng màu, bo góc, đổ bóng và độ đậm chữ gốc của Tailwind đã bị xóa, nên class bảng màu (tên màu kèm số), rounded-lg và font-bold không sinh ra CSS. Không bao giờ viết cứng màu, dù là mã hex hay hàm màu. Nếu không có token nào hợp, hãy báo lại thay vì tự đặt tên mới. Trang Token liệt kê mọi tên.

Chữ trên nền màu

• Trên nền accent, chữ và icon chỉ dùng text-text-on-accent và text-icon-on-accent. Với accent mặc định, text-text-primary trên bg-accent sẽ biến mất ở chế độ tối.
• Badge, tag và banner dùng nền nhạt kèm chữ cùng màu: bg-background-green text-text-green.
• Trạng thái hover và nhấn là lớp phủ trên nền thường (hover:overlay-hover active:overlay-pressed cùng transition-control), không phải màu mới.
• Làm chữ nhạt hơn bằng text-text-secondary hoặc text-text-tertiary, không bao giờ bằng opacity.

Chế độ tối và sáng

Mặc định là tối. Đặt data-theme="light" trên <html> cho cả trang sáng, hoặc trên một phần tử cho một vùng. Token tự đổi theo, nên không bao giờ viết biến thể dark:.

<html lang="en" data-theme="light">

<div data-theme="dark">Always dark, even on a light page.</div>

Thêm class cho component

Mọi component đều nhận className. Item utils mà add cài có hàm cn, gộp class và hiểu tên class token, nên class của bạn thắng class mặc định của component.

import { cn } from "@/lib/utils"

<Button className={cn("w-full", isPrimary && "shadow-med")}>Save</Button>

Trạng thái đang tải

Không bao giờ để trống nội dung khi đang tải nội dung kế tiếp. Giữ nó trên màn hình bằng prop pending (Table, TabsContent), prop này làm mờ nội dung và đánh dấu đang bận. Chỉ dùng Skeleton cho lần tải đầu, có hình giống nội dung, qua useSkeletonDelay để nó hiện sau khoảng 150ms và ở lại ít nhất 300ms.

Icon

Component và docs dùng Tabler Icons, nhưng bộ icon nào cũng được. Luôn truyền size: 16px trong control sm, md và lg, 20px trong control xl và điều hướng. Xem Icon.

Kiểm tra code

Chạy lint sau khi bạn hoặc agent sửa UI. Lint báo màu viết cứng, class Tailwind đã bị xóa, biến thể dark:, token không tồn tại và khoảng cách tùy ý, còn --fix áp dụng các chỉnh sửa nó chứng minh được.

npx werewolf-ui lint src --fix