originui

Die Origin UI ist eine umfangreiche Sammlung von Kopien-und-Paste-Komponenten für die schnelle Erstellung von App-UIS. Es enthält Hunderte von Komponenten und wird ständig mit neuen Sachen aktualisiert.

Demo → https://originui.com

Überblick

Origin UI rationalisiert die UI -Entwicklung durch Bereitstellung:

• Hunderte von anpassbaren Komponenten
• Konsequentes Styling
• Regelmäßige Updates und neue Komponentenzusätze
• Dark -Modus -Unterstützung außerhalb der Box

Erste Schritte

Die Ursprungs-UI ist so konzipiert, dass sie nahtlos in Next.js-Projekte integriert werden. Die Komponenten sind jedoch auch mit jedem React-basierten Projekt kompatibel. Die Komponenten folgen Shadcn -Konventionen, sodass sie jedem, der Shadcn zuvor verwendet hat, vertraut sind.

1. Richten Sie die erforderlichen Dateien ein:

• Kopieren Sie alle .tsx -Dateien aus components/ui -Ordner von Origin UI in components/ui -Ordner Ihres Projekts.
• Kopieren Sie utils.ts aus lib -Ordner von Origin UI in lib Ihres Projekts.

Hinweis: Wenn Sie Shadcn verwenden, haben Sie wahrscheinlich bereits diese Dateien. Ich würde jedoch empfehlen, unsere Komponenten über Shadcns für ein konsistentes Styling -Erlebnis zu verwenden.

2. Fügen Sie Ihrem Stylesheet die folgenden CSS -Variablen hinzu (Sie müssen sie nicht überschreiben, wenn Sie sie bereits haben):

 @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.. Fügen Sie die zuvor definierten Variablen in den Abschnitt Erweiterung Ihrer Tailwind -Konfigurationsdatei ein:

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

Nachdem Sie diese Schritte ausgeschlossen haben, können Sie die Komponenten in Ihrem Projekt kopieren und verwenden. Beachten Sie, dass einige Komponenten (z. B. Nummerneingänge, Datumspicker, Zeitpicker, Telefonnummer -Eingänge) zusätzliche Bibliotheken erfordern. Weitere Anforderungen finden Sie in den Code -Kommentaren oben in jeder Datei.

Beitragen

Wir begrüßen Beiträge zur Origin UI! Bitte lesen Sie unsere beitragenden Richtlinien zum Einreichen von Verbesserungen und neuen Komponenten.

Nutzungsbedingungen

Nutzen Sie diese Komponenten in persönlichen und kommerziellen Projekten. Während die Tutorials und Demos für Ihre Verwendung als IS verfügbar sind, können sie nicht umverteilt oder weiterverkauft werden. Lassen Sie uns die Dinge fair halten und die Arbeit des anderen respektieren.

Wenn Sie Fragen haben oder einfach nur Hallo sagen möchten, können Sie sich gerne unter X @pacovitiello & @Davidepacilio an uns wenden.

Notizen

Dieses Projekt ist in Arbeit, und wir arbeiten kontinuierlich daran, diese Sammlung zu verbessern und zu erweitern. Wir würden gerne Ihr Feedback hören oder Ihre Beiträge sehen, während sich das Projekt weiterentwickelt!