rewindui
@rewind-ui
Construido específicamente para su uso con CSS React y Tailwind, Rewind-UI ofrece una gama de componentes accesibles y altamente personalizables que se pueden integrar fácilmente en cualquier proyecto React. Rewind-UI viene con un conjunto de estilos predeterminados que se pueden personalizar fácilmente utilizando clases CSS Tailwind. Además, cada componente se puede parametrizar utilizando un conjunto de accesorios que se pueden usar para cambiar los estilos predeterminados del componente.
Rewind-UI está disponible como un paquete NPM y se puede instalar utilizando el siguiente comando:
npm install @rewind-ui/coreRewind-UI está diseñado para usarse con react y CSS de viento de cola. Para usar Rewind-UI, primero debe instalar Reactjs y Tailwind CSS en su proyecto. Además, también debe instalar los siguientes paquetes de NPM:
npm install tailwind-scrollbar @tailwindcss/forms @tailwindcss/typography Después de haber instalado CSS Tailwind, debe configurarlo para trabajar con Rewind-UI. Para hacer esto, primero debe crear un archivo tailwind.config.js en el directorio raíz de su proyecto. Luego, agregue el siguiente código a ese archivo de configuración:
Se recomienda agregar solo los archivos de estilo necesarios para evitar tener un archivo CSS infundado
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
} )
]
} ;Para comenzar a usar los componentes Rewind-UI, solo agregue la siguiente declaración de importación a la parte superior de su componente React:
import { Button } from '@rewind-ui/core' ;Luego, puede usar el componente en su código JSX:
< Button > Click Me </ Button > Cada componente tiene un conjunto de estilos predeterminados que se pueden parametrizar utilizando los accesorios correspondientes. Por ejemplo, el componente Button tiene un color azul predeterminado y un tamaño mediano. Estos valores se pueden cambiar configurando los accesorios color y size en el componente:
< Button color = "black" size = "sm" > Click Me </ Button > Además, el estilo de un componente se puede personalizar pasando el accesorio className normal. Este accesorio se puede usar para anular los estilos predeterminados del componente. Por ejemplo, el siguiente código cambiará el peso de fuente del botón a semi bill:
Rewind-UI está utilizando Tailwind-Merge para fusionar las clases predeterminadas con las clases que proporciona en el accesorio de className y resolver cualquier posible conflicto.
< Button color = "black" size = "sm" className = "font-semibold" > Click Me </ Button > Tratando de evitar hacer que el usuario use múltiples propiedades una y otra vez, hemos creado un accesorio variant . Una variante es básicamente un conjunto predefinido de propiedades que se pueden usar para personalizar un componente. Por ejemplo, el componente Button tiene una variante success que se puede usar para crear un botón de éxito similar a Bootstrap:
< Button variant = "success" > Click Me </ Button >Puede leer más sobre las variantes de cada componente en su página de documentación correspondiente.
Todos los componentes Rewind-UI son altamente personalizables. Esto significa que puede cambiar fácilmente los estilos predeterminados de un componente anulando las clases CSS de viento de cola correspondientes. Puede leer más sobre la personalización de estilo en la página de temas.
Un agradecimiento especial a las siguientes personas:
Un agradecimiento especial a los siguientes equipos:
