originui下載 - originui源代碼下載

originui

Ai源碼

1.0.0

下載

Origin UI是用於快速構建應用程序的副本和貼花組件的廣泛集合。它包括數百個組件，並不斷更新新內容。

演示→https://originui.com

概述

Origin UI通過提供以下方式簡化了UI開發：

數百個可自定義的組件
一致的樣式
定期更新和新組件添加
開箱即用的黑暗模式支持

入門

Origin UI旨在與Next.JS項目無縫集成，但是組件也與任何基於React的項目兼容。組件遵循ShadCN慣例，因此以前使用ShadCN的任何人都會感到熟悉。

1。設置所需的文件：

將所有.tsx文件從Origin UI的components/ui文件夾複製到項目的components/ui文件夾。
將UI的lib文件夾從項目的lib文件夾中復制utils.ts 。

注意：如果您使用的是ShadCN，則可能已經有了這些文件 - 但是，我建議在ShadCN上使用我們的組件以獲得一致的樣式體驗。

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。在您的尾風配置文件的擴展部分中包含先前定義的變量：

    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))",
      },
    },

完成這些步驟後，您可以復制和使用項目中的組件。請注意，某些組件（例如，數字輸入，日期選擇器，時間選擇器，電話號碼輸入）可能需要其他庫 - 請參閱每個文件頂部的代碼註釋以獲取特定要求。