originuiダウンロードoriginuiソースコードダウンロード

originui

AI ソースコード

1.0.0

ダウンロード

Origin UIは、アプリUIをすばやく構築するためのコピーアンドパスティコンポーネントの広範なコレクションです。数百のコンポーネントが含まれており、新しいもので常に更新されています。

デモ→https://originui.com

概要

Origin UIは、以下を提供することによりUI開発を合理化します。

数百のカスタマイズ可能なコンポーネント
一貫したスタイリング
定期的な更新と新しいコンポーネントの追加
箱から出してダークモードのサポート

はじめる

Origin UIは、Seamlesslessly next.JSプロジェクトとシームレスに統合するように設計されていますが、コンポーネントはReactベースのプロジェクトとも互換性があります。コンポーネントはShadCNコンベンションに従っているため、以前にShadCNを使用したことがある人には馴染みがあります。

1.必要なファイルを設定します。

Origin UIのcomponents/uiフォルダーからプロジェクトのcomponents/uiフォルダーにすべての.tsxファイルをコピーします。
Origin 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。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))",
      },
    },

これらの手順を完了したら、プロジェクトのコンポーネントをコピーして使用できます。一部のコンポーネント（例：番号入力、日付ピッカー、タイムピッカー、電話番号入力）が追加のライブラリが必要になる場合があります - 特定の要件については、各ファイルの上部にあるコードコメントを参照してください。