Components
Components
60 accessible React components
All components are imported flat from @hareru/ui:
import { Button, Card, Dialog, toast } from "@hareru/ui"This is a guide to the main components. For the full public API including subcomponents, variant functions, and type exports, see src/index.ts on GitHub.
Component Patterns
A. Standalone Components
Basic elements that operate with props alone.
| Component | Primary Use |
|---|---|
| Button | Button with variant and size props |
| Badge | Status label |
| Input | Text input |
| Textarea | Multi-line text input |
| Label | Form label |
| Separator | Divider line |
| Skeleton | Loading placeholder |
| Checkbox | Checkbox control |
| Switch | Toggle switch |
| Progress | Progress bar |
| Toggle | Toggle button |
| AsyncComboboxField | Combobox with debounced async search |
B. Composite Components
Used by combining multiple sub-components.
| Component | Sub-components |
|---|---|
| Card | CardHeader, CardTitle, CardDescription, CardContent, CardFooter |
| Alert | AlertTitle, AlertDescription |
| EmptyState | EmptyStateIcon, EmptyStateTitle, EmptyStateDescription, EmptyStateAction |
| FormField | FormFieldLabel, FormFieldGroupLabel, FormFieldControl, FormFieldDescription, FormFieldMessage |
| RadioGroup | RadioGroupItem, RadioGroupItemIndicator |
| Tabs | TabsList, TabsTrigger, TabsContent |
| BentoGrid | BentoGridItem |
| Breadcrumb | BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis |
| Pagination | PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis |
| ToggleGroup | ToggleGroupItem |
| Toolbar | ToolbarButton, ToolbarGroup, ToolbarSeparator, ToolbarLink |
| CheckboxGroup | (uses existing Checkbox as children) |
C. Base UI Overlay Components
Overlay components wrapping Base UI primitives.
| Component | Sub-components |
|---|---|
| Dialog | DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, DialogClose |
| AlertDialog | AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel |
| Sheet | SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription |
| Select | SelectTrigger, SelectValue, SelectContent, SelectItem |
| DropdownMenu | DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, ... |
| Popover | PopoverTrigger, PopoverContent |
| Tooltip | TooltipProvider, TooltipTrigger, TooltipContent |
| PreviewCard | PreviewCardTrigger, PreviewCardContent |
| ContextMenu | ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ... |
| Combobox | ComboboxTrigger, ComboboxContent, ComboboxInput, ComboboxList, ComboboxItem |
| Command | CommandInput, CommandList, CommandGroup, CommandItem, CommandDialog |
| NavigationMenu | NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent |
| Accordion | AccordionItem, AccordionHeader, AccordionTrigger, AccordionContent |
| Collapsible | CollapsibleTrigger, CollapsibleContent |
| ScrollArea | ScrollBar |
| Slider | SliderTrack, SliderRange, SliderThumb, SliderOutput |
D. Global Services
E. Data Display
| Component | Use |
|---|---|
| Table | Data table with TableHeader, TableBody, TableRow, TableHead, TableCell |
| ReadonlyField | Non-editable field display |
| KeyValueList | Key-value pair list for metadata |
| FieldDiff | Side-by-side field comparison |
F. AI / Chat
| Component | Use |
|---|---|
| ChatContainer | Chat UI wrapper with header, messages, footer |
| ChatMessage | Individual message bubble with role variants |
| ChatComposer | Message input with send button |
| StreamingText | Animated streaming text display |
| ToolCallCard | Tool invocation status display |
| ApprovalCard | Human-in-the-loop approval card |
| ReasoningPanel | AI reasoning step display |
G. DI Domain
| Component | Use |
|---|---|
| MetricCard | Metric value display with freshness indicator |
| ConfidenceBadge | Confidence level badge |
| DefinitionBrowser | Tabbed browser for semantic models, metrics, dimensions |
| DataQualityIndicator | Quality dimension scores with alert display |
| QueryFeedback | User feedback collector for query results |
| SemanticSuggest | Semantic suggestion list with evidence |
H. Hooks
| Hook | Use |
|---|---|
useAGUIState | AG-UI protocol state manager with JSON Patch support |
useTheme | Theme state and switching (light, dark, system) |
useToast | Toast state management |