Park UI

Qué es

Park UI es una colección de componentes de interfaz accesibles y con un diseño cuidado, construidos sobre Ark UI (lógica headless) y estilados con Panda CSS o Tailwind CSS. Creado por Christian Schröter (@grizzly_codes), el proyecto forma parte oficialmente de la organización Chakra UI. Está pensado como base para crear tu propio sistema de diseño con la misma API de componentes en React, Vue y Solid.

Para qué sirve

• Añadir componentes accesibles (botones, diálogos, selects, menús…) a un proyecto sin reinventar la lógica.
• Construir un sistema de diseño propio que puedas personalizar por completo al copiar el código a tu repositorio.
• Compartir la misma API de componentes entre proyectos React, Vue y Solid.
• Elegir entre Panda CSS o Tailwind CSS según el motor de estilos de tu stack.

Cuándo usarlo

Es buena opción cuando quieres componentes accesibles pero prefieres ser dueño del código en lugar de depender de una librería empaquetada en node_modules, al estilo de shadcn/ui. Encaja especialmente si ya usas Ark UI o Panda CSS, o si necesitas el mismo set de componentes en varios frameworks. Si buscas una librería instalable y cerrada con tema fijo, alternativas como Chakra UI o Mantine pueden encajar mejor.

Ejemplo

Inicializa Park UI en tu proyecto y añade componentes con la CLI:

# Inicializar la configuración (elige framework: react/vue/solid y CSS: panda/tailwind)
npx @park-ui/cli init

# Añadir componentes; el código se copia dentro de tu proyecto
npx @park-ui/cli add button
npx @park-ui/cli add card

Tras añadir el botón, lo importas desde tu carpeta de componentes:

import { Button } from '@/components/ui/button';

export function Demo() {
  return <Button>Click me</Button>;
}

Puntos clave

• Componentes accesibles gracias a Ark UI, con la lógica de comportamiento ya resuelta.
• Misma API de componentes en React, Vue y Solid.
• Soporta tanto Panda CSS como Tailwind CSS como motor de estilos.
• El código se copia a tu proyecto (lo posees y lo personalizas), no se oculta en una dependencia.

Ten en cuenta

• No es una librería que importas tal cual: el modelo de copiar el código implica que tú mantienes esos componentes en tu repositorio.
• Está fuertemente ligado a Ark UI y a Panda CSS o Tailwind CSS; conviene tenerlos en cuenta en tu stack.
• Licencia MIT y proyecto en evolución dentro de la organización Chakra UI; revisa la documentación oficial para la información más actualizada.