originui

Origin UI เป็นคอลเลกชันที่กว้างขวางของส่วนประกอบคัดลอกและวางสำหรับการสร้างแอพ UIs อย่างรวดเร็ว มันมีส่วนประกอบหลายร้อยชิ้นและได้รับการปรับปรุงอย่างต่อเนื่องกับสิ่งใหม่ ๆ

การสาธิต → https://originui.com

ภาพรวม

Origin UI มีความคล่องตัวในการพัฒนา UI โดยการให้:

• ส่วนประกอบที่ปรับแต่งได้หลายร้อยรายการ
• สไตล์ที่สอดคล้องกัน
• การอัปเดตปกติและการเพิ่มส่วนประกอบใหม่
• โหมดมืดรองรับนอกกรอบ

เริ่มต้น

Origin UI ได้รับการออกแบบมาเพื่อรวมเข้ากับโครงการ Next.js ได้อย่างราบรื่น แต่ส่วนประกอบก็เข้ากันได้กับโครงการที่ใช้ปฏิกิริยาใด ๆ ส่วนประกอบติดตามการประชุม Shadcn ดังนั้นพวกเขาจะรู้สึกคุ้นเคยกับทุกคนที่เคยใช้ Shadcn มาก่อน

1. ตั้งค่าไฟล์ที่ต้องการ:

• คัดลอกไฟล์ .tsx ทั้งหมดจากโฟลเดอร์ components/ui ไปยังโฟลเดอร์ components/ui ของโครงการของคุณ
• คัดลอก utils.ts จากโฟลเดอร์ lib ของ Origin UI ไปยังโฟลเดอร์ lib ของโครงการของคุณ

หมายเหตุ: หากคุณใช้ Shadcn คุณอาจมีไฟล์เหล่านี้อยู่แล้ว - อย่างไรก็ตามฉันขอแนะนำให้ใช้ส่วนประกอบของเราผ่าน Shadcn's เพื่อประสบการณ์การจัดแต่งทรงผมที่สอดคล้องกัน

2. เพิ่มตัวแปร CSS ต่อไปนี้ในสไตล์ชีทของคุณ (คุณไม่จำเป็นต้องเขียนทับพวกเขาหากคุณมีอยู่แล้ว):

 @layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 240 5.9% 10%;
    --primary-foreground: 0 0% 98%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 100%;
    --border: 240 5.9% 90%;
    --input: 240 4.9% 83.9%;
    --ring: 240 5% 64.9%;
    --radius: 0.5rem;
  }
  .dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 5.9% 10%;
    --muted-foreground: 240 4.4% 58%;
    --accent: 240 5.9% 10%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 100%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 240 3.8% 46.1%;
  }
}

3. รวมตัวแปรที่กำหนดไว้ก่อนหน้านี้ในส่วนขยายของไฟล์ config tailwind ของคุณ:

    extend: {
      fontFamily: {
        sans: ["var(--font-sans)"],
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      colors: {
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
      },
    },

หลังจากทำตามขั้นตอนเหล่านี้เสร็จแล้วคุณสามารถคัดลอกและใช้ส่วนประกอบในโครงการของคุณ โปรดทราบว่าส่วนประกอบบางอย่าง (เช่นอินพุตหมายเลขตัวเลือกวันที่ตัวเลือกเวลาอินพุตหมายเลขโทรศัพท์) อาจต้องใช้ไลบรารีเพิ่มเติม - อ้างอิงความคิดเห็นของรหัสที่ด้านบนของแต่ละไฟล์สำหรับข้อกำหนดเฉพาะ

การบริจาค

เรายินดีต้อนรับการมีส่วนร่วมในการกำเนิด UI! โปรดอ่านแนวทางการสนับสนุนของเราเกี่ยวกับวิธีการส่งการปรับปรุงและส่วนประกอบใหม่

ข้อกำหนดการใช้งาน

อย่าลังเลที่จะใช้ส่วนประกอบเหล่านี้ในโครงการส่วนบุคคลและเชิงพาณิชย์ อย่างไรก็ตามในขณะที่บทเรียนและการสาธิตมีให้สำหรับการใช้งานของคุณตามที่เป็นอยู่ แต่พวกเขาไม่สามารถแจกจ่ายหรือขายต่อได้ มาทำสิ่งที่ยุติธรรมและเคารพงานของกันและกันกันเถอะ

หากคุณมีคำถามใด ๆ หรือเพียงแค่ต้องการทักทายอย่าลังเลที่จะติดต่อเราที่ x @pacovitiello & @davidepacilio

หมายเหตุ

โครงการนี้เป็นงานที่กำลังดำเนินอยู่และเรากำลังทำงานอย่างต่อเนื่องเพื่อปรับปรุงและขยายคอลเลกชันนี้ เรายินดีที่จะรับฟังความคิดเห็นของคุณหรือดูการมีส่วนร่วมของคุณเมื่อโครงการวิวัฒนาการ!