Adfidence Component Library

Primary

800 #1F356F

500 #4586F7

600 #214DA5

50 #D3E4FD

100 #E4EFFE

Neutral

900 #050B19

800 #141930

700 #2C3554

600 #454D62

500 #656E85

400 #99A2B5

300 #D1D5E1

200 #E6E9EE

100 #F4F5F8

50 #F8F9FB

Secondary

Blue 500 #7A6FF6

Blue 100 #E4E2FC

Purple 500 #C153E8

Purple 100 #F3DDFA

Pink 500 #DC4CA2

Pink 100 #F8DBEC

Teal 500 #62BAAC

Teal 100 #E0F1EE

Coral 500 #FF8070

Coral 100 #FFE6E2

Violet 500 #731DD8

Violet 100 #D5BBF3

Semantic

Success 500 #00B16C

Success 100 #D9F3E9

Error 500 #DF3C32

Error 100 #FAE2E0

Warning 500 #E5A34F

Warning 100 #F9E4BB

HTML

<button class="btn btn--primary">Primary</button>
<button class="btn btn--secondary">Secondary</button>
<button class="btn btn--outline">Outline</button>
<button class="btn btn--ghost">Ghost</button>
<button class="btn btn--danger">Danger</button>
<button class="btn btn--success">Success</button>

CSS

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-weight: var(--font-medium);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
}

.btn--primary {
  background: var(--color-primary-500);
  color: var(--color-neutral-0);
}

.btn--secondary {
  background: var(--color-neutral-100);
  color: var(--color-neutral-700);
}

.btn--outline {
  background: transparent;
  color: var(--color-primary-500);
  border-color: var(--color-primary-300);
}

HTML

<button class="btn btn--primary btn--sm">Small</button>
<button class="btn btn--primary">Default</button>
<button class="btn btn--primary btn--lg">Large</button>
<button class="btn btn--primary btn--xl">Extra Large</button>

CSS

.btn--sm {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
}

.btn--lg {
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-md);
}

.btn--xl {
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-lg);
}

HTML

<button class="btn btn--primary">Normal</button>
<button class="btn btn--primary" disabled>Disabled</button>
<button class="btn btn--primary btn--loading">Loading</button>

CSS

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn--loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.btn--loading::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.6s linear infinite;
}

Email

Password

Search

HTML

<div class="input-wrapper">
  <label class="input-label">Email</label>
  <input type="email" class="input" placeholder="name@example.com">
</div>

<div class="input-wrapper">
  <label class="input-label input-label--required">Password</label>
  <input type="password" class="input" placeholder="Enter password">
</div>

<div class="input-wrapper">
  <label class="input-label">Search</label>
  <div class="input-group">
    <svg class="input-icon">...</svg>
    <input type="text" class="input" placeholder="Search...">
  </div>
</div>

CSS

.input-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.input-label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-neutral-700);
}

.input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-md);
}

.input:focus {
  outline: none;
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px var(--color-primary-100);
}

Try it

States

Default

Hover

Error

Success

Disabled

HTML

<input type="text" class="input" placeholder="Default input">

<input type="text" class="input input--error" value="Invalid">
<span class="input-error">This field is required</span>

<input type="text" class="input input--success" value="Valid">

<input type="text" class="input" disabled>

CSS

.input--error {
  border-color: var(--color-error-500);
}

.input--error:focus {
  box-shadow: 0 0 0 3px var(--color-error-100);
}

.input--success {
  border-color: var(--color-success-500);
}

.input:disabled {
  background: var(--color-neutral-100);
  cursor: not-allowed;
}

Try it

States

Default

Hover

Checked

Indeterminate

Disabled

HTML

<label class="checkbox-wrapper">
  <input type="checkbox" class="checkbox">
  <span class="checkbox-label">Unchecked</span>
</label>

<label class="checkbox-wrapper">
  <input type="checkbox" class="checkbox" checked>
  <span class="checkbox-label">Checked</span>
</label>

CSS

.checkbox-wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
}

.checkbox {
  width: 18px;
  height: 18px;
  appearance: none;
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-sm);
}

.checkbox:checked {
  background: var(--color-primary-500);
  border-color: var(--color-primary-500);
}

Try it

States

Off

Hover

On

Disabled

HTML

<label class="toggle-wrapper">
  <input type="checkbox" class="toggle">
  <span class="toggle-label">Off</span>
</label>

