UI Primitives

35 primitivos sobre Base UI, no Radix. Se instalan con el CLI de shadcn: npx shadcn@latest add @saastro/button.

Button Pro preview

Button Pro

Enhanced button with CVA variants, icon effects, shine, gooey, underline, and gradient animations.

@base-ui/reactclass-variance-authority
Button preview

Button

El botón base sobre Base UI. Variantes CVA (variant, size) y `render` en vez de `asChild`.

@base-ui/reactclass-variance-authority
Badge preview

Badge

Etiqueta compacta con variantes CVA.

@base-ui/reactclass-variance-authority
Separator preview

Separator

Separador horizontal o vertical, accesible.

@base-ui/react
Card preview

Card

Tarjeta y sus partes (header, title, description, content, footer). Markup puro, sin dependencias.

Accordion preview

Accordion

Acordeón sobre Base UI, con animación de altura por CSS.

@base-ui/reactlucide-react
Sheet preview

Sheet

Panel lateral (drawer) sobre Base UI Dialog, con los cuatro lados.

@saastro/button@base-ui/reactlucide-react
Input preview

Input

Campo de texto sobre Base UI, con los estados de foco e invalidez del sistema.

@base-ui/react
Label preview

Label

Etiqueta de campo. La necesita `field`, y es markup puro.

Textarea preview

Textarea

Área de texto multilínea.

Select preview

Select

Desplegable sobre Base UI. Pasa `items` al Root: sin eso el trigger pinta el value crudo en vez de la etiqueta.

@base-ui/reactlucide-react
Checkbox preview

Checkbox

Casilla sobre Base UI.

@base-ui/reactlucide-react
Radio Group preview

Radio Group

Grupo de opciones excluyentes sobre Base UI.

@base-ui/react
Switch preview

Switch

Interruptor sobre Base UI.

@base-ui/react
Field preview

Field

Envoltorio de campo: label, descripción y error. Es lo que consume @saastro/forms.

@saastro/label@saastro/separatorclass-variance-authority
Form preview

Form

Puente entre react-hook-form y los primitivos. FormField/FormControl.

@base-ui/reactreact-hook-form
Dialog preview

Dialog

Modal sobre Base UI, con backdrop y cierre accesible.

@saastro/button@base-ui/reactlucide-react
Popover preview

Popover

Panel flotante anclado sobre Base UI.

@base-ui/react
Tooltip preview

Tooltip

Ayuda contextual sobre Base UI.

@base-ui/react
Scroll Area preview

Scroll Area

Área con scroll y barra propia.

@base-ui/react
Navigation Menu preview

Navigation Menu

Menú de navegación con submenús, sobre Base UI.

@base-ui/reactclass-variance-authoritylucide-react
Slider preview

Slider

Control de rango sobre Base UI. Con un thumb emite NÚMERO PLANO, no array.

@base-ui/react
Native Select preview

Native Select

`<select>` nativo estilado. La opción sin JS cuando no hace falta un desplegable rico.

lucide-react
Input Group preview

Input Group

Input con addons (prefijo, sufijo, botón).

@saastro/button@saastro/input@saastro/textareaclass-variance-authority
Input OTP preview

Input OTP

Campo de código de un solo uso.

input-otplucide-react
Calendar preview

Calendar

Calendario sobre react-day-picker, con la navegación y los estilos del sistema.

@saastro/buttonreact-day-pickerlucide-react
Avatar preview

Avatar

Imagen de persona con iniciales de reserva, sobre Base UI.

@base-ui/react
Skeleton preview

Skeleton

El hueco de lo que está cargando, con la forma que va a tener.

Progress preview

Progress

Barra de avance sobre Base UI. `value={null}` es indeterminado.

@base-ui/react
Alert preview

Alert

El aviso que ya está en la página, no el que interrumpe.

class-variance-authority
Table preview

Table

Tabla nativa con su propio scroll horizontal.

Tabs preview

Tabs

Pestañas sobre Base UI, con indicador deslizante.

@base-ui/react
Dropdown Menu preview

Dropdown Menu

Menú desplegable sobre Base UI: items, checkbox, radio y submenús.

@base-ui/react
Context Menu preview

Context Menu

El menú del botón derecho, sobre Base UI.

@base-ui/react
Alert Dialog preview

Alert Dialog

El diálogo que exige respuesta: no se cierra con Escape ni pinchando fuera.

@saastro/button@base-ui/react