Components — Coconut Design System

Buttons

Variants

With Icons & Sizes

<button class="btn btn-blue">Primary</button>
<button class="btn btn-green btn-sm">Small Success</button>
<button class="btn btn-danger-outline">Danger Outline</button>
<button class="btn disabled">Disabled</button>

Badges

Status badges with animated pulsing dots

Active Pending Error Offline

<span class="badge badge-green">
  <span class="badge-dot"></span>Active
</span>
/* Colors: badge-green, badge-orange, badge-red, badge-gray */
/* Dot animation: @keyframes dotPulse 2s infinite */

Cards

METRIC Active

Monthly Revenue

Last updated 2 min ago

STATUS Warning

API Health

Response time elevated

SYSTEM Online

Database Cluster

3 replicas synced

<div class="card">
  <div class="card-header">
    <span class="card-label">LABEL</span>
    <span class="badge badge-green"><span class="badge-dot"></span>Status</span>
  </div>
  <div class="card-title">Title</div>
  <div class="card-sub">Subtitle</div>
</div>
/* Hover: translateY(-2px) scale(1.005) + shadow-lg */

Tabs

Navigation tabs with active underline

Tab content area — switches on click

<div class="tabs">
  <button class="tab active">Overview</button>
  <button class="tab">Settings</button>
</div>

Toggle Switches

On/off toggle states

Notifications

Dark Mode

Auto Backup

<button class="toggle on"></button>  <!-- on state -->
<button class="toggle"></button>     <!-- off state -->

Avatars

Sizes and avatar group with overlap

A BM CD

Avatar Group

A B C D +3

<span class="avatar sm">A</span>    <!-- 24px -->
<span class="avatar">BM</span>      <!-- 32px (default) -->
<span class="avatar lg">CD</span>    <!-- 44px -->

<div class="avatar-group">           <!-- overlapping -->
  <span class="avatar">A</span>
  <span class="avatar">B</span>
</div>

Chips / Tags

Filterable tags with optional icon and active state

check All Frontend Backend DevOps label Tagged Removable close

<span class="chip active">Selected</span>
<span class="chip">Default</span>
<span class="chip removable">Tag <span class="material-symbols-outlined">close</span></span>

Progress Bars

Sizes: sm (4px), default (8px), lg (12px)

Large78%

Default45%

Small92%

<div class="progress-bar lg">
  <div class="progress-fill" style="width:78%"></div>
</div>
/* Sizes: .sm (4px), default (8px), .lg (12px) */
/* Colors: default (accent), .green, .red, .orange, .purple */

Loading Spinner

Sizes: sm (16px), default (32px), lg (48px)

Small

Default

Large

On color

<div class="spinner"></div>
<div class="spinner spinner-sm"></div>
<div class="spinner spinner-lg"></div>
/* On colored backgrounds: */
<div class="spinner spinner-sm spinner-white"></div>

Step Indicator

Wizard-style progress with done, active, and pending states

check

Account

check

Profile

3

Settings

4

Review

<div class="steps">
  <div class="step done"><div class="step-num">✓</div><span class="step-label">Done</span></div>
  <div class="step-line done"></div>
  <div class="step active"><div class="step-num">2</div><span class="step-label">Current</span></div>
  <div class="step-line"></div>
  <div class="step"><div class="step-num">3</div><span class="step-label">Pending</span></div>
</div>

Tables

Name	Type	Role	Status
Production API	`service`	Backend	Active
Staging API	`service`	Testing	Deploying
Worker Queue	`worker`	Background	Running
Cron Scheduler	`cron`	Automation	Stopped

Code Blocks

Command Block (terminal style)

# Install dependencies $ npm install $ npm run build # Start development server $ npm run dev

Callouts

info Info: Use callouts to highlight important information.

check_circle Success: Operation completed successfully.

warning Warning: This action may have side effects.

error Error: Something went wrong. Please try again.

Form Elements

Inputs, selects, textarea, custom select

Text Input

Custom Select

Textarea

Inline Rows

cloud

Cloud Storage

250 GB used of 500 GB

Active

security

SSL Certificate

Expires in 45 days

Renew Soon

backup

Last Backup

3 hours ago · 12.4 GB

Complete

Modal / Popup

Standard modal with backdrop blur and scale animation

Create New Item close

Name

Description

Accordion

Getting Started expand_more

Install the package, import the CSS tokens, and start building. All components work out of the box with light and dark mode.

Customization expand_more

Override any CSS custom property in your own stylesheet. All tokens are defined on :root and can be scoped to any container.

Browser Support expand_more

All modern browsers: Chrome 90+, Firefox 88+, Safari 14+, Edge 90+. CSS custom properties and grid layout required.

Header Select

Custom styled select with dropdown arrow

Secret Reveal

API key / password field with show/hide toggle

••••••••••••••••

Sidebar Icon Squares

28×28 colored squares, 7px radius, white icon

Status Dots

Colored indicator dots (7px)

Online

Offline

Warning

Info

Custom