Tendoo Design

Components

Browse reusable UI components that follow the Tendoo Design System.

Components

Tendoo Design provides a comprehensive library of reusable, accessible, and scalable UI components — built to ensure consistency across all Tendoo web and mobile products.

These components are tightly integrated with our design tokens, patterns, and guidelines, empowering designers and developers to build faster, maintain consistency, and ensure accessibility out of the box.

What You’ll Find

  • Core components — Buttons, inputs, cards, dialogs, etc.
  • Layout components — Grids, containers, aspect ratios, scroll areas, resizable containers.
  • Navigation components — Breadcrumbs, tabs, menus, steppers, navigation menus.
  • Utility components — Tooltips, skeletons, snackbars, toasts, progress indicators.
  • Form components — Checkboxes, switches, textareas, selects, sliders, date and time pickers.
  • Data display — Tables, charts, avatars, calendars, labels, badges.
  • Interactive components — Drawers, dropdowns, modals, accordions, carousels.

Explore over 50+ UI components, each designed to work across web and mobile platforms with platform-specific optimization when needed.

Some of our most commonly used components:

  • Button
  • Input
  • Card
  • Modal (Dialog / Alert Dialog / Drawer / Sheet)
  • Tabs and Menus
  • Data Table
  • Date & Time Picker
  • Avatar and Badge

For a full list, browse all components.

Get Started

Each component includes:

  • ✅ Usage examples
  • ♿ Accessibility guidelines
  • 🧩 Code snippets and props

We’ve done the groundwork — so you can focus on building better experiences.

Available Components

Here’s a complete list of components in the Tendoo Design System:

  • Accordion
  • Alert Dialog
  • Aspect Ratio
  • Avatar
  • Badge
  • Breadcrumb
  • Button
  • Calendar
  • Card
  • Carousel
  • Chart
  • Checkbox
  • Collapsible
  • Combobox
  • Command
  • Context Menu
  • Data Table
  • Date Picker
  • Dialog
  • Drawer
  • Dropdown Menu
  • Input
  • Input OTP
  • Label
  • Link
  • List Group
  • Menubar
  • Navigation Menu
  • Pagination
  • Popover
  • Progress
  • Radio Group
  • Range Slider
  • Resizable
  • Scroll Area
  • Select
  • Separator
  • Sheet
  • Skeleton
  • Snackbar
  • Stepper
  • Switch
  • Tab
  • Table
  • Textarea
  • Time Picker
  • Toast
  • Toggle
  • Toggle Group
  • Tooltip

Design Token

Define, manage, and apply consistent design decisions using scalable and platform-agnostic tokens in the Tendoo Design System.

Accordion

Accordion