Menú

Debord Company design

Bienvenido a la documentación oficial de Debord Design. Esta guía te ayudará a configurar y utilizar nuestra librería de componentes de React construida con Tailwind CSS. Sigue los pasos a continuación para comenzar a usar nuestros componentes en tu proyecto.

Requisitos Previos:

  • React (16)
  • Tailwind
  • Node.js

Instalación:

Paquete:

Puedes instalarlo mediante npm con este comando

npm install debord-design

Estilos:

Añade nuestro pluging a tu archivo tailwind.config.js


import { debordUi } from 'debord-design'
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
    "node_modules/debord-design/dist/**/*.{js,ts,jsx,tsx}"
  ],
  
  plugins: [debordUi()],
}

Uso basico:

Después de instalar la librería, puedes empezar a usar los componentes en tu aplicación React. Aquí tienes un ejemplo básico de como usar el componente Title

<Title level="p" variant="h1" className="text-white">
    Etiqueta "p" con apariencia de h1
</Title>
<Title level="h1" variant="h2" className="text-amber-100">
    Etiqueta "h1" con apariencia de h3
</Title>
<Title level="h4" variant="h3" className="text-amber-300">
    Etiqueta "h4" con apariencia de h3
</Title>
<Title level="h3" variant="h4" className="text-amber-500">
    Etiqueta "h3" con apariencia de h4
</Title>
<Title level="h6" variant="h5" className="text-amber-700">
    Etiqueta "h6" con apariencia de h5
</Title>

este es el resultado:

Etiqueta p con apariencia de h1

Etiqueta h1 con apariencia de h3

Etiqueta h4 con apariencia de h3

Etiqueta h3 con apariencia de h4

Etiqueta h6 con apariencia de h5

Estos ejemplos demuestran la flexibilidad y personalización que ofrece Debord Design para adaptarse a las necesidades de tu proyecto. Al permitir que diferentes niveles de encabezado adopten la apariencia de otros, puedes mantener la semántica del HTML mientras ajustas el estilo según tu diseño. Esto te permite crear una estructura de documento clara y accesible sin sacrificar la coherencia visual.

Con Debord Design, puedes gestionar la apariencia de tus componentes de manera eficiente, manteniendo un estilo consistente en toda tu aplicación. Esto es especialmente útil en aplicaciones complejas donde la presentación visual y la accesibilidad son igualmente importantes. Crear interfaces atractivas y funcionales se convierte en una tarea más sencilla y eficaz.