Not connected
Unauth
Andamio

Overview

Dashboard

Discover

Browse Courses
Browse Projects

Dev Tools

API Setup
Component Library
Sitemap

Connect wallet to start

Andamio Component Showcase

Complete reference for all 55+ Andamio UI components with placeholder data

Quick Navigation
Jump to any component section
Semantic ColorsLayout ComponentsButtonsBadgesCardsAlertsForm ComponentsProgress & LoadingTabsAccordionsDialogs & SheetsDropdowns & MenusTooltips & PopoversTablesAvatarsBreadcrumbsPaginationTogglesSlidersScroll AreasCollapsiblesResizable PanelsState ComponentsConfirmation Dialogs
Responsive Testing
Resize your browser window to see responsive behavior. Current breakpoint: mobile (<375px)xs (375px+)sm (640px+)md (768px+)lg (1024px+)xl (1280px+)2xl (1536px+)
Typography Scale
Global heading styles defined in src/styles/globals.css. Never add custom size/margin/padding to headings—only color classes are allowed.

Heading 1 — Hero Title

<h1> — Page titles, hero sections

Heading 2 — Section Title

<h2> — Major sections

Heading 3 — Subsection Title

<h3> — Subsections, card headers

Heading 4 — Helper Label

<h4> — Labels, minor headers
Heading 5 — Small Label
<h5> — Small labels
Heading 6 — Overline
<h6> — Overlines, categories

Color Variants (allowed)

Default Foreground

<h3>...</h3>

Muted Foreground

<h3 className="text-muted-foreground">

Primary Color

<h3 className="text-primary">

Destructive Color

<h3 className="text-destructive">
Semantic Color System
All colors defined in src/styles/globals.css. Customize these to theme your app.

Base Colors

Background
bg-background / text-foreground
Card
bg-card / text-card-foreground
Popover
bg-popover / text-popover-foreground

Interactive Colors

Primary
bg-primary
Secondary
bg-secondary
Muted
bg-muted
Accent
bg-accent

Status Colors

Success

text-primary

Warning

text-muted-foreground

Destructive

text-destructive

Info

text-secondary

Utility Colors

Border
border-border
Ring
ring-ring

Chart Colors

chart-1
chart-2
chart-3
chart-4
chart-5

Sidebar Colors

Sidebar
bg-sidebar
Primary
bg-sidebar-primary
Accent
bg-sidebar-accent
Border/Ring
sidebar-border
Layout Components
Responsive layout helpers for consistent page structure

AndamioPageHeader

Page Title

A description of this page

With Action

Page with action button

With Badge

Published

AndamioSectionHeader

Section Title

With Icon

With Action

State Components

AndamioEmptyState

No items found

Get started by creating your first item

AndamioNotFoundCard

Page Not Found

Error
The page you're looking for doesn't exist

AndamioStatCard

1,234

Total Users

$45,678

Revenue

89

Courses

456

Messages

AndamioPageLoading

Buttons
Different button variants and sizes

Variants

Sizes

With Icons

Standardized Save Button

Use AndamioSaveButton for consistent save interactions

States

Badges
Status indicators and labels
DefaultSecondaryDestructiveOutline
PublishedPendingFeatured
Cards
Container components for content
Basic Card
A simple card with header

Card content goes here. This is placeholder text.

With Icon
Card with icon in header

More placeholder content for this card.

Alerts
Important messages and notifications
Information
This is an informational alert message.
Error
Something went wrong. Please try again.
Form Components
Input fields, selects, checkboxes, and more
Progress & Loading
Progress bars and skeleton loaders
Progress: 60%

Skeleton Loaders

Tabs
Tabbed content navigation

This is the overview tab content with general information.

Accordions
Collapsible content sections

Dialogs & Sheets
Modal overlays and side panels
Dropdowns & Menus
Dropdown menus and context menus
Right click here
Tooltips & Popovers
Hover and click-triggered overlays
Tables
Data tables with responsive container
NameStatusEmailRoleActions
John DoeActivejohn@example.comAdmin
Jane SmithPendingjane@example.comEditor
Bob WilsonActivebob@example.comViewer
Avatars
User profile images with fallbacks
CNANJDAB
Breadcrumbs
Navigation path indicators
  1. Home
  3. Courses
  5. Introduction
  7. Module 1
Pagination
Page navigation controls
  • Previous
  • 1
  • 2
  • 3
  • More pages
  • Next
Toggles
Toggle buttons and groups

Single Toggle

Toggle Group (Single)

Toggle Group (Multiple)

Sliders
Range input controls
Value50
Scroll Areas
Custom scrollable containers
Item 1Description for item 1
Item 2Description for item 2
Item 3Description for item 3
Item 4Description for item 4
Item 5Description for item 5
Item 6Description for item 6
Item 7Description for item 7
Item 8Description for item 8
Item 9Description for item 9
Item 10Description for item 10
Item 11Description for item 11
Item 12Description for item 12
Item 13Description for item 13
Item 14Description for item 14
Item 15Description for item 15
Item 16Description for item 16
Item 17Description for item 17
Item 18Description for item 18
Item 19Description for item 19
Item 20Description for item 20
Collapsibles
Expand/collapse content sections
@johndoe starred 3 repositories
@andamio/platform
Resizable Panels
Drag to resize panel sections
Panel One
Panel Two
Confirmation Dialogs
Alert dialogs for destructive actions
Toasts (Sonner)
Notification toasts
All Available Components
Complete list of 55+ Andamio UI components
AccordionAlertAlert DialogAspect RatioAvatarBadgeBreadcrumbButtonCalendarCardCarouselChartCheckboxCodeCollapsibleCommandConfirm DialogContext MenuDialogDrawerDropdown MenuEmpty StateFormHover CardInputInput OTPLabelMenubarNavigation MenuNot Found CardPage HeaderPage LoadingPaginationPopoverProgressRadio GroupResizableScroll AreaSection DescriptionSection HeaderSelectSeparatorSheetSkeletonSliderSonnerStat CardStatesSwitchTableTable ContainerTabsTextareaToggleToggle GroupTooltip