originui

Origin UI-это обширная коллекция компонентов копирования и вставки для быстрого построения UIS. Он включает в себя сотни компонентов и постоянно обновляется новым материалом.

Демо → https://originui.com

Обзор

Пользовательский интерфейс Origin оптимизирует разработку пользовательского интерфейса, предоставляя:

• Сотни настраиваемых компонентов
• Последовательный стиль
• Регулярные обновления и дополнения новых компонентов
• Темный режим поддержка из коробки

Начиная

Пользовательский интерфейс Origin предназначен для беспрепятственной интеграции с проектами Next.js, но компоненты также совместимы с любым проектом на основе React. Компоненты следуют конвенциям Shadcn, поэтому они будут чувствовать себя знакомыми всем, кто использовал Shadcn раньше.

1. Настройте необходимые файлы:

• Скопируйте все файлы .tsx из папки components/ui в Pigin Origin в папке вашего проекта components/ui .
• Скопируйте utils.ts из папки lib в Pigin UI в папку lib проекта.

Примечание. Если вы используете 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. Включите ранее определенные переменные в раздел Extend вашего файла конфигурации 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))",
      },
    },

После завершения этих шагов вы можете копировать и использовать компоненты в вашем проекте. Обратите внимание, что некоторые компоненты (например, входы номеров, сборщики дат, сборщики времени, входы номера телефона) могут потребовать дополнительных библиотек - см. Код комментарии в верхней части каждого файла для конкретных требований.

Внося

Мы приветствуем вклад в пользовательский интерфейс Origin! Пожалуйста, прочитайте наши рекомендации о том, как представить улучшения и новые компоненты.

Условия эксплуатации

Не стесняйтесь использовать эти компоненты в личных и коммерческих проектах. Однако, хотя учебники и демонстрации доступны для вашего использования как есть, их нельзя перераспределить или перепродать. Давайте будем держать вещи справедливыми и уважать работу друг друга.

Если у вас есть какие -либо вопросы или вы просто хотите сказать привет, не стесняйтесь обращаться к нам на x @pacovitiello & @davidepacilio.

Примечания

Этот проект находится в стадии разработки, и мы постоянно работаем над улучшением и расширением этой коллекции. Мы хотели бы услышать ваши отзывы или увидеть ваш вклад по мере развития проекта!