<label class="toggle-wrapper">
  <input type="checkbox" class="toggle" checked>
  <span class="toggle-label">On</span>
</label>

CSS

.toggle {
  position: relative;
  width: 44px;
  height: 24px;
  appearance: none;
  background: var(--color-neutral-300);
  border-radius: var(--radius-full);
  cursor: pointer;
}

.toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s;
}

.toggle:checked {
  background: var(--color-primary-500);
}

.toggle:checked::after {
  transform: translateX(20px);
}

Default Primary Success Warning Error Info

HTML

<span class="badge badge--default">Default</span>
<span class="badge badge--primary">Primary</span>
<span class="badge badge--success">Success</span>
<span class="badge badge--warning">Warning</span>
<span class="badge badge--error">Error</span>
<span class="badge badge--info">Info</span>

CSS

.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  border-radius: var(--radius-full);
}

.badge--primary {
  background: var(--color-primary-100);
  color: var(--color-primary-700);
}

.badge--success {
  background: var(--color-success-100);
  color: var(--color-success-700);
}

Active Pending Failed

HTML

<span class="badge badge--success">
  <span class="badge__dot"></span>Active
</span>

CSS

.badge__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: currentColor;
}

React Design Marketing

HTML

<span class="tag">
  React
  <button class="tag__remove">&times;</button>
</span>

CSS

.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  border-radius: var(--radius-full);
}

.badge--primary {
  background: var(--color-primary-100);
  color: var(--color-primary-700);
}

.badge--success {
  background: var(--color-success-100);
  color: var(--color-success-700);
}

XS SM MD LG XL

HTML

<span class="avatar avatar--xs">XS</span>
<span class="avatar avatar--sm">SM</span>
<span class="avatar">MD</span>
<span class="avatar avatar--lg">LG</span>
<span class="avatar avatar--xl">XL</span>

CSS

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--color-primary-100);
  color: var(--color-primary-700);
}

.avatar-group .avatar {
  margin-left: -8px;
  border: 2px solid white;
}

JD

AB

CD

EF

HTML

<div class="avatar-wrapper">
  <span class="avatar">JD</span>
  <span class="avatar-status avatar-status--online"></span>
</div>

CSS

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--color-primary-100);
  color: var(--color-primary-700);
}

.avatar-group .avatar {
  margin-left: -8px;
  border: 2px solid white;
}

A B C D +3

HTML

<div class="avatar-group">
  <span class="avatar">A</span>
  <span class="avatar">B</span>
  <span class="avatar">C</span>
  <span class="avatar">+3</span>
</div>

CSS

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--color-primary-100);
  color: var(--color-primary-700);
}

.avatar-group .avatar {
  margin-left: -8px;
  border: 2px solid white;
}

HTML

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

CSS

.tabs {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1px solid var(--color-neutral-200);
}

.tab {
  padding: var(--space-3) var(--space-4);
  font-weight: var(--font-medium);
  color: var(--color-neutral-500);
  background: none;
  border: none;
  cursor: pointer;
}

.tab--active {
  color: var(--color-primary-600);
  border-bottom: 2px solid var(--color-primary-500);
}

HTML

<div class="tabs tabs--pills">
  <button class="tab tab--active">Platform View</button>
  <button class="tab">Check View</button>
</div>

CSS

.tabs {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1px solid var(--color-neutral-200);
}

.tab {
  padding: var(--space-3) var(--space-4);
  font-weight: var(--font-medium);
  color: var(--color-neutral-500);
  background: none;
  border: none;
  cursor: pointer;
}

.tab--active {
  color: var(--color-primary-600);
  border-bottom: 2px solid var(--color-primary-500);
}

HTML

<nav class="breadcrumbs">
  <a href="#" class="breadcrumb">Home</a>
  <span class="breadcrumb-separator">/</span>
  <a href="#" class="breadcrumb">Campaigns</a>
  <span class="breadcrumb-separator">/</span>
  <span class="breadcrumb breadcrumb--current">Details</span>
</nav>

CSS

.breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.breadcrumb {
  color: var(--color-neutral-500);
  text-decoration: none;
}

.breadcrumb:hover {
  color: var(--color-primary-600);
}

.breadcrumb--current {
  color: var(--color-neutral-800);
  font-weight: var(--font-medium);
}

HTML

<nav class="pagination">
  <button class="pagination__btn" disabled>&larr;</button>
  <button class="pagination__btn">1</button>
  <button class="pagination__btn pagination__btn--active">2</button>
  <button class="pagination__btn">3</button>
  <span class="pagination__ellipsis">...</span>
  <button class="pagination__btn">10</button>
  <button class="pagination__btn">&rarr;</button>
