Ir al contenido
angel.library

Chakra UI

Paquetes React - Chakra UI

Categoría de recurso
Documentación del paquete
Abrir el recurso Repositorio

Estilos vía props (<Box p={4} bg="gray.100">) en vez de clases utilitarias — no necesita Tailwind ni convive mal con él si ya está en el proyecto.

Instalación

Sección titulada «Instalación»
Ventana de terminal
pnpm add @chakra-ui/react @emotion/react

Configuración inicial

Sección titulada «Configuración inicial»
main.tsx
import { ChakraProvider, defaultSystem } from "@chakra-ui/react"


;<ChakraProvider value={defaultSystem}>
  <App />
</ChakraProvider>

Snippets de componentes compuestos (ej. toaster, color-mode) se agregan con su propio CLI:

Ventana de terminal
pnpm dlx @chakra-ui/cli snippet add

Tips

Sección titulada «Tips»
  • El sistema de theming (v3) usa tokens semánticos (colorPalette) en vez de sobrescribir CSS.
  • Buena opción cuando el equipo prefiere props tipadas a memorizar clases de utilidad.