LLM Reference
Generated UI API Snapshot
Primary source for LLM usage is generated from packages/ui/src/index.ts and docs metadata.
Raw llms.txt remains available as a secondary, long-form reference.
Generated snapshot: 1,568 lines · Raw llms.txt: 1,715 lines
llms.md
# Almach UI LLM API Snapshot
Generated: 2026-05-22T03:20:49.973Z
This file is generated from `packages/ui/src/index.ts` and docs metadata.
Use this as the primary LLM-oriented API reference.
Total modules: 36
## Index
- alert: 2 value export(s), 1 type export(s)
- avatar: 2 value export(s), 1 type export(s)
- badge: 2 value export(s), 1 type export(s)
- button: 2 value export(s), 1 type export(s)
- calendar: 1 value export(s), 1 type export(s)
- card: 2 value export(s), 0 type export(s)
- carousel: 1 value export(s), 0 type export(s)
- chart: 29 value export(s), 0 type export(s)
- checkbox: 2 value export(s), 0 type export(s)
- collapsible: 1 value export(s), 0 type export(s)
- command: 1 value export(s), 0 type export(s)
- currency-input: 3 value export(s), 4 type export(s)
- dialog: 1 value export(s), 0 type export(s)
- drawer: 1 value export(s), 0 type export(s)
- dropdown-menu: 1 value export(s), 0 type export(s)
- input: 3 value export(s), 3 type export(s)
- label: 1 value export(s), 0 type export(s)
- modal: 2 value export(s), 2 type export(s)
- popover: 1 value export(s), 0 type export(s)
- progress: 2 value export(s), 0 type export(s)
- radio: 1 value export(s), 0 type export(s)
- scroll-area: 2 value export(s), 0 type export(s)
- select: 1 value export(s), 2 type export(s)
- separator: 1 value export(s), 0 type export(s)
- sidebar: 2 value export(s), 0 type export(s)
- skeleton: 1 value export(s), 0 type export(s)
- swipe-actions: 2 value export(s), 4 type export(s)
- swipe-button: 1 value export(s), 2 type export(s)
- switch: 1 value export(s), 1 type export(s)
- table: 1 value export(s), 1 type export(s)
- tabs: 3 value export(s), 0 type export(s)
- tag-input: 1 value export(s), 1 type export(s)
- textarea: 2 value export(s), 1 type export(s)
- toast: 1 value export(s), 2 type export(s)
- toaster: 1 value export(s), 0 type export(s)
- tooltip: 1 value export(s), 0 type export(s)
## Alert
Module: `alert`
### Import
```tsx
import { Alert } from "@almach/ui";
```
### Quick Example
```tsx
import { Alert } from "@almach/ui";
export function Example() {
return <Alert />;
}
```
### Most Common Tasks
- Use the exported component in controlled or uncontrolled form.
### Anatomy
- `Alert`
### API Notes
- Refer to the component page for full prop and behavior details.
### Exported Symbols
- Values: `Alert`, `alertVariants`
- Types: `AlertRootProps`
## Avatar
Module: `avatar`
### Import
```tsx
import { Avatar } from "@almach/ui";
```
### Quick Example
```tsx
import { Avatar } from "@almach/ui";
export function Example() {
return <Avatar />;
}
```
### Most Common Tasks
- Use the exported component in controlled or uncontrolled form.
### Anatomy
- `Avatar`
### API Notes
- Refer to the component page for full prop and behavior details.
### Exported Symbols
- Values: `Avatar`, `avatarVariants`
- Types: `AvatarProps`
## Badge
Module: `badge`
### Import
```tsx
import { Badge } from "@almach/ui";
```
### Quick Example
```tsx
import { Badge } from "@almach/ui";
export function Example() {
return <Badge />;
}
```
### Most Common Tasks
- Use the exported component in controlled or uncontrolled form.
### Anatomy
- `Badge`
### API Notes
- Refer to the component page for full prop and behavior details.
### Exported Symbols
- Values: `Badge`, `badgeVariants`
- Types: `BadgeProps`
## Button
Module: `button`
### Import
```tsx
import { Button } from "@almach/ui";
```
### Quick Example
```tsx
import { Button } from "@almach/ui";
export function SaveAction() {
return <Button variant="default">Save changes</Button>;
}
```
### Most Common Tasks
- Trigger an action with semantic variants.
- Use loading state during async submit or mutation.
- Render as child when composing with links or custom elements.
### Anatomy
- `Button`
### API Notes
- variant + size define style and spacing.
- loading disables interactions and shows spinner.
- asChild enables slot-based composition.
### Exported Symbols
- Values: `Button`, `buttonVariants`
- Types: `ButtonProps`
### Accessibility Notes
- Use meaningful button text.
- Set disabled when action is unavailable.
- Prefer aria-label for icon-only usage.
## Calendar
Module: `calendar`
### Import
```tsx
import { Calendar } from "@almach/ui";
```
### Quick Example
```tsx
import { Calendar } from "@almach/ui";
export function Example() {
return <Calendar />;
}
```
### Most Common Tasks
- Use the exported component in controlled or uncontrolled form.
### Anatomy
- `Calendar`
### API Notes
- Refer to the component page for full prop and behavior details.
### Exported Symbols
- Values: `Calendar`
- Types: `CalendarProps`
## Card
Module: `card`
### Import
```tsx
import { Card } from "@almach/ui";
```
### Quick Example
```tsx
import { Card } from "@almach/ui";
export function Example() {
return <Card />;
}
```
### Most Common Tasks
- Use the exported component in controlled or uncontrolled form.
### Anatomy
- `Card`
### API Notes
- Refer to the component page for full prop and behavior details.
### Exported Symbols
- Values: `Card`, `Group`
- Types: (none)
## Carousel
Module: `carousel`
### Import
```tsx
import { Carousel } from "@almach/ui";
```
### Quick Example
```tsx
import { Carousel } from "@almach/ui";
export function Example() {
return <Carousel />;
}
```
### Most Common Tasks
- Use the exported component in controlled or uncontrolled form.
### Anatomy
- `Carousel`
### API Notes
- Refer to the component page for full prop and behavior details.
### Exported Symbols
- Values: `Carousel`
- Types: (none)
## Chart
Module: `chart`
### Import
```tsx
import { Chart } from "@almach/ui";
```
### Quick Example
```tsx
import { Chart } from "@almach/ui";
export function Example() {
return <Chart />;
}
```
### Most Common Tasks
- Use the exported component in controlled or uncontrolled form.
### Anatomy
- `Chart`
### API Notes
- Refer to the component page for full prop and behavior details.
### Exported Symbols
- Values: `Area`, `AreaChart`, `Bar`, `BarChart`, `Cell`, `Chart`, `CHART_COLORS`, `ChartContainer`, `ChartGrid`, `ChartLegend`, `ChartPolarAxis`, `ChartPolarGrid`, `ChartTooltip`, `ChartTooltipContent`, `ChartXAxis`, `ChartYAxis`, `Line`, `LineChart`, `Pie`, `PieChart`, `PolarAngleAxis`, `PolarGrid`, `PolarRadiusAxis`, `Radar`, `RadarChart`, `ReferenceLine`, `ResponsiveContainer`, `Scatter`, `ScatterChart`
- Types: (none)
## Checkbox
Module: `checkbox`
### Import
```tsx
import { Checkbox } from "@almach/ui";
```
### Quick Example
```tsx
import { Checkbox } from "@almach/ui";
<Checkbox defaultSelected>Receive product updates</Checkbox>;
```
### Most Common Tasks
- Capture boolean consent in forms.
- Render controlled list of preferences.
- Show disabled and invalid states consistently.
### Anatomy
- `Checkbox`
### API Notes
- isSelected/defaultSelected + onChange manage state.
- isDisabled blocks interaction.
- error sets invalid visual and semantic state.
### Exported Symbols
- Values: `Checkbox`, `checkboxVariants`
- Types: (none)
## Collapsible
Module: `collapsible`
### Import
```tsx
import { Collapsible } from "@almach/ui";
```
### Quick Example
```tsx
import { Collapsible } from "@almach/ui";
export function Example() {
return <Collapsible />;
}
```
### Most Common Tasks
- Use the exported component in controlled or uncontrolled form.
### Anatomy
- `Collapsible`
### API Notes
- Refer to the component page for full prop and behavior details.
### Exported Symbols
- Values: `Collapsible`
- Types: (none)
## Command
Module: `command`
### Import
```tsx
import { Command } from "@almach/ui";
```
### Quick Example
```tsx
import { Command } from "@almach/ui";
export function Example() {
return <Command />;
}
```
### Most Common Tasks
- Use the exported component in controlled or uncontrolled form.
### Anatomy
- `Command`
### API Notes
- Refer to the component page for full prop and behavior details.
### Exported Symbols
- Values: `Command`
- Types: (none)
## CURRENCIES
Module: `currency-input`
### Import
```tsx
import { CURRENCIES } from "@almach/ui";
```
### Quick Example
```tsx
import { CURRENCIES } from "@almach/ui";
export function Example() {
return <CURRENCIES />;
}
```
### Most Common Tasks
- Use the exported component in controlled or uncontrolled form.
### Anatomy
- `CURRENCIES`
### API Notes
- Refer to the component page for full prop and behavior details.
### Exported Symbols
- Values: `CURRENCIES`, `CurrencyFlagBadge`, `InputCurrency`
- Types: `CurrencyDef`, `CurrencySelectorMode`, `CurrencyValue`, `InputCurrencyProps`
## Dialog
Module: `dialog`
### Import
```tsx
import { Dialog } from "@almach/ui";
```
### Quick Example
```tsx
import { Button, Dialog } from "@almach/ui";
<Dialog>
<Dialog.Trigger asChild>
<Button>Open dialog</Button>
</Dialog.Trigger>
<Dialog.Content>
<Dialog.Title>Confirm action</Dialog.Title>
<Dialog.Description>This cannot be undone.</Dialog.Description>
</Dialog.Content>
</Dialog>;
```
### Most Common Tasks
- Show modal confirmation and block background interaction.
- Compose custom header/body/footer content.
- Control open state from parent logic.
### Anatomy
- `Dialog.Root`
- `Dialog.Trigger`
- `Dialog.Content`
- `Dialog.Title`
- `Dialog.Description`
- `Dialog.Close`
### API Notes
- open/defaultOpen + onOpenChange control visibility.
- Content handles focus trap and Escape close.
- Close part returns focus to trigger by default.
### Exported Symbols
- Values: `Dialog`
- Types: (none)
## Drawer
Module: `drawer`
### Import
```tsx
import { Drawer } from "@almach/ui";
```
### Quick Example
```tsx
import { Button, Drawer } from "@almach/ui";
<Drawer>
<Drawer.Trigger asChild>
<Button>Open drawer</Button>
</Drawer.Trigger>
<Drawer.Content side="right">Drawer content</Drawer.Content>
</Drawer>;
```
### Most Common Tasks
- Open side panel for details or forms.
- Use directional variants for left/right/bottom entry.
- Allow swipe-to-dismiss on touch devices.
### Anatomy
- `Drawer.Root`
- `Drawer.Trigger`
- `Drawer.Content`
- `Drawer.Backdrop`
- `Drawer.Close`
### API Notes
- open/defaultOpen + onOpenChange control lifecycle.
- Motion is transition-first and interruptible.
- Backdrop click and Escape close when enabled.
### Exported Symbols
- Values: `Drawer`
- Types: (none)
## DropdownMenu
Module: `dropdown-menu`
### Import
```tsx
import { DropdownMenu } from "@almach/ui";
```
### Quick Example
```tsx
import { DropdownMenu } from "@almach/ui";
export function Example() {
return <DropdownMenu />;
}
```
### Most Common Tasks
- Use the exported component in controlled or uncontrolled form.
### Anatomy
- `DropdownMenu`
### API Notes
- Refer to the component page for full prop and behavior details.
### Exported Symbols
- Values: `DropdownMenu`
- Types: (none)
## Input
Module: `input`
### Import
```tsx
import { Input } from "@almach/ui";
```
### Quick Example
```tsx
import { Input, Label } from "@almach/ui";
export function EmailField() {
return (
<div className="space-y-1.5">
<Label htmlFor="email">Email</Label>
<Input id="email" type="email" placeholder="john@example.com" />
</div>
);
}
```
### Most Common Tasks
- Collect single-line text with label and helper text.
- Mark invalid state for form feedback.
- Use date input variant for date entry.
### Anatomy
- `Input`
- `Input.Date`
- `Input.Currency`
### API Notes
- Use Input for base text/number/email/password fields with optional leftElement and rightElement.
- Input.Date supports segmented date entry and withCalendar popover selection.
- Input.Currency provides amount + currency selector with controlled and uncontrolled usage.
### Exported Symbols
- Values: `DateInput`, `Input`, `inputVariants`
- Types: `DateInputProps`, `InputDateProps`, `InputProps`
## Label
Module: `label`
### Import
```tsx
import { Label } from "@almach/ui";
```
### Quick Example
```tsx
import { Label } from "@almach/ui";
export function Example() {
return <Label />;
}
```
### Most Common Tasks
- Use the exported component in controlled or uncontrolled form.
### Anatomy
- `Label`
### API Notes
- Refer to the component page for full prop and behavior details.
### Exported Symbols
- Values: `Label`
- Types: (none)
## Modal
Module: `modal`
### Import
```tsx
import { Modal } from "@almach/ui";
```
### Quick Example
```tsx
import { Button, Modal } from "@almach/ui";
<Modal>
<Modal.Trigger asChild>
<Button>Open modal</Button>
</Modal.Trigger>
<Modal.Content>
<Modal.Title>Profile settings</Modal.Title>
</Modal.Content>
</Modal>;
```
### Most Common Tasks
- Render stacked workflow views.
- Control modal from imperative hook.
- Embed forms with deterministic close behavior.
### Anatomy
- `Modal.Root`
- `Modal.Trigger`
- `Modal.Content`
- `Modal.Title`
- `Modal.Close`
### API Notes
- open/defaultOpen + onOpenChange control visibility.
- useModal helper supports programmatic flows.
- Focus and escape behavior follows dialog semantics.
### Exported Symbols
- Values: `Modal`, `useModal`
- Types: `ViewComponent`, `ViewsRegistry`
## Popover
Module: `popover`
### Import
```tsx
import { Popover } from "@almach/ui";
```
### Quick Example
```tsx
import { Popover } from "@almach/ui";
export function Example() {
return <Popover />;
}
```
### Most Common Tasks
- Use the exported component in controlled or uncontrolled form.
### Anatomy
- `Popover`
### API Notes
- Refer to the component page for full prop and behavior details.
### Exported Symbols
- Values: `Popover`
- Types: (none)
## Progress
Module: `progress`
### Import
```tsx
import { Progress } from "@almach/ui";
```
### Quick Example
```tsx
import { Progress } from "@almach/ui";
export function Example() {
return <Progress />;
}
```
### Most Common Tasks
- Use the exported component in controlled or uncontrolled form.
### Anatomy
- `Progress`
### API Notes
- Refer to the component page for full prop and behavior details.
### Exported Symbols
- Values: `Progress`, `progressVariants`
- Types: (none)
## Radio
Module: `radio`
### Import
```tsx
import { Radio } from "@almach/ui";
```
### Quick Example
```tsx
import { Radio } from "@almach/ui";
<Radio.Group defaultValue="monthly">
<Radio.Item value="monthly">Monthly</Radio.Item>
<Radio.Item value="yearly">Yearly</Radio.Item>
</Radio.Group>;
```
### Most Common Tasks
- Select one option from a small set.
- Render option cards with labels and descriptions.
- Control selection for form integration.
### Anatomy
- `Radio.Group`
- `Radio.Item`
### API Notes
- value/defaultValue + onChange manage group selection.
- isDisabled supported on group and item.
- name integrates with native form submission.
### Exported Symbols
- Values: `Radio`
- Types: (none)
## ScrollArea
Module: `scroll-area`
### Import
```tsx
import { ScrollArea } from "@almach/ui";
```
### Quick Example
```tsx
import { ScrollArea } from "@almach/ui";
export function Example() {
return <ScrollArea />;
}
```
### Most Common Tasks
- Use the exported component in controlled or uncontrolled form.
### Anatomy
- `ScrollArea`
### API Notes
- Refer to the component page for full prop and behavior details.
### Exported Symbols
- Values: `ScrollArea`, `ScrollBar`
- Types: (none)
## Select
Module: `select`
### Import
```tsx
import { Select } from "@almach/ui";
```
### Quick Example
```tsx
import { Select } from "@almach/ui";
const items = [
{ label: "Indonesia", value: "id" },
{ label: "Japan", value: "jp" },
];
<Select items={items} placeholder="Choose country" />;
```
### Most Common Tasks
- Select a single value from a list.
- Render grouped options with section headers.
- Use searchable mode for long lists.
### Anatomy
- `Select`
- `Select.Searchable`
### API Notes
- Use Select with items array for standard single selection.
- Use Select.Searchable for long datasets with built-in filtering.
- onValueChange receives the selected value; value/defaultValue support controlled and uncontrolled patterns.
### Exported Symbols
- Values: `Select`
- Types: `SelectSearchableOption`, `SelectSearchableProps`
### Accessibility Notes
- Arrow keys move through options.
- Enter or Space selects item.
- Escape closes the popup and returns focus.
## Separator
Module: `separator`
### Import
```tsx
import { Separator } from "@almach/ui";
```
### Quick Example
```tsx
import { Separator } from "@almach/ui";
export function Example() {
return <Separator />;
}
```
### Most Common Tasks
- Use the exported component in controlled or uncontrolled form.
### Anatomy
- `Separator`
### API Notes
- Refer to the component page for full prop and behavior details.
### Exported Symbols
- Values: `Separator`
- Types: (none)
## Sidebar
Module: `sidebar`
### Import
```tsx
import { Sidebar } from "@almach/ui";
```
### Quick Example
```tsx
import { Sidebar } from "@almach/ui";
import { LayoutDashboard, Settings } from "lucide-react";
export function AppLayout({ children }: { children: React.ReactNode }) {
return (
<Sidebar.Provider>
<Sidebar collapsible="icon">
<Sidebar.Header className="border-b px-3 py-2">
<span className="text-sm font-semibold">My App</span>
</Sidebar.Header>
<Sidebar.Content>
<Sidebar.Group>
<Sidebar.GroupLabel>Navigation</Sidebar.GroupLabel>
<Sidebar.GroupContent>
<Sidebar.Menu>
<Sidebar.MenuItem>
<Sidebar.MenuButton asChild isActive tooltip="Dashboard">
<a href="/dashboard">
<LayoutDashboard />
<span>Dashboard</span>
</a>
</Sidebar.MenuButton>
</Sidebar.MenuItem>
<Sidebar.MenuItem>
<Sidebar.MenuButton asChild tooltip="Settings">
<a href="/settings">
<Settings />
<span>Settings</span>
</a>
</Sidebar.MenuButton>
</Sidebar.MenuItem>
</Sidebar.Menu>
</Sidebar.GroupContent>
</Sidebar.Group>
</Sidebar.Content>
<Sidebar.Rail />
</Sidebar>
<Sidebar.Inset>
<header className="flex h-12 items-center gap-2 border-b px-4">
<Sidebar.Trigger />
<h1 className="text-sm font-medium">Dashboard</h1>
</header>
<main className="p-4">{children}</main>
</Sidebar.Inset>
</Sidebar.Provider>
);
}
```
### Most Common Tasks
- Build an app navigation sidebar with groups, labels, and menu buttons.
- Collapse to icon-only width on desktop with tooltips (collapsible='icon').
- Slide off-screen on mobile using a react-aria Modal overlay (collapsible='offcanvas').
- Add a close button with Sidebar.Close inside mobile/collapsible sidebars.
- Nest sub-menus under a parent item using Sidebar.MenuSub.
- Wire into an Astro layout using a custom event for the mobile hamburger toggle.
- Control open state with Sidebar.Provider open + onOpenChange props.
### Anatomy
- `Sidebar.Provider`
- `Sidebar`
- `Sidebar.Trigger`
- `Sidebar.Close`
- `Sidebar.Rail`
- `Sidebar.Inset`
- `Sidebar.Header`
- `Sidebar.Content`
- `Sidebar.Footer`
- `Sidebar.Separator`
- `Sidebar.Group`
- `Sidebar.GroupLabel`
- `Sidebar.GroupAction`
- `Sidebar.GroupContent`
- `Sidebar.Menu`
- `Sidebar.MenuItem`
- `Sidebar.MenuButton`
- `Sidebar.MenuAction`
- `Sidebar.MenuBadge`
- `Sidebar.MenuSkeleton`
- `Sidebar.MenuSub`
- `Sidebar.MenuSubItem`
- `Sidebar.MenuSubButton`
### API Notes
- Sidebar.Provider: wrap the layout; defaultOpen/open/onOpenChange control state; Ctrl/Cmd+B toggles sidebar; sidebarWidth/sidebarWidthIcon customize dimensions.
- Sidebar: side ('left'|'right'), variant ('sidebar'|'floating'|'inset'), collapsible ('offcanvas'|'icon'|'none').
- Sidebar.MenuButton: isActive highlights current page; tooltip string shown when collapsed to icons; variant ('default'|'outline'); size ('sm'|'default'|'lg').
- Sidebar.Close: button that calls setOpen(false) on desktop and setOpenMobile(false) on mobile — renders an X icon by default.
- Sidebar.Rail: drag handle that toggles the sidebar; add as last child of Sidebar.
- Sidebar.Inset: wraps main content for the 'inset' variant; peer-driven CSS keeps it responsive.
- useSidebar hook: exposes state, open, setOpen, openMobile, setOpenMobile, isMobile, toggleSidebar.
- Mobile: sidebar renders as a react-aria ModalOverlay + Modal + Dialog, providing focus trap, Escape dismiss, and body scroll lock automatically.
### Exported Symbols
- Values: `Sidebar`, `useSidebar`
- Types: (none)
### Accessibility Notes
- Mobile sidebar uses react-aria Dialog with role='dialog' and aria-modal='true'.
- Focus is trapped within the mobile sidebar when open; Escape closes it.
- icon-collapse mode shows tooltips (Sidebar.MenuButton tooltip prop) for icon labels.
- Sidebar.Trigger and Sidebar.Close include sr-only text for screen readers.
- Sidebar.MenuButton sets aria-current='page' via the isActive prop.
## Skeleton
Module: `skeleton`
### Import
```tsx
import { Skeleton } from "@almach/ui";
```
### Quick Example
```tsx
import { Skeleton } from "@almach/ui";
export function Example() {
return <Skeleton />;
}
```
### Most Common Tasks
- Use the exported component in controlled or uncontrolled form.
### Anatomy
- `Skeleton`
### API Notes
- Refer to the component page for full prop and behavior details.
### Exported Symbols
- Values: `Skeleton`
- Types: (none)
## SwipeActions
Module: `swipe-actions`
### Import
```tsx
import { SwipeActions } from "@almach/ui";
```
### Quick Example
```tsx
import { SwipeActions } from "@almach/ui";
export function Example() {
return <SwipeActions />;
}
```
### Most Common Tasks
- Use the exported component in controlled or uncontrolled form.
### Anatomy
- `SwipeActions`
### API Notes
- Refer to the component page for full prop and behavior details.
### Exported Symbols
- Values: `SwipeActions`, `useSwipeActions`
- Types: `SwipeActionProps`, `SwipeActionsProps`, `SwipeActionVariant`, `SwipeSide`
## SwipeButton
Module: `swipe-button`
### Import
```tsx
import { SwipeButton } from "@almach/ui";
```
### Quick Example
```tsx
import { SwipeButton } from "@almach/ui";
export function Example() {
return <SwipeButton />;
}
```
### Most Common Tasks
- Use the exported component in controlled or uncontrolled form.
### Anatomy
- `SwipeButton`
### API Notes
- Refer to the component page for full prop and behavior details.
### Exported Symbols
- Values: `SwipeButton`
- Types: `SwipeButtonRootProps`, `SwipeButtonThumbProps`
## Switch
Module: `switch`
### Import
```tsx
import { Switch } from "@almach/ui";
```
### Quick Example
```tsx
import { Switch } from "@almach/ui";
<Switch defaultSelected aria-label="Enable notifications" />;
```
### Most Common Tasks
- Toggle settings with immediate feedback.
- Use with label/description for preferences.
- Control setting from external store state.
### Anatomy
- `Switch`
### API Notes
- isSelected/defaultSelected + onChange manage state.
- isDisabled blocks interaction.
- error applies invalid semantics and styles.
### Exported Symbols
- Values: `Switch`
- Types: `SwitchProps`
## Table
Module: `table`
### Import
```tsx
import { Table } from "@almach/ui";
```
### Quick Example
```tsx
import { Table } from "@almach/ui";
export function Example() {
return <Table />;
}
```
### Most Common Tasks
- Use the exported component in controlled or uncontrolled form.
### Anatomy
- `Table`
### API Notes
- Refer to the component page for full prop and behavior details.
### Exported Symbols
- Values: `Table`
- Types: `ColumnDef`
## Tabs
Module: `tabs`
### Import
```tsx
import { Tabs } from "@almach/ui";
```
### Quick Example
```tsx
import { Tabs } from "@almach/ui";
<Tabs
defaultValue="account"
items=[
{ value: "account", label: "Account", content: "Account settings" },
{ value: "security", label: "Security", content: "Security options" },
]
/>;
```
### Most Common Tasks
- Switch between related content panels.
- Control selected tab from parent state.
- Disable individual tabs when unavailable.
### Anatomy
- `Tabs`
- `Tabs.List`
- `Tabs.Tab`
- `Tabs.Panel`
### API Notes
- Use the items prop for declarative tab definitions.
- value/defaultValue + onValueChange manage active tab.
- Tabs supports variant and size styling through its variant props.
### Exported Symbols
- Values: `Tabs`, `tabsListVariants`, `tabsTriggerVariants`
- Types: (none)
## TagInput
Module: `tag-input`
### Import
```tsx
import { TagInput } from "@almach/ui";
```
### Quick Example
```tsx
import { TagInput } from "@almach/ui";
export function Example() {
return <TagInput />;
}
```
### Most Common Tasks
- Use the exported component in controlled or uncontrolled form.
### Anatomy
- `TagInput`
### API Notes
- Refer to the component page for full prop and behavior details.
### Exported Symbols
- Values: `TagInput`
- Types: `TagInputProps`
## Textarea
Module: `textarea`
### Import
```tsx
import { Textarea } from "@almach/ui";
```
### Quick Example
```tsx
import { Textarea } from "@almach/ui";
export function Example() {
return <Textarea />;
}
```
### Most Common Tasks
- Use the exported component in controlled or uncontrolled form.
### Anatomy
- `Textarea`
### API Notes
- Refer to the component page for full prop and behavior details.
### Exported Symbols
- Values: `Textarea`, `textareaVariants`
- Types: `TextareaProps`
## Toast
Module: `toast`
### Import
```tsx
import { toast } from "@almach/ui";
```
### Quick Example
```tsx
import { Toaster, toast } from "@almach/ui";
export function AppRoot() {
return <Toaster />;
}
toast("Saved successfully");
```
### Most Common Tasks
- Show transient feedback after user actions.
- Use semantic variants (success, error, warning, info).
- Attach inline actions for recovery paths.
### Anatomy
- `toast()`
- `Toaster`
### API Notes
- Mount <Toaster /> once near app root.
- toast() accepts title, description, duration, and action.
- toast.promise() maps loading/success/error lifecycle.
### Exported Symbols
- Values: `toast`
- Types: `ToastConfirmOptions`, `ToastOptions`
## Toaster
Module: `toaster`
### Import
```tsx
import { Toaster } from "@almach/ui";
```
### Quick Example
```tsx
import { Toaster } from "@almach/ui";
export function Example() {
return <Toaster />;
}
```
### Most Common Tasks
- Use the exported component in controlled or uncontrolled form.
### Anatomy
- `Toaster`
### API Notes
- Refer to the component page for full prop and behavior details.
### Exported Symbols
- Values: `Toaster`
- Types: (none)
## Tooltip
Module: `tooltip`
### Import
```tsx
import { Tooltip } from "@almach/ui";
```
### Quick Example
```tsx
import { Tooltip } from "@almach/ui";
export function Example() {
return <Tooltip />;
}
```
### Most Common Tasks
- Use the exported component in controlled or uncontrolled form.
### Anatomy
- `Tooltip`
### API Notes
- Refer to the component page for full prop and behavior details.
### Exported Symbols
- Values: `Tooltip`
- Types: (none)