UI Component List
Below is a brief overview of each React UI component exposed via window.UIComponents.
- Avatar – user image container with fallback initials.
- Badge – small label for statuses or counts.
- Breadcrumb – hierarchical navigation trail.
- Button – styled button supporting variants and sizes.
- Calendar – date picker using the Radix calendar API.
- Card – container with header, content and footer sections.
- Checkbox – form checkbox element.
- Collapsible – show or hide content with animation.
- Command – command palette container.
- ContextMenu – right-click menu wrapper.
- DialogStack – stackable dialogs for complex flows.
- Dialog – modal dialog with header and footer slots.
- DropdownMenu – triggerable menu for actions or selections.
- Input – styled text input field.
- Label – text label associated with form elements.
- Menubar – horizontal navigation bar with menus.
- Pagination – next/previous and page number navigation.
- Popover – small overlay pop-up container.
- Select – styled select box built on Radix.
- Separator – horizontal or vertical divider line.
- Sheet – slide-over panel for secondary content.
- Sidebar – vertical navigation container.
- Skeleton – placeholder loading indicator.
- Slider – draggable range input.
- Sonner – themed toast notifications.
- Switch – toggle switch control.
- Table – scrollable table wrapper with subcomponents.
- Textarea – multiline text input.
- Tooltip – hover or focus information bubble.
These components live under src/assets/js/components/ui and can be imported from the global container for reuse in external modules.
Importing from the NPM package
After running npm run build, all UI components are also compiled to the dist/ui directory of the package. This allows you to import them directly from your project:
import { Button } from 'adminizer/ui/button.js';
export default function Example() {
return <Button>Click</Button>;
}
The package.json exports map exposes the ./ui/* path so TypeScript and bundlers can resolve the compiled files.