Componentes
Los 66 componentes de shadcn/ui con el lenguaje Konfront. Cada uno se instala con el CLI y se adapta al tema de cada cliente.
Formularios
FieldAgrupa label, control, ayuda y error en un solo campo accesible.
ButtonDispara una acción. Variantes primary, outline, ghost, success, destructive y link.
Button GroupAgrupa botones relacionados en un solo control.
InputCampo de texto de una línea.
Input GroupInput con prefijos, sufijos, botones o texto auxiliar.
Input OTPCaptura códigos de un solo uso, dígito por dígito.
TextareaCampo de texto de varias líneas.
CheckboxSelección independiente de una o varias opciones.
Radio GroupSelección de una sola opción entre varias.
SelectLista de opciones en un menú desplegable.
Native SelectSelect nativo del navegador con estilo Konfront.
ComboboxSelect con búsqueda y autocompletado.
SwitchActiva o desactiva una opción al instante.
SliderElige un valor o un rango arrastrando.
CalendarCalendario para elegir fechas.
Date PickerComposición de Popover + Calendar para elegir fechas.
LabelEtiqueta accesible para un control.
Overlays
DialogVentana modal para tareas enfocadas.
Alert DialogConfirma acciones irreversibles o con impacto en el cliente.
SheetPanel que entra desde un borde de la pantalla.
DrawerPanel inferior pensado para móvil.
PopoverContenido flotante anclado a un elemento.
TooltipTexto breve de ayuda al pasar o enfocar.
Hover CardVista previa de contenido al pasar el cursor.
Context MenuMenú con clic derecho.
Dropdown MenuMenú de acciones desplegable.
CommandPaleta de comandos y búsqueda ⌘K.
Feedback y estado
AlertMensaje destacado dentro de la página.
ToastNotificación breve y temporal.
SonnerToasts basados en Sonner.
ProgressAvance de una tarea o etapa.
SpinnerIndicador de carga.
SkeletonMarcador con la forma del contenido mientras carga.
BadgeEtiqueta de estado o categoría.
EmptyEstado vacío con explicación y siguiente acción.
Datos y contenido
AvatarImagen o iniciales de una persona.
CardContenedor de una unidad de información.
TableTabla para comparar muchas filas por muchos atributos.
Data TableTabla con orden, filtros y paginación (Table + TanStack Table).
ChartGráficas con Recharts y la paleta del tema.
CarouselCarrusel de contenido con Embla.
Aspect RatioMantiene una proporción fija.
ItemFila genérica para listas y menús.
KbdMuestra atajos de teclado.
MarkerResalta fragmentos dentro de un texto.
CollapsibleMuestra u oculta un bloque de contenido.
ToggleBotón de dos estados.
Toggle GroupConjunto de toggles.
DirectionProveedor de dirección de texto (RTL).
IA y conversación
MessageMensaje de una conversación con IA.
Message ScrollerLista de mensajes con scroll que sigue la conversación.
BubbleBurbuja de chat.
AttachmentArchivo adjunto en un mensaje.
QuestionnairePreguntas guiadas paso a paso.
TraceMuestra los pasos y herramientas que usó un agente.
Code BlockBloque de código con resaltado y copiar.