rewindui

Introdução

Construído especificamente para uso com CSS React e Tailwind, o Rewind-UI oferece uma variedade de componentes acessíveis e altamente personalizáveis que podem ser facilmente integrados a qualquer projeto React. O Rewind-UI vem com um conjunto de estilos padrão que podem ser facilmente personalizados usando as classes CSS do Tailwind. Além disso, cada componente pode ser parametrizado usando um conjunto de adereços que podem ser usados para alterar os estilos padrão do componente.

Instalação

Rewind-ui está disponível como um pacote NPM e pode ser instalado usando o seguinte comando:

npm install @rewind-ui/core

Configuração

Rewind-ui foi projetado para ser usado com o React e o Tailwind CSS. Para usar o Rewind-UI, você deve primeiro instalar o ReactJS e o Tailwind CSS em seu projeto. Além disso, você também deve instalar os seguintes pacotes NPM:

npm install tailwind-scrollbar @tailwindcss/forms @tailwindcss/typography

Depois de instalar o Tailwind CSS, você deve configurá-lo para trabalhar com o Rewind-UI. Para fazer isso, você deve primeiro criar um arquivo tailwind.config.js no diretório raiz do seu projeto. Em seguida, adicione o código a seguir ao arquivo de configuração:

É altamente recomendável adicionar apenas os arquivos de estilo necessário para evitar ter um arquivo CSS inchado

 module . exports = {
  content : [
    './src/**/*.{html,jsx,tsx}' ,
    // you can either add all styles
    './node_modules/@rewind-ui/core/dist/theme/styles/*.js' ,
    // OR you can add only the styles you need
    './node_modules/@rewind-ui/core/dist/theme/styles/Button.styles.js' ,
    './node_modules/@rewind-ui/core/dist/theme/styles/Text.styles.js'
  ] ,
  plugins : [
    require ( '@tailwindcss/typography' ) ,
    require ( 'tailwind-scrollbar' ) ( { nocompatible : true } ) ,
    require ( '@tailwindcss/forms' ) ( {
      strategy : 'class' // only generate classes
    } )
  ]
} ;

Uso

Para começar a usar os componentes Rewind-UI, basta adicionar a seguinte instrução de importação ao topo do seu componente React:

 import { Button } from '@rewind-ui/core' ;

Em seguida, você pode usar o componente em seu código JSX:

 < Button > Click Me </ Button >

Propriedades

Cada componente possui um conjunto de estilos padrão que podem ser parametrizados usando os adereços correspondentes. Por exemplo, o componente Button possui uma cor azul padrão e um tamanho médio. Esses valores podem ser alterados definindo os adereços color e size para o componente:

 < Button color = "black" size = "sm" > Click Me </ Button >

Além disso, o estilo de um componente pode ser personalizado passando o suporte normal className . Este suporte pode ser usado para substituir os estilos padrão do componente. Por exemplo, o código a seguir alterará o peso da fonte do botão para semi-bobo:

Rewind-ui está usando o Tailwind-Merge para mesclar as classes padrão com as classes que você fornece no suporte className e resolver quaisquer conflitos possíveis.

  < Button color = "black" size = "sm" className = "font-semibold" > Click Me </ Button >

Variantes

Tentando evitar fazer o usuário usar várias propriedades repetidas vezes, criamos um suporte variant . Uma variante é basicamente um conjunto de propriedades predefinidas que pode ser usado para personalizar um componente. Por exemplo, o componente Button possui uma variante success que pode ser usada para criar um botão de sucesso do tipo Bootstrap:

  < Button variant = "success" > Click Me </ Button >

Você pode ler mais sobre as variantes de cada componente na página de documentação correspondente.

Personalização

Todos os componentes de Rewind-UI são altamente personalizáveis. Isso significa que você pode alterar facilmente os estilos padrão de um componente, substituindo as classes CSS do Tailwind correspondente. Você pode ler mais sobre a personalização de estilo na página de tema.

Créditos

Agradecimentos especiais às seguintes pessoas:

• Joe Bell - Para sua incrível autoridade de variação da classe de biblioteca de código aberto, que é a base do sistema de temas de Rewind.
• Jack Herrington - por me inspirar a começar a construir Rewind -Ui.
• Shadcn - Para seus projetos de código aberto (taxonomia e interface do usuário), que me ajudaram a construir esta documentação.

Agradecimentos especiais às seguintes equipes:

• React - para criar o React.
• Tailwind Labs - Para criar CSS de Tailwind.
• Vercel - Para criar o Next.js e seus incríveis modelos de código aberto.
• Flutuante-UI-Para criar flutuantes-UI.
• Fósforo - para criar a família Fosphor Icon.