</nav>

CSS

.pagination {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.pagination__btn {
  min-width: 36px;
  height: 36px;
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-md);
  background: transparent;
}

.pagination__btn--active {
  background: var(--color-primary-500);
  color: white;
  border-color: var(--color-primary-500);
}

✓

Select Campaign

2

1st Review

3

3rd Review

4

Summary

HTML

<div class="stepper">
  <div class="step step--completed">
    <div class="step__indicator">&#10003;</div>
    <div class="step__content">
      <div class="step__title">Step 1</div>
    </div>
  </div>
  <div class="step step--active">
    <div class="step__indicator">2</div>
    <div class="step__content">
      <div class="step__title">Step 2</div>
    </div>
  </div>
  <!-- More steps... -->
</div>

CSS

.stepper {
  display: flex;
  align-items: flex-start;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
}

.step__indicator {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-neutral-100);
  border: 2px solid var(--color-neutral-200);
}

.step--active .step__indicator {
  background: var(--color-primary-500);
  border-color: var(--color-primary-500);
  color: white;
}

This is the card body content. You can place any content here including text, images, or other components.

HTML

<div class="card">
  <div class="card__header">
    <div>
      <h3 class="card__title">Card Title</h3>
      <p class="card__subtitle">Subtitle text</p>
    </div>
  </div>
  <div class="card__body">
    <p>Card body content...</p>
  </div>
  <div class="card__footer">
    <button class="btn btn--ghost btn--sm">Cancel</button>
    <button class="btn btn--primary btn--sm">Save</button>
  </div>
</div>

CSS

.card {
  background: white;
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.card__header {
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-neutral-200);
}

.card__body {
  padding: var(--space-4);
}

.card__footer {
  padding: var(--space-4);
  border-top: 1px solid var(--color-neutral-200);
  background: var(--color-neutral-50);
}

Campaign	Platform	Status	Budget
Summer Sale 2024	Meta	Active	$5,000
Brand Awareness	Google	Pending	$3,200
Holiday Promo	TikTok	Draft	$8,500

HTML

<div class="table-container">
  <table class="table">
    <thead>
      <tr>
        <th>Campaign</th>
        <th>Platform</th>
        <th>Status</th>
        <th>Budget</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Summer Sale</td>
        <td>Meta</td>
        <td><span class="badge badge--success">Active</span></td>
        <td>$5,000</td>
      </tr>
    </tbody>
  </table>
</div>

CSS

.table {
  width: 100%;
  border-collapse: collapse;
}

.table th, .table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
}

.table th {
  background: var(--color-neutral-50);
  font-weight: var(--font-medium);
  border-bottom: 1px solid var(--color-neutral-200);
}

.table tbody tr:hover {
  background: var(--color-neutral-50);
}

Total Revenue $45,231 +12.5% from last month

Active Campaigns 24 -3 from last month

Conversion Rate 3.2% +0.4% from last month

HTML

<div class="stat-card">
  <div class="stat">
    <span class="stat__label">Total Revenue</span>
    <span class="stat__value">$45,231</span>
    <span class="stat__change stat__change--positive">+12.5%</span>
  </div>
</div>

CSS

.stat__value {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
}

.stat__label {
  font-size: var(--text-sm);
  color: var(--color-neutral-500);
}

.stat__change--positive {
  color: var(--color-success-600);
}

.stat__change--negative {
  color: var(--color-error-600);
}

Campaign Progress 65%

HTML

<div class="progress-wrapper">
  <div class="progress-header">
    <span class="progress-label">Progress</span>
    <span class="progress-value">65%</span>
  </div>
  <div class="progress">
    <div class="progress__bar" style="width: 65%;"></div>
  </div>
</div>

CSS

.progress {
  width: 100%;
  height: 8px;
  background: var(--color-neutral-200);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress__bar {
  height: 100%;
  background: var(--color-primary-500);
  transition: width 0.3s ease;
}

Online Away Busy Offline Live

HTML

<span class="status status--success">
  <span class="status__dot"></span>Online
</span>

<span class="status status--success status--pulse">
  <span class="status__dot"></span>Live
</span>

CSS

.status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.status__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.status--success .status__dot {
  background: var(--color-success-500);
}

.status--error .status__dot {
  background: var(--color-error-500);
}

Information

This is an informational message for the user.

Success

Your changes have been saved successfully.

Warning

Please review your settings before continuing.

Error

Something went wrong. Please try again.

HTML

<div class="alert alert--info">
  <i data-lucide="info" class="alert__icon"></i>
  <div class="alert__content">
    <div class="alert__title">Information</div>
    <div class="alert__description">Message here.</div>
  </div>
</div>

<!-- Icon options: info, circle-check, triangle-alert, circle-x -->

CSS

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
}

