originui

Origin UI adalah kumpulan komponen copy-and-paste yang luas untuk dengan cepat membangun aplikasi aplikasi. Ini termasuk ratusan komponen dan terus diperbarui dengan barang -barang baru.

Demo → https://originui.com

Ringkasan

Origin UI merampingkan pengembangan UI dengan menyediakan:

• Ratusan komponen yang dapat disesuaikan
• Gaya yang konsisten
• Pembaruan rutin dan penambahan komponen baru
• Dukungan mode gelap di luar kotak

Memulai

Origin UI dirancang untuk mengintegrasikan proyek selanjutnya dengan selanjutnya, tetapi komponen juga kompatibel dengan proyek berbasis reaksi apa pun. Komponen mengikuti konvensi shadcn, jadi mereka akan merasa akrab bagi siapa saja yang pernah menggunakan shadcn sebelumnya.

1. Atur file yang diperlukan:

• Salin semua file .tsx dari folder components/ui Origin UI ke Folder components/ui Proyek Anda.
• Salin utils.ts dari folder lib Origin UI ke folder lib proyek Anda.

Catatan: Jika Anda menggunakan shadcn, Anda mungkin sudah memiliki file -file ini - namun, saya akan merekomendasikan menggunakan komponen kami di atas shadcn untuk pengalaman gaya yang konsisten.

2. Tambahkan variabel CSS berikut ke stylesheet Anda (Anda tidak perlu menimpanya jika Anda sudah memilikinya):

 @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. Sertakan variabel yang ditentukan sebelumnya di bagian Perpanjangan file konfigurasi tailwind Anda:

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

Setelah menyelesaikan langkah -langkah ini, Anda dapat menyalin dan menggunakan komponen dalam proyek Anda. Perhatikan bahwa beberapa komponen (misalnya, input nomor, pemilih tanggal, pemetik waktu, input nomor telepon) mungkin memerlukan perpustakaan tambahan - lihat komentar kode di bagian atas setiap file untuk persyaratan tertentu.

Berkontribusi

Kami menyambut kontribusi untuk Origin UI! Harap baca pedoman berkontribusi kami tentang cara mengirimkan perbaikan dan komponen baru.

Ketentuan Penggunaan

Jangan ragu untuk menggunakan komponen -komponen ini dalam proyek pribadi dan komersial. Namun, sementara tutorial dan demo tersedia untuk Anda gunakan apa adanya, mereka tidak dapat didistribusikan kembali atau dijual kembali. Mari kita simpan hal -hal yang adil dan hormati pekerjaan satu sama lain.

Jika Anda memiliki pertanyaan atau hanya ingin menyapa, jangan ragu untuk menghubungi kami di X @Pacovitiello & @Davidepacilio.

Catatan

Proyek ini sedang dalam proses, dan kami terus bekerja untuk meningkatkan dan memperluas koleksi ini. Kami ingin mendengar umpan balik Anda atau melihat kontribusi Anda saat proyek berkembang!