ฉันจำเป็นต้องติดตั้ง shadcn/ui ก่อนหรือไม่?

จำเป็น เครื่องมือนี้สร้างโค้ดที่ถือว่าคุณได้กำหนดค่า `shadcn-ui` CLI และติดตั้ง primitives ที่จำเป็นผ่าน `npx shadcn-ui@latest add`

โค้ดเข้ากันได้กับ Next.js หรือไม่?

เข้ากันได้ ผลลัพธ์ที่สร้างขึ้นใช้มาตรฐาน React และ Tailwind CSS ที่ทำงานใน Next.js, Vite และเฟรมเวิร์กสมัยใหม่อื่นๆ

รองรับ TypeScript หรือไม่?

ตัวสร้างจะจัดเตรียมโค้ด TypeScript-first โดยค่าเริ่มต้น รวมถึงประเภทที่จำเป็นสำหรับ props และ component refs

ฉันสามารถปรับแต่งสไตล์ได้หรือไม่?

ผลลัพธ์ใช้ Tailwind CSS utility classes คุณสามารถแก้ไข classes ที่สร้างขึ้นได้โดยตรงใน editor ของคุณเพื่อให้ตรงกับข้อกำหนดการออกแบบเฉพาะของคุณ

ตัวจัดรูปแบบและโค้ด

ตัวสร้างคอมโพเนนต์ shadcn/ui

Compose shadcn primitives into ready-to-paste components.

Runs in your browser

Component name

shadcn primitives

UserCard.tsx

import { Card } from "@/components/ui/card";
import { Avatar } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";

interface UserCardProps {
  title: string;
  description?: string;
}

export function UserCard({ title, description }: UserCardProps) {
  return (
    <Card className="p-4">
      <Avatar className="mb-3 h-12 w-12" />
      <h3 className="font-semibold">{title}</h3>
      {description && <p className="mt-1 text-sm text-muted-foreground">{description}</p>}
      <Button className="mt-3">Action</Button>
    </Card>
  );
}

lines: 20chars: 568size: 568 B

live

หมายเหตุจากบรรณาธิการ

Understanding · Not a library. A copy-paste project.

บทเชิงลึกนี้มีให้บริการเฉพาะภาษาอังกฤษในขณะนี้ เครื่องมือแปลงด้านบนทำงานในภาษาของคุณ บทความอธิบายแบบยาวยังไม่ได้แปล

คำถามที่พบบ่อย

Quick answers.

›Do I need to install shadcn/ui first?

Yes. This tool generates code that assumes you have the `shadcn-ui` CLI configured and the necessary primitives installed via `npx shadcn-ui@latest add`.

›Is the code compatible with Next.js?

Yes. The generated output uses standard React and Tailwind CSS conventions that work in Next.js, Vite, and other modern frameworks.

›Does this support TypeScript?

The generator provides TypeScript-first code by default, including the necessary types for props and component refs.

›Can I customise the styling?

The output uses Tailwind CSS utility classes. You can modify the generated classes directly in your editor to match your specific design requirements.

ผู้คนยังค้นหา

เครื่องมือที่เกี่ยวข้อง

More in this room.

ดูทั้งหมดใน ตัวจัดรูปแบบและโค้ด