originui

Origin UI es una extensa colección de componentes de copia y pasta para construir una aplicación de aplicación de aplicación rápidamente. Incluye cientos de componentes y se actualiza constantemente con cosas nuevas.

Demostración → https://originui.com

Descripción general

Origin UI Streamlines UI Development Al proporcionar:

• Cientos de componentes personalizables
• Estilo consistente
• Actualizaciones regulares y nuevas adiciones de componentes
• Soporte de modo oscuro fuera de la caja

Empezando

Origin UI está diseñado para integrarse perfectamente con los proyectos Next.js, pero los componentes también son compatibles con cualquier proyecto basado en React. Los componentes siguen las convenciones de Shadcn, por lo que se sentirán familiarizados para cualquiera que haya usado shadcn antes.

1. Configure los archivos requeridos:

• Copie todos los archivos .tsx de la carpeta components/ui a la carpeta components/ui de su proyecto.
• Copie utils.ts desde la carpeta lib de origen UI a la carpeta lib de su proyecto.

Nota: Si está utilizando ShadCN, es probable que ya tenga estos archivos; sin embargo, recomendaría usar nuestros componentes sobre ShadCN para una experiencia de estilo consistente.

2. Agregue las siguientes variables CSS a su hoja de estilo (no necesita sobrescribirlas si ya las tiene):

 @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. Incluya las variables previamente definidas en la sección Extender de su archivo de configuración de viento de cola:

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

Después de completar estos pasos, puede copiar y usar los componentes en su proyecto. Tenga en cuenta que algunos componentes (por ejemplo, entradas de números, recolectores de fecha, recolectores de tiempo, entradas de números de teléfono) pueden requerir bibliotecas adicionales: consulte los comentarios del código en la parte superior de cada archivo para obtener requisitos específicos.

Que contribuye

¡Agradecemos las contribuciones a Origin UI! Lea nuestras pautas de contribución sobre cómo enviar mejoras y nuevos componentes.

Condiciones de uso

Siéntase libre de usar estos componentes en proyectos personales y comerciales. Sin embargo, si bien los tutoriales y las demostraciones están disponibles para su uso, no se pueden redistribuir ni revenderlos. Mantengamos las cosas justas y respetemos el trabajo del otro.

Si tiene alguna pregunta o simplemente desea saludar, no dude en comunicarse con nosotros en X @Pacovitiello y @DavidePacilio.

Notas

Este proyecto es un trabajo en progreso, y estamos trabajando continuamente para mejorar y expandir esta colección. ¡Nos encantaría escuchar sus comentarios o ver sus contribuciones a medida que evoluciona el proyecto!