Components (User Guide)
The showcase galleries for every reusable building block — UI elements, widgets, and icons.
UI Elements
Where to find them: Components → UI Elements. Routes are under /ui/*.
Each page presents several distinct variations of one component in a consistent, card-based layout. Browse them to see the options before a developer wires them into a real screen.
| Page | What it shows | Route |
|---|---|---|
| Accordion | Expand/collapse sections, single- and multiple-open modes | /ui/accordion |
| Alerts | Inline messages in every tone (success, warning, danger, info) and style (soft, solid, outline, accent), dismissible | /ui/alerts |
| Badges | Status pills and count bubbles in every tone, size, and style | /ui/badges |
| Buttons | Every button variant, size, state (loading, disabled), and icon layout | /ui/buttons |
| Carousel | Sliding/fading image and content carousels with arrows, dots, autoplay, and swipe | /ui/carousel |
| Dropdowns | Menus, including multi-level submenus | /ui/dropdowns |
| Lightbox | Thumbnail galleries that open a full-screen image viewer (arrow-key / Esc navigation) | /ui/lightbox |
| Modals | Dialogs of every size, plus a side sheet and a bottom sheet | /ui/modals |
| Motion | The animation effects library — entrance, scroll reveals, animated text and numbers, overlays | /ui/motion |
| Pagination | Page navigators in several styles and sizes | /ui/pagination |
| Panels | The collapsible "portlet" card — header styles, collapse/refresh/maximize, and a drag-to-reorder grid | /ui/panels |
| Progress | Progress bars (striped, indeterminate, labelled) and progress rings | /ui/progress |
| Notifications | Buttons that fire example toast notifications so you can preview each tone and position | /ui/notifications |
| Tabs | Tabbed panels in underline / pills / segmented / boxed styles | /ui/tabs |
| Typography | The type scale, headings, article text, and the fonts each skin uses | /ui/typography |
How to use them: open a page and interact with the live examples — click buttons, open modals, drag panels, fire toasts. Everything responds to your current theme and skin.
Notifications (toast preview)
What it is: the Notifications page (/ui/notifications) is a set of buttons that fire example
toast notifications so you can preview each look before your team uses them in a real screen.
How to use it
- Click a tone button (neutral, info, success, warning, danger) to fire that toast.
- Try the action toasts — they include an inline button (like Undo) that also dismisses the toast.
- Try the card styles (default, solid, accent) to see the different treatments.
- Where do they appear? Toast position follows your app-wide setting — change it in the Customizer or Layout Settings, or use the Toast Position page-layout preview to try positions live.
Widgets gallery
What it is: a gallery of ready-made dashboard widgets — KPI tiles, donut and gauge charts, weekly bar cards, welcome heroes, an order-tracking card, activity feeds, and cloud-console-style sets.
Where to find it: Components → Widget. Route: /widgets.
How to use it
- Scroll to browse the widget families.
- Each widget card has a ⋯ menu with demo actions (Refresh, Export CSV, View details, Fullscreen, Remove) so you can feel how a real portlet behaves.
- Charts and stat colours follow your theme and skin.
Icons browser
What it is: a searchable browser of every icon available in the app (the lucide-react icon set).
Where to find it: Components → Icons. Route: /icons.
How to use it
- Search for an icon by name.
- Preview it at different sizes and stroke weights.
- Click an icon to copy its component name to your clipboard — handy for developers building new screens.
Tips
- These pages are for reference. They don't hold your data — they exist so everyone knows the visual vocabulary of the app.
- Developers: the full prop/API reference lives in the component docs — Core & Feedback, Overlays, Panel, Widgets, and Animation & Effects.
Was this page helpful?