هل أحتاج إلى تثبيت shadcn/ui أولاً؟

نعم. تنشئ هذه الأداة رمزًا يفترض أن لديك `shadcn-ui` CLI وتكوينها وأن البدائيات الضرورية مثبتة عبر `npx shadcn-ui@latest add`.

هل الرمز متوافق مع Next.js؟

نعم. يستخدم الناتج الذي تم إنشاؤه اتفاقيات React و Tailwind CSS القياسية التي تعمل في Next.js و Vite وأطر العمل الحديثة الأخرى.

هل هذا يدعم TypeScript؟

يوفر المولد رمزًا TypeScript-first افتراضيًا، بما في ذلك الأنواع الضرورية للدعائم وRefs المكونة.

هل يمكنني تخصيص النمط؟

يستخدم الناتج فئات أدوات Tailwind CSS. يمكنك تعديل الفئات التي تم إنشاؤها مباشرةً في محرر النصوص الخاص بك لتتناسب مع متطلبات التصميم المحددة الخاصة بك.

المنسقات والكود

مولد مكونات 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.

شاهد الكل في المنسقات والكود