Gositus AI — Components

Buttons

Badges

DefaultSecondaryOutlineDestructiveGhost

Inputs

Card

Card title
A short supporting description.
Card body content goes here.
Compact card
size="sm" variant.
Tighter spacing.

Skeleton

Layout — atoms

SidebarLogoMark

NavIcon (inactive / active)

CountBadge

31299+

UsageProgress

x

StatusDot

Online Offline

Layout — molecules

SidebarNavItem

Dashboard
Inbox3
Customers
Question Insights

SidebarSectionLabel

Intelligence

UserSummary

WS

Wilson S.

Toko Sinar Jaya

Sidebar footer profile row (UserSummary + logout, as used in AppSidebar)

WS

Wilson S.

Toko Sinar Jaya

PlanUsageCard

Credits6,214 / 10,000
x

Resets Aug 1 ·

AgentStatusBadge

AI Agent OnlineAI Agent Offline

HeaderSearch

AccountMenu

Dashboard — molecules

StatCard (plain / with meta / with progress+trend / loading)

Conversations

12%
1,284

Credit Remaining

6,214
of 10,000 monthly

Credits Used

5%
6,214 / 10,000
62% of monthly quota
x

Needs Attention

TrendBadge (up / down / flat)

12%5%0%

SegmentedTabs

ChannelDonut

Website Live Chat742 (58%)
WhatsApp542 (42%)

TopicBarList

Order Status & Tracking312
Pricing & Promotions227
Product Availability181
Returns & Refunds134
Payment Methods102

AttentionAvatar (waiting / human / ai)

RHDPMA

Color tokens

Primary

Secondary

Muted

Accent

Destructive

Card

Foreground

Border