.alert--success {
  background: var(--color-success-50);
  color: var(--color-success-700);
}

.alert--error {
  background: var(--color-error-50);
  color: var(--color-error-700);
}

HTML

<!-- Toast Container (add to body) -->
<div class="toast-container">
  <div class="toast toast--success">
    <span class="toast__icon">...</span>
    <span class="toast__content">Success message</span>
    <button class="toast__close">&times;</button>
  </div>
</div>

CSS

.toast {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-neutral-800);
  color: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.toast--success { background: var(--color-success-600); }
.toast--error { background: var(--color-error-600); }

JS

// Show a toast notification
showToast('Your message here', 'success');
// Types: 'default', 'success', 'error', 'warning'

HTML

<div class="modal-backdrop modal-backdrop--visible" data-modal-backdrop="id"></div>
<div class="modal modal--visible" data-modal="id">
  <div class="modal__header">
    <h3 class="modal__title">Modal Title</h3>
    <button class="modal__close" data-modal-close="id">&times;</button>
  </div>
  <div class="modal__body">
    <p>Modal content here...</p>
  </div>
  <div class="modal__footer">
    <button class="btn btn--ghost">Cancel</button>
    <button class="btn btn--primary">Confirm</button>
  </div>
</div>

CSS

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-2xl);
}

JS

// Open modal via data attribute
// <button data-modal-trigger="modal-id">Open</button>

// Or close programmatically
closeModal('modal-id');

HTML

<div class="tooltip-wrapper">
  <button class="btn">Hover me</button>
  <div class="tooltip">Tooltip text</div>
</div>

<!-- Bottom position -->
<div class="tooltip-wrapper">
  <button class="btn">Hover me</button>
  <div class="tooltip tooltip--bottom">Bottom tooltip</div>
</div>

CSS

.tooltip {
  position: absolute;
  padding: var(--space-2) var(--space-3);
  background: var(--color-neutral-800);
  color: white;
  font-size: var(--text-sm);
  border-radius: var(--radius-md);
  white-space: nowrap;
}

.tooltip-wrapper:hover .tooltip {
  opacity: 1;
  visibility: visible;
}

HTML

<div class="spinner spinner--sm"></div>
<div class="spinner"></div>
<div class="spinner spinner--lg"></div>
<div class="spinner spinner--xl"></div>

CSS

.spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--color-neutral-200);
  border-top-color: var(--color-primary-500);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.skeleton {
  background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

HTML

<div class="loader-dots">
  <div class="loader-dots__dot"></div>
  <div class="loader-dots__dot"></div>
  <div class="loader-dots__dot"></div>
</div>

CSS

.spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--color-neutral-200);
  border-top-color: var(--color-primary-500);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.skeleton {
  background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

HTML

<div class="skeleton skeleton--avatar"></div>
<div class="skeleton skeleton--text"></div>
<div class="skeleton skeleton--text"></div>
<div class="skeleton skeleton--button"></div>

CSS

.spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--color-neutral-200);
  border-top-color: var(--color-primary-500);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.skeleton {
  background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

Colors

Color Palette

Primary

Neutral

Secondary

Semantic

Buttons

Button Variants

Button Sizes

Button States

Inputs

Input Types

Input States

Checkboxes

Checkbox States

Toggles

Toggle States

Badges & Tags

Badge Variants

Badges with Dot

Tags (Removable)

Avatars

Avatar Sizes

Avatar with Status

Avatar Group

Tabs

Default Tabs

Pill Tabs

Breadcrumbs

Default Breadcrumbs

Pagination

Default Pagination

Stepper

Horizontal Stepper

Cards

Default Card

Campaign Overview

Tables

Default Table

Stats

Stat Cards

Progress

Progress Bars

Status Indicators

Status Types

Alerts

Alert Types

Toasts

Toast Notifications

Modals

Modal Dialog

Tooltips

Tooltip Positions

Loaders

Spinners

Dot Loader

Skeleton Loader

Confirm Action