@calumet/elise-ui exporta 45 componentes construidos sobre Radix UI Primitives. Todos los componentes son accesibles, soportan ref via React.forwardRef y se estilizan con Tailwind CSS.
Antes de usar los componentes, completa el setup de Tailwind CSS v4 (Vite + @tailwindcss/vite) de la Guia de inicio.
// Por componente (recomendado)
import { Button } from "@calumet/elise-ui/button";
// Barrel import
import { Button, Dialog, Card } from "@calumet/elise-ui";
| Componente |
Import |
Radix |
| Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter |
@calumet/elise-ui/card |
— |
| Separator |
@calumet/elise-ui/separator |
Separator |
| AspectRatio |
@calumet/elise-ui/aspect-ratio |
AspectRatio |
| Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator |
@calumet/elise-ui/breadcrumb |
— |
| Sidebar, SidebarProvider, SidebarTrigger, SidebarContent, ... |
@calumet/elise-ui/sidebar |
— |
| Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription |
@calumet/elise-ui/sheet |
Dialog |
| ScrollArea, ScrollBar |
@calumet/elise-ui/scroll-area |
ScrollArea |
| Componente |
Import |
Radix / Externo |
| Form, FormField, FormLabel, FormControl, FormMessage, FormRow |
@calumet/elise-ui/form |
Form |
| Input |
@calumet/elise-ui/input |
— |
| Textarea |
@calumet/elise-ui/textarea |
— |
| Label |
@calumet/elise-ui/label |
Label |
| Checkbox |
@calumet/elise-ui/checkbox |
Checkbox |
| RadioGroup, RadioGroupItem |
@calumet/elise-ui/radio-group |
RadioGroup |
| Select, SelectTrigger, SelectValue, SelectContent, SelectItem |
@calumet/elise-ui/select |
Select |
| Switch |
@calumet/elise-ui/switch |
Switch |
| Slider |
@calumet/elise-ui/slider |
Slider |
| OTPField |
@calumet/elise-ui/otp-field |
— |
| PasswordField |
@calumet/elise-ui/password-field |
— |
| Componente |
Import |
Radix |
| Tabs, TabsList, TabsTrigger, TabsContent |
@calumet/elise-ui/tabs |
Tabs |
| Accordion, AccordionItem, AccordionTrigger, AccordionContent |
@calumet/elise-ui/accordion |
Accordion |
| Collapsible, CollapsibleTrigger, CollapsibleContent |
@calumet/elise-ui/collapsible |
Collapsible |
| NavigationMenu, NavigationMenuList, NavigationMenuItem, ... |
@calumet/elise-ui/navigation-menu |
NavigationMenu |
| Menubar, MenubarMenu, MenubarTrigger, MenubarContent, ... |
@calumet/elise-ui/menubar |
Menubar |
| DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, ... |
@calumet/elise-ui/dropdown-menu |
DropdownMenu |
| ContextMenu, ContextMenuTrigger, ContextMenuContent, ... |
@calumet/elise-ui/context-menu |
ContextMenu |
| Pagination, PaginationContent, PaginationItem |
@calumet/elise-ui/pagination |
— |
| Componente |
Import |
Radix |
| Toast, ToastProvider, ToastViewport, ToastTitle, ToastDescription, ToastClose |
@calumet/elise-ui/toast |
Toast |
| AlertDialog, AlertDialogTrigger, AlertDialogContent, ... |
@calumet/elise-ui/alert-dialog |
AlertDialog |
| Progress |
@calumet/elise-ui/progress |
Progress |
| Skeleton |
@calumet/elise-ui/skeleton |
— |
| Componente |
Import |
Radix |
| Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription |
@calumet/elise-ui/dialog |
Dialog |
| Popover, PopoverTrigger, PopoverContent |
@calumet/elise-ui/popover |
Popover |
| HoverCard, HoverCardTrigger, HoverCardContent |
@calumet/elise-ui/hover-card |
HoverCard |
| Tooltip, TooltipProvider, TooltipTrigger, TooltipContent |
@calumet/elise-ui/tooltip |
Tooltip |
| Componente |
Import |
Radix / Externo |
| Avatar, AvatarImage, AvatarFallback |
@calumet/elise-ui/avatar |
Avatar |
| Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext |
@calumet/elise-ui/carousel |
Embla Carousel |
| Calendar |
@calumet/elise-ui/calendar |
react-day-picker |
| DatePicker, DateRangePicker |
@calumet/elise-ui/date-picker |
react-day-picker |
| Componente |
Import |
Radix / Externo |
| Button |
@calumet/elise-ui/button |
— (usa Slot de Radix) |
| Toggle |
@calumet/elise-ui/toggle |
Toggle |
| ToggleGroup, ToggleGroupItem |
@calumet/elise-ui/toggle-group |
ToggleGroup |
| Toolbar, ToolbarButton, ToolbarSeparator, ToolbarToggleGroup, ToolbarToggleItem, ToolbarLink |
@calumet/elise-ui/toolbar |
Toolbar |
| Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandSeparator |
@calumet/elise-ui/command |
cmdk |
| Componente |
Import |
Radix |
| Table, TableHeader, TableBody, TableRow, TableHead, TableCell |
@calumet/elise-ui/table |
— |
Para tablas con funcionalidad avanzada (filtros, paginacion, ordenamiento, exportacion), usa el componente DataTable de @calumet/elise-utils/tables. Ver Utilidades.
El componente Button es el mas utilizado y demuestra los patrones principales de Elise.
import { Button } from "@calumet/elise-ui/button";
<Button variant="solid">Solido</Button> // Fondo de color
<Button variant="outline">Contorno</Button> // Solo borde
<Button variant="ghost">Fantasma</Button> // Sin fondo ni borde<Button size="sm">Pequeno</Button>
<Button size="md">Mediano</Button> // Default
<Button size="lg">Grande</Button>
<Button size="icon">🔍</Button> // Cuadrado para iconos
<Button tone="success">Exito</Button>
<Button tone="warning">Advertencia</Button>
<Button tone="danger">Peligro</Button>
| Prop |
Tipo |
Default |
Descripcion |
variant |
"solid" | "outline" | "ghost" |
"solid" |
Estilo visual |
size |
"sm" | "md" | "lg" | "icon" |
"md" |
Tamano |
tone |
"success" | "warning" | "danger" |
— |
Color semantico (sobreescribe el variant) |
asChild |
boolean |
false |
Renderiza el hijo en lugar de <button> |
Ademas, acepta todas las props nativas de <button> (onClick, disabled, type, etc.).
Muchos componentes soportan asChild para renderizar un elemento diferente al por defecto, manteniendo el comportamiento y los estilos:
import { Button } from "@calumet/elise-ui/button";
// Renderiza como <a> con estilos de Button
<Button asChild>
<a href="/otra-pagina">Navegar</a>
</Button>;Este patron viene de Radix UI. Consulta la guia de composicion de Radix para mas detalles.
Siguiente: Utilidades | Temas