originui

L'interface utilisateur d'origine est une vaste collection de composants de copie et de coche pour la création rapidement des UIS des applications. Il comprend des centaines de composants et est constamment mis à jour avec de nouvelles choses.

Demo → https://originui.com

Aperçu

Origin UI rationalise le développement de l'interface utilisateur en fournissant:

• Des centaines de composants personnalisables
• Style cohérent
• Mises à jour régulières et nouveaux ajouts de composants
• Support en mode noir hors de la boîte

Commencer

L'interface utilisateur d'origine est conçue pour s'intégrer de manière transparente avec les projets Next.js, mais les composants sont également compatibles avec tout projet basé sur la réaction. Les composants suivent les conventions de Shadcn, donc ils se sentiront familiers à tous ceux qui ont déjà utilisé Shadcn.

1. Configurer les fichiers requis:

• Copiez tous les fichiers .tsx dans le dossier components/ui d'Origin dans le dossier components/ui de votre projet.
• Copier utils.ts du dossier lib d'Origin UI dans le dossier lib de votre projet.

Remarque: Si vous utilisez Shadcn, vous pourriez probablement avoir ces fichiers - cependant, je recommanderais d'utiliser nos composants via Shadcn pour une expérience de style cohérente.

2. Ajoutez les variables CSS suivantes à votre feuille de style (vous n'avez pas besoin de les écraser si vous les avez déjà):

 @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. Incluez les variables précédemment définies dans la section Extension de votre fichier de configuration de vent arrière:

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

Après avoir terminé ces étapes, vous pouvez copier et utiliser les composants de votre projet. Notez que certains composants (par exemple, les entrées de numéro, les sélecteurs de date, les sélecteurs de temps, les entrées de numéro de téléphone) peuvent nécessiter des bibliothèques supplémentaires - reportez-vous aux commentaires de code en haut de chaque fichier pour des exigences spécifiques.

Contributif

Nous accueillons des contributions à l'origine ui! Veuillez lire nos directives contributives sur la façon de soumettre des améliorations et de nouveaux composants.

Conditions d'utilisation

N'hésitez pas à utiliser ces composants dans des projets personnels et commerciaux. Cependant, bien que les tutoriels et les démos soient disponibles pour votre utilisation tel quel, ils ne peuvent pas être redistribués ou revendus. Gardons les choses justes et respectons le travail de chacun.

Si vous avez des questions ou si vous voulez simplement dire bonjour, n'hésitez pas à nous contacter sur x @pacovitiello & @davidepacilio.

Notes

Ce projet est un travail en cours, et nous travaillons continuellement pour améliorer et développer cette collection. Nous aimerions entendre vos commentaires ou voir vos contributions à mesure que le projet évolue!