Components

@myghf/ui ships accessible, brand-aligned Vue 3 components. Every component page follows the same structure — a short overview, live examples, then props, events, slots, exposed methods, accessibility, and dark-mode/RTL notes.

Theming comes for free

Components style from the --myghf-* design tokens, so they follow your brand overrides and the dark theme automatically. See the theming guide for the token model, and the RTL guide for bidi behaviour.

Actions & display

Components that trigger actions or present short, non-interactive information.

Component	Exports	Summary
Button	Button	Primary action control with five variants, five sizes, and loading/disabled states.
Tag	Tag	Compact label or chip with tones, an optional icon, and an optional remove button.
Alert / Message	Alert, Message	Inline feedback message; the same component is exported under two names.
ThemeToggle	ThemeToggle	Button that flips the shared light/dark theme.
Icon	Icon	Renders a Lucide icon by name.

Form

Inputs and controls for collecting and validating user data.

Component	Exports	Summary
Input	Input	Single-line text field with optional leading/trailing icons and three sizes.
InputNumber	InputNumber	Numeric field with min/max/step, Intl formatting, and optional stepper buttons.
Textarea	Textarea	Multi-line text field with a configurable row count.
Password	Password	Password field with a show/hide toggle and optional strength feedback.
Checkbox	Checkbox	Boolean control with an aria-checked state.
Select	Select	Dropdown listbox for single or multiple selection, with optional clear.
SelectButton	SelectButton	Segmented control for a mutually exclusive set of options.
DatePicker	DatePicker	Calendar field for a single date, a range, or a date and time.
TreeSelect	TreeSelect	Tree dropdown that emits the selected leaf keys.
TransferList	TransferList	Moves items between available and selected lists.

Overlays

Dialogs, drawers, menus, and toast notifications.

Component	Exports	Summary
Dialog	Dialog	Modal window with header, body, and footer regions.
Drawer	Drawer	Edge-anchored panel with logical start/end positions and configurable dismissal.
DropdownMenu	DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem	Composable dropdown menu for actions and commands.
Toast	Toaster, useToast, createToastStore	Provider plus store for transient notifications in six logical positions.

Navigation & data

Tabbed navigation and the table family, from unstyled primitives to a headless data grid.

Component	Exports	Summary
Tabs	Tabs, TabsList, TabsTrigger, TabsContent	Composable tab strip and panels, controlled by v-model.
Table	Table, TableHeader, TableBody, TableRow, TableHead, TableCell, TableEmpty, TablePagination	Unstyled table primitives plus a pagination control.
DataTable	DataTable, DataTableFeatures	Headless TanStack Table v9 grid with sorting and row expansion.
TreeTable	TreeTable, TreeTableColumn, TreeNode	Expandable hierarchical grid with per-column cell slots.