Ocho bloques de shadcn/ui creados con los componentes estándar, cada uno con vista previa en vivo y código para copiar: tarjeta de inicio de sesión, estadísticas, selector de precios, ajustes, pestañas, confirmación de borrado, estado vacío y lista de equipo.
shadcn/ui es un conjunto de componentes de React que copias en tu proyecto con su CLI en lugar de instalarlos como dependencia. Están construidos sobre primitivas de Radix y estilizados con Tailwind. El valor está en combinarlos: abajo tienes ocho bloques de uso diario, como una tarjeta de inicio de sesión, un selector de precios y una confirmación de borrado, cada uno en vivo y con su código.
Qué obtienes
Las vistas previas se ejecutan en esta página con nuestras propias copias de los mismos componentes, adaptadas a nuestros colores, así que los botones y las esquinas se ven un poco distintos del tema estándar. El código es shadcn/ui puro y funciona tras ejecutar el comando add que se muestra primero.
Sí. shadcn/ui es de código abierto con licencia MIT, así que puedes usar y modificar los componentes en proyectos comerciales.
No en el sentido habitual. No hay un paquete de componentes que actualizar; la CLI copia el código fuente en tu proyecto y desde ese momento es tuyo. Eso facilita los cambios, pero las actualizaciones son manuales.
Sí. Funciona en cualquier configuración de React con Tailwind, incluidos Vite, React Router y Astro con React. La CLI te pregunta qué framework usas durante init.
El sitio oficial tiene un conjunto de bloques, y muchas plantillas de la comunidad crean páginas completas a partir de ellos. Para empezar rápido, compón en una página secciones como las de aquí, o usa un creador de sitios web para el sitio de marketing y reserva shadcn/ui para la app.
shadcn/ui no es un paquete que importes desde npm. La CLI copia el código fuente de cada componente en tu proyecto, así que es tuyo y puedes editarlo.
Qué componentes usa cada bloque
Card, Label, Input y Button. Cada campo tiene una etiqueta visible vinculada con htmlFor; el enlace secundario está junto a la etiqueta con la que se relaciona.
Tres tarjetas en una cuadrícula responsive. tabular-nums evita que las cifras salten cuando cambian.
Un Switch alterna entre precios mensuales y anuales. La etiqueta se puede pulsar y el cambio de precio se anuncia porque está en una región aria-live.
Cada fila combina un Label y una descripción con un Switch. Usar Label htmlFor hace que todo el texto sea pulsable, no solo el pequeño interruptor.
Las Tabs de shadcn están construidas sobre Radix, así que las flechas, Home y End ya funcionan y los roles ARIA vienen configurados.
Dialog gestiona la captura del foco, Escape y la devolución del foco al trigger. Haz que el botón destructivo diga exactamente lo que va a pasar.
Un estado vacío amable explica qué aparecerá aquí y ofrece la única acción que lo llena.
Avatar muestra la foto y recurre a las iniciales cuando falta o todavía se está cargando. La imagen necesita un texto alternativo con el nombre de la persona.
¿Creas un formulario o una tabla de datos? Consulta
Envía un email a los clientes un día antes.
Pide una reseña después de cada visita.
Propietaria
Estilista
Iniciar sesión
Usa el email con el que reservaste.
Contraseña
¿La olvidaste?
Pago anual
Studio
Elegir Studio
Notificaciones
Perfil
Facturación
Tu nombre, foto y biografía.
Tu plan y tus facturas.
Eliminar página
¿Eliminar "Sobre nosotros"?
Esto elimina la página y su enlace del menú. No se puede deshacer.
Conservar página
Eliminada (solo es una demo, no se ha borrado nada).
Todavía no hay reservas
Comparte tu enlace de reservas y las nuevas reservas aparecerán aquí.
Copiar enlace de reservas
Añadir una a mano
Empieza gratis · Sin tarjeta de crédito