Components
Every component, live
78 pages in 14 groups, each with a live example and the code to copy into your project. Every example works in light and dark, and in all three densities.
Actions 4
Buttons, menus, a right-click menu, keyboard keys.
Button
Working variants for product screens (one primary per screen); showcase variants for moments — sign-in, onboarding, upgrade, hero.
Dropdown menu and Popover
Rich items (icon tile, description, shortcut, badge), account header, dark menu; popovers with arrow, dark and brand.
Context menuNew
Right-click or long-press. The same items and looks as DropdownMenu; submenus, checks, a danger item.
Kbd
Keys drawn as keys; combinations read out with “+”.
Forms 13
Fields, selects, choices, sliders, uploads, colours.
Input, Select, Checkbox, Switch
Input states and FormField
Error (shakes once, announced), warning, success; leading and trailing slots; one message line, so the form never jumps.
Segmented
Pill, solid, outline, glass; three sizes; the thumb slides. Two or three options — beyond three it becomes a Select.
Combobox (searchable select)
For lists past ~8 items. Searches label, hint and keywords in either script: try “dha”, “ঢাকা” or “div”.
Multi selectNew
Chips in the field, search, groups, select all; ↑ ↓ Enter, Backspace removes the last; max says why it stops.
Radio group and Radio card
Dots for forms; whole cards for plans, payment methods, vehicle types.
Checkbox cardNew
RadioCard's twin for choosing several: the whole card toggles, a square mark, a price on the right.
Number, password and code inputs
Numbers clamp when you leave the field, not while typing; Caps Lock is flagged; a pasted code fills every box.
Slider
Smooth: the thumb follows the pointer and settles on the step; clicks and keys glide. default, gradient, fat, stepped, glow, minimal; ranges, marks, vertical.
Tag input
Enter, comma or paste a list; Backspace marks then removes; validate, max, suggestions.
Rating
Hover previews, click again clears, half steps, word labels; read-only with a count.
File upload
card, dropzone, gallery, avatar, button, compact. Rejected files are listed with the reason; images get a thumbnail; progress and retry.
Color picker Pro
Square, hue strip, swatches, hex and the eyedropper; inline or in a popover. Drag or arrow keys.
Date and time 3
Dates, times and ranges with presets.
Date picker
Click the month to jump by month, again to jump by year. Names and digits follow the locale.
Time and date-time pickers
Values stay plain strings: “14:30”, “2026-10-10T14:30”.
Date range picker
Start and End slots, presets with their dates, a band that previews the span, Apply or apply on select.
Bangladesh 7
Phone, taka, address, payment, plate and NID; the Bangla calendar.
Phone inputNew
+880 mobile numbers typed any way, Bangla digits too; names the operator and gives back +8801XXXXXXXXX.
Taka inputNew
Lakh grouping as you type, the cursor kept in place, the amount in words; holds a number.
Address pickerNew
8 divisions, 64 districts, in English or Bangla; stores ids so the language can change.
Payment method pickerNew
bKash, Nagad, Rocket, Upay, card, cash, bank, cash on delivery. Cards, list or chips; fees beside each.
Plate inputNew
Metro or district, class letter, six digits, and the plate drawn in Bangla as on the car.
NID inputNew
10, 13 or 17 digits, grouped as printed; names the kind and never accepts a wrong length.
Bangla dateNew
The revised Bangladesh calendar (1 Boishakh on 14 April), Bangla digits, lakh and crore.
Overlays 4
Dialogs, sheets, confirmations, hover cards.
Dialog and Sheet
The drawer dialog is full width on phones; the centred one is for short confirmations.
Bottom sheetNew
Sheet side="bottom": a handle you can drag down to close; a centred card on wider screens.
Confirm dialog
center, split, banner, sheet; danger, warning, primary; type a word or press and hold for the irreversible ones. Focus starts on Cancel.
Hover card
A preview of a person or a vehicle on hover or focus. default, glass, dark; arrow.
Feedback 5
Alerts, toasts, spinners, progress, empty and error states.
Alert
Five tones, four looks; the icon carries the tone too. Danger and warning are announced.
Toast
Tone icons in tiles, a tone wash, promises with a spinner. Nine positions: every corner and edge, and the middle of the screen.
Spinner
Ring, dots, wave; five sizes; takes the text colour unless tone="brand". Keeps turning, slowly, under reduced motion.
Progress
Bar, gradient (with sheen), striped (moving), segmented (steps), indeterminate; and a ring with the number inside.
Empty, error and loading
Data display 9
Badges, avatars, cards, accordions, carousels, trees.
Badge
Status is always dot + text + hue. Soft by default; solid, outline, dot, gradient and live when the context asks for it.
Avatar
Colour from the name (same person, same colour); status dot, verified tick, gradient ring, square for organisations.
Card
The one surface: hairline border, no shadow at rest.
Accordion
line, card, contained; chevron or plus; icons, descriptions, badges; opens to the content's real height.
Carousel
Native scroll-snap. Arrows inside or outside, dots or a bar, autoplay that stops on hover and for reduced motion.
Tree view
Sites → levels → bays. Select one, or check many with tri-state parents. Full keyboard support.
Scroll area
The system's own thin scrollbar over the content; edges fade while there is more.
Note
Soft, outline, gradient; any tone; title, icon and an action.
Money
Data tables 4
Filters, saved views, inline and bulk edit.
Data table
Advanced filters (text, select, number, date; all or any), search, sort, columns, saved views, CSV export.
Data table — people
UserCell (avatar with status, name, email) · role as a dot badge · RowActions: quick icons on hover, ⋯ for the rest, danger last.
Data table — looks
striped for long scans · cards for few, rich rows · minimal inside cards and drawers.
Data table — editable (bordered)
Click a cell: Enter or leaving saves, Esc cancels. Tick rows for bulk Edit or Delete. Hours must be 1–24; saves take 400 ms like a real API.
Dashboards 4
Page heroes and headers, KPI rows, stat cards.
Page hero (premium header)
For a screen's front door: crumbs, identity, facts, actions, headline numbers and tabs in one framed block.
Page header
KPI row
Currency comes from the settings store; never hard-coded.
Stat cards (premium KPIs)
icon · spark (area to the edge) · target (ring) · gradient (the lead number, one per page) · comparison (split bar).
Activity 4
Feeds, timelines, change history and notes.
Activity feed
Decisions waiting on a person. list (in a card) · cards (tone edge + icon tile) · compact (sidebar, phone).
Activity log (Timeline)
Everything that happened, grouped by day, on one line.
Change history (audit)
Who, what, when and why; expand to see each field old → new. The newest entry starts open.
Change notes (threaded)
Notes with tags, the pinned decision on top, replies nested and folded after one level. Reply works.
Organisation 2
The org chart and the kanban board.
Charts 7
Trend, bar, line, donut, gauge, heatmap, bar list.
Trend chart
One y-axis, always. A legend above one series.
Bar chart
Line chart
This week against last week (dashed) and a target line. One y-axis.
Donut chart
Six slices at most; the rest fold into Other. Hover a slice or a legend row.
Gauge
Green, amber past 75%, red past 90%. The number is always written.
Heatmap
Busy hours by weekday — one hue, light to dark, with the scale printed.
Bar list
Who leads: the name sits on its bar, scaled to the leader.
Brand 4
The logo, app icons, signatures and watermarks.
WAVEINNO logo
The official logo. The wordmark follows the text colour, so it works in dark mode as is.
App icon (WaveMark)
Seven tones drawn only from the logo colours, each with its own shadow tint; squircle or round.
Powered by (signature)
How WAVEMAP signs its maps. Inline for footers and sign-in; floating for maps, kiosks and gate screens.
Watermark
Behind receipts, exported reports and screenshots that leave the building.