originui

O Origin UI é uma extensa coleção de componentes de cópia e cola para criar rapidamente o aplicativo UIS. Inclui centenas de componentes e é constantemente atualizado com coisas novas.

Demo → https://originui.com

Visão geral

Origin UI simplifica o desenvolvimento da interface do usuário, fornecendo:

• Centenas de componentes personalizáveis
• Estilo consistente
• Atualizações regulares e novas adições de componentes
• Suporte do modo escuro fora da caixa

Começando

A Origin UI foi projetada para integrar-se perfeitamente aos projetos do Next.JS, mas os componentes também são compatíveis com qualquer projeto baseado em React. Os componentes seguem as convenções de shadcn, para que se sintam familiares para quem já usou o Shadcn antes.

1. Configure os arquivos necessários:

• Copie todos os arquivos .tsx da pasta components/ui da Origin UI para a pasta components/ui do seu projeto.
• Copie utils.ts da pasta lib da Origin UI para a pasta lib do seu projeto.

Nota: Se você estiver usando o Shadcn, provavelmente já terá esses arquivos - no entanto, eu recomendaria usar nossos componentes sobre o Shadcn's para uma experiência de estilo consistente.

2. Adicione as seguintes variáveis CSS à sua folha de estilo (você não precisa substituí -las se já as possui):

 @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. Inclua as variáveis definidas anteriormente na seção de extensão do seu arquivo de configuração do 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))",
      },
    },

Depois de concluir essas etapas, você pode copiar e usar os componentes em seu projeto. Observe que alguns componentes (por exemplo, entradas numéricas, catadores de data, catadores de tempo, entradas de número de telefone) podem exigir bibliotecas adicionais - consulte os comentários do código na parte superior de cada arquivo para requisitos específicos.

Contribuindo

Congratulamo -nos com contribuições para a UI da Origin! Leia nossas diretrizes contribuintes sobre como enviar melhorias e novos componentes.

Termos de uso

Sinta -se à vontade para usar esses componentes em projetos pessoais e comerciais. No entanto, embora os tutoriais e demos estejam disponíveis para seu uso como está, eles não podem ser redistribuídos ou revendidos. Vamos manter as coisas justas e respeitar o trabalho um do outro.

Se você tiver alguma dúvida ou apenas quiser dizer oi, sinta -se à vontade para nos alcançar no x @pacovitiello & @davidepacilio.

Notas

Este projeto é um trabalho em andamento, e estamos trabalhando continuamente para melhorar e expandir esta coleção. Gostaríamos muito de ouvir seus comentários ou ver suas contribuições à medida que o projeto evolui!