Theme

Mozaic Showcase

React playground for the Adeo design system

Examples

  • Sign in
  • Account settings
  • Checkout wizard
  • Dashboard

Foundations

  • Icons
  • Coloured icons

Action

  • Button
  • Link
  • Link Group

Form

  • Text Input
  • Textarea
  • Field
  • Checkbox
  • Radio
  • Toggle
  • Select
  • Password Input
  • Phone Number Input
  • Pincode Input
  • Quantity Selector
  • File Uploader
  • Datepicker
  • Star Rating
  • Segmented Control
  • Controls Options
  • Combobox
  • Listbox
  • Option Listbox

Feedback

  • Status Message
  • Status Notification
  • Toaster
  • Callout
  • Tooltip
  • Modal
  • Drawer
  • Popover
  • Overlay
  • Loader
  • Loading Overlay
  • Circular Progressbar
  • Linear Progressbar (Percentage)
  • Linear Progressbar (Buffer)

Navigation

  • Breadcrumb
  • Tabs
  • Pagination
  • Stepper (Bottom Bar)
  • Stepper (Compact)
  • Stepper (Inline)
  • Stepper (Stacked)
  • Sidebar
  • Built-in Menu
  • Action List
  • Accordion List
  • Action Bottom Bar
  • Navigation Indicator
  • Page Header

Status

  • Status Badge
  • Status Dot
  • Number Badge
  • Tag
  • Flag
  • Avatar
  • KPI Item

Layout

  • Divider
  • Tile
  • Carousel
Navigation

Sidebar

Vertical navigation rail.

@use "@mozaic-ds/styles/components/sidebar";

Vertical nav rail

  • Dashboard
  • Orders
  • Customers
  • Products
  • Settings
tsx