Components | ShellUI Native

Each page shows a live preview rendered with ShellUI for Blazor, which shares the design, and the code for MAUI and Avalonia. Where ShellUI for Blazor has no such component (Bottom Nav, Edge Menu), the preview is the Avalonia component itself, running in your browser. Pick your platform with the switch on any page; every example follows.

Every component runs on both platforms. Components marked Next release are on the main branch of shellui-native and not in the CLI on NuGet (0.2.0-beta.1) yet.

Form

Buttons, inputs, pickers and the other controls that take input.

Component	Description
Button	Displays a button, with variants, sizes, an optional icon and a loading state.
Button Group	Buttons joined into one control, with only the outer corners rounded.
Calendar	A month grid for picking a day.
Checkbox	A checkbox with an optional label and an error state.
Combobox	A select with a search field to filter its items.
Date Picker	A date field that opens a calendar under it.
Date Range Picker	A date field that picks a start and an end date from one calendar.
File Upload	A drop zone that opens the file picker and lists the files you picked.
Form	Fields with a label, a description and an error message, stacked with even spacing.
Input	A text field at the 40px form height, with error and password modes.
Input Group	A text field with an icon, a short text or any view before or after the text.
Input OTP	A one-time-code field with a slot per character.
Label	Text in the ShellUI type scale, with sizes, weights and colour variants.
Multi Select	A searchable select for several options, shown as chips.
Number Input	A number field with decrement and increment buttons.
Radio Group	A set of options where only one can be checked.
Select	Picks one item from a list that floats under its trigger.
Slider	Picks a value in a range by dragging, clicking the track or using the keyboard.
Switch	An on / off toggle with an optional label.
Tag Input	A text field that turns each entry into a removable tag.
Textarea	A multi-line text field that grows with its content.
Time Picker	A time field that opens hour, minute and AM / PM columns.
Toggle	A two-state button that stays pressed.
Toggle Group	A row of toggles where one, or several, can be pressed.

Overlay

Dialogs, sheets, menus and other content that floats above the page.

Component	Description
Alert Dialog	A confirmation that requires a choice: no close button, and the backdrop doesn't dismiss it.
Context Menu	A menu that opens at the pointer on right-click, or on long-press on touch screens.
Dialog	A modal window over the page, with a backdrop.
Drawer	A panel that slides up from the bottom, with a grab handle.
Dropdown	A menu that floats under its trigger.
Hover Card	Rich content that floats under its trigger while the pointer is over either.
Popover	Rich content that floats next to its trigger.
Sheet	A panel that slides in from an edge of the window.
Tooltip	A short hint shown while the pointer rests on a control.

Layout

Cards, accordions and the containers that arrange content.

Component	Description
Accordion	Stacked sections that expand and collapse, one or several at a time.
Aspect Ratio	Keeps its content at a fixed width-to-height ratio.
Card	A bordered container with header, content and footer parts.
Collapsible	Shows and hides a section, animating its height.
Resizable	Panels side by side or stacked, with a divider you drag to resize them.
Scroll Area	A scrollable region with the platform's scrollbar.
Separator	A thin line that divides content, horizontally or vertically.
Wrap Layout	Lays its children out left to right and wraps them onto new rows.

Bars, menus, tabs and other ways to move between views.

Component	Description
Bottom Nav	A mobile tab bar with icon tabs, short labels, badges and an optional raised action button. Next release.
Breadcrumb	The path to the current page, with a chevron between items.
Command	A search field over a list of grouped commands, inline or as a command palette.
Edge Menu	A handle on a screen edge that slides out a rail of tool tiles. Next release.
Link Card	A clickable card with an icon, title and description.
Menubar	A row of menus, like a desktop app's File, Edit and View.
Navbar	A top bar with a brand, links and actions; the links collapse into a menu on narrow screens.
Navigation Menu	A row of top-level links for an app header, where an item can open a panel of links.
Pagination	Previous / next and page numbers, with ellipses for long ranges.
Prev Next Nav	Previous and next page links for the foot of a page.
Sidebar	An app sidebar with groups of items that collapses to a rail of icons.
Stepper	A step-by-step flow with numbered steps and its own navigation.
Tabs	A row of triggers that switches between panels.
Tree View	An expandable tree of rows, with selection.

Data Display

Tables, avatars, badges and other ways to present data.

Component	Description
Avatar	A round image with initials, or a user icon, as the fallback.
Badge	A small pill for a status, count or tag.
Carousel	Swipeable slides with arrows, dots, looping and auto-play.
Chat	A conversation panel with message bubbles, a typing indicator and a message box.
Data Table	A table filled from a list, with a filter, sortable columns, row selection and pages.
Empty State	A placeholder for an empty list or screen, with an icon, text and actions.
Image Viewer	A thumbnail that opens the image over the page, with zoom controls.
Kbd	A keyboard key or shortcut hint.
Progress	A bar showing how far along a task is.
Stat Card	A dashboard metric with a trend and a short description.
Table	A data table with a header, row hover and selection, and an optional caption.
Timeline	A vertical list of events joined by a line.

Charts

Drawn by the components in the theme's chart colours, with a legend, a tooltip and a grow-in animation. How they work.

Component	Description
Bar Chart	Bars for each category, side by side, stacked or lying down.
Line Chart	A line per series across the categories, smooth or straight.
Area Chart	A line per series with the space under it filled, overlapping or stacked.
Pie Chart	Slices of a whole, as a pie or a donut with a value in the middle.
Radar Chart	A spoke per category around a ringed grid, and a filled shape per series.
Radial Chart	Concentric rings that fill towards a maximum, for progress towards goals.

Feedback

Alerts, toasts, spinners and other status messages.

Component	Description
Alert	A callout for a message that needs attention, with an icon per variant.
Callout	A highlighted note on a faint tint of its variant colour.
Skeleton	A pulsing placeholder shown while content loads.
Spinner	A rotating loading indicator.
Toast	Sonner-style notifications that stack in a corner and dismiss themselves.

Utility

Icons, the theme toggle and other building blocks.

Component	Description
Copy Button	Copies text to the clipboard and confirms with a check mark.
Icon	Lucide stroke icons drawn as native shapes, tinted by theme tokens.
Theme Toggle	A button that switches between light and dark mode.