Installation

Include Onyx CSS in your project using the CDN link:

HTML

<link rel="stylesheet" href="https://onyx.soltansoltanli.com/onyx.min.css">

Or install via npm (coming soon)

Terminal

npm install onyx-ui-kit

Buttons

Back to top

HTML

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

HTML

<button class="onyx-btn onyx-btn-primary onyx-btn-sm">Small</button>
<button class="onyx-btn onyx-btn-primary">Default</button>
<button class="onyx-btn onyx-btn-primary onyx-btn-lg">Large</button>
<button class="onyx-btn onyx-btn-primary onyx-btn-full">Full Width</button>

HTML

<button class="onyx-btn onyx-btn-primary onyx-btn-icon">
  <i class="fas fa-heart"></i>
</button>
<button class="onyx-btn onyx-btn-secondary onyx-btn-icon">
  <i class="fas fa-star"></i>
</button>
<button class="onyx-btn onyx-btn-danger onyx-btn-icon">
  <i class="fas fa-trash"></i>
</button>

Cards

Back to top

Card Title

This is a basic card component with some sample content. Cards are perfect for displaying grouped information.

HTML

<div class="onyx-card">
  <div class="onyx-card-header">
    <h3 class="onyx-h4">Card Title</h3>
  </div>
  <p class="onyx-text">This is a basic card component...</p>
  <div class="onyx-card-footer">
    <button class="onyx-btn onyx-btn-primary onyx-btn-sm">Action</button>
  </div>
</div>

Alerts

Back to top

Information

This is an informational alert message.

Success

Your action was completed successfully.

Warning

This action cannot be undone.

Error

Something went wrong. Please try again.

HTML

<div class="onyx-alert onyx-alert-info">
  <div class="onyx-alert-icon">
    <i class="fas fa-info-circle"></i>
  </div>
  <div>
    <h4 class="onyx-h5">Information</h4>
    <p class="onyx-text-sm">This is an informational alert message.</p>
  </div>
</div>

<div class="onyx-alert onyx-alert-success">
  <div class="onyx-alert-icon">
    <i class="fas fa-check-circle"></i>
  </div>
  <div>
    <h4 class="onyx-h5">Success</h4>
    <p class="onyx-text-sm">Your action was completed successfully.</p>
  </div>
</div>

<div class="onyx-alert onyx-alert-warning">
  <div class="onyx-alert-icon">
    <i class="fas fa-exclamation-triangle"></i>
  </div>
  <div>
    <h4 class="onyx-h5">Warning</h4>
    <p class="onyx-text-sm">This action cannot be undone.</p>
  </div>
</div>

<div class="onyx-alert onyx-alert-danger">
  <div class="onyx-alert-icon">
    <i class="fas fa-times-circle"></i>
  </div>
  <div>
    <h4 class="onyx-h5">Error</h4>
    <p class="onyx-text-sm">Something went wrong. Please try again.</p>
  </div>
</div>

Form Elements

Back to top

Text Input

Email Input

Password

Textarea

Select

Checkbox

Option 1 Option 2

Radio Buttons

Option A Option B

HTML

<div class="onyx-form-group">
  <label class="onyx-form-label">Text Input</label>
  <input type="text" class="onyx-input" placeholder="Enter your name">
</div>

<div class="onyx-form-group">
  <label class="onyx-form-label">Email Input</label>
  <input type="email" class="onyx-input" placeholder="Enter your email">
</div>

<div class="onyx-form-group">
  <label class="onyx-form-label">Password</label>
  <input type="password" class="onyx-input" placeholder="Enter your password">
</div>

<div class="onyx-form-group">
  <label class="onyx-form-label">Textarea</label>
  <textarea class="onyx-input onyx-textarea" placeholder="Enter your message"></textarea>
</div>

<div class="onyx-form-group">
  <label class="onyx-form-label">Select</label>
  <select class="onyx-input onyx-select">
    <option>Choose an option</option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
  </select>
</div>

<div class="onyx-form-group">
  <label class="onyx-form-label">Checkbox</label>
  <div>
    <label style="display: flex; align-items: center; margin-bottom: var(--onyx-spacing-xs);">
      <input type="checkbox" class="onyx-checkbox">
      <span style="margin-left: var(--onyx-spacing-sm);">Option 1</span>
    </label>
    <label style="display: flex; align-items: center;">
      <input type="checkbox" class="onyx-checkbox" checked>
      <span style="margin-left: var(--onyx-spacing-sm);">Option 2</span>
    </label>
  </div>
</div>

<div class="onyx-form-group">
  <label class="onyx-form-label">Radio Buttons</label>
  <div>
    <label style="display: flex; align-items: center; margin-bottom: var(--onyx-spacing-xs);">
      <input type="radio" name="radio-group" class="onyx-radio">
      <span style="margin-left: var(--onyx-spacing-sm);">Option A</span>
    </label>
    <label style="display: flex; align-items: center;">
      <input type="radio" name="radio-group" class="onyx-radio" checked>
      <span style="margin-left: var(--onyx-spacing-sm);">Option B</span>
    </label>
  </div>
</div>

<button class="onyx-btn onyx-btn-primary">Submit</button>

Navigation

Back to top

Profile

Settings

Messages

Notifications

HTML

<nav class="onyx-navbar">
  <ul class="onyx-navbar-nav">
    <li class="onyx-nav-item">
      <a href="#" class="onyx-nav-link active">Home</a>
    </li>
    <li class="onyx-nav-item">
      <a href="#" class="onyx-nav-link">Features</a>
    </li>
    <li class="onyx-nav-item">
      <a href="#" class="onyx-nav-link">Pricing</a>
    </li>
    <li class="onyx-nav-item">
      <a href="#" class="onyx-nav-link">About</a>
    </li>
  </ul>
</nav>

<div class="onyx-tabs">
  <div class="onyx-tab active">Profile</div>
  <div class="onyx-tab">Settings</div>
  <div class="onyx-tab">Messages</div>
  <div class="onyx-tab">Notifications</div>
</div>

Badges

Back to top

Primary Secondary Danger Success 12 3

HTML

<span class="onyx-badge onyx-badge-primary">Primary</span>
<span class="onyx-badge onyx-badge-secondary">Secondary</span>
<span class="onyx-badge onyx-badge-danger">Danger</span>
<span class="onyx-badge onyx-badge-success">Success</span>
<span class="onyx-badge onyx-badge-primary onyx-badge-pill">12</span>
<span class="onyx-badge onyx-badge-secondary onyx-badge-pill">3</span>

Modals

Back to top

HTML

<button class="onyx-btn onyx-btn-primary" id="modal-trigger">Open Modal</button>

<div class="onyx-modal" id="example-modal">
  <div class="onyx-modal-content">
    <div class="onyx-modal-header">
      <h3 class="onyx-modal-title">Modal Title</h3>
      <button class="onyx-modal-close">&times;</button>
    </div>
    <div class="onyx-modal-body">
      <p class="onyx-text">This is a modal dialog...</p>
    </div>
    <div class="onyx-modal-footer">
      <button class="onyx-btn onyx-btn-ghost">Cancel</button>
      <button class="onyx-btn onyx-btn-primary">Confirm</button>
    </div>
  </div>
</div>

<script>
  const modal = document.getElementById('example-modal');
  const trigger = document.getElementById('modal-trigger');
  const closeBtn = document.querySelector('.onyx-modal-close');
  
  trigger.addEventListener('click', () => {
    modal.classList.add('active');
  });
  
  closeBtn.addEventListener('click', () => {
    modal.classList.remove('active');
  });
</script>

Toasts

Back to top

HTML

<div class="onyx-toast-container" id="toast-container">
  <!-- Toasts will be added here dynamically -->
</div>

<button class="onyx-btn onyx-btn-primary" id="show-toast">Show Toast</button>

<script>
  function showToast(type, title, message) {
    const container = document.getElementById('toast-container');
    const toast = document.createElement('div');
    toast.className = `onyx-toast onyx-toast-${type} show`;
    
    toast.innerHTML = `
      <div class="onyx-toast-icon">
        <i class="fas fa-${type === 'success' ? 'check-circle' : type === 'error' ? 'times-circle' : 'info-circle'}"></i>
      </div>
      <div class="onyx-toast-content">
        <div class="onyx-toast-title">${title}</div>
        <div class="onyx-toast-message">${message}</div>
      </div>
      <button class="onyx-toast-close">&times;</button>
    `;
    
    container.appendChild(toast);
    
    // Auto remove after 5 seconds
    setTimeout(() => {
      toast.remove();
    }, 5000);
    
    // Close button
    toast.querySelector('.onyx-toast-close').addEventListener('click', () => {
      toast.remove();
    });
  }
  
  document.getElementById('show-toast').addEventListener('click', () => {
    showToast('success', 'Success!', 'Your action was completed successfully.');
  });
</script>

Avatars

Back to top

JS

AB

CD

HTML

<div class="onyx-avatar">
  <div class="onyx-avatar-initials">JS</div>
  <div class="onyx-avatar-status onyx-avatar-status-online"></div>
</div>

<div class="onyx-avatar">
  <img src="user.jpg" alt="User">
  <div class="onyx-avatar-status onyx-avatar-status-busy"></div>
</div>

<div class="onyx-avatar onyx-avatar-sm">
  <div class="onyx-avatar-initials">AB</div>
</div>

<div class="onyx-avatar onyx-avatar-lg">
  <div class="onyx-avatar-initials">CD</div>
  <div class="onyx-avatar-status onyx-avatar-status-away"></div>
</div>

<div class="onyx-avatar onyx-avatar-xl">
  <img src="user.jpg" alt="User">
</div>

Lists

Back to top

Inbox

You have 5 new messages

Starred

Your favorite items

Sent

View sent messages

Trash

Deleted items

HTML

<div class="onyx-list">
  <div class="onyx-list-item">
    <div class="onyx-list-item-icon">
      <i class="fas fa-inbox"></i>
    </div>
    <div class="onyx-list-item-content">
      <div class="onyx-list-item-title">Inbox</div>
      <div class="onyx-list-item-subtitle">You have 5 new messages</div>
    </div>
    <div class="onyx-list-item-action">
      <i class="fas fa-chevron-right"></i>
    </div>
  </div>
  
  <div class="onyx-list-item">
    <div class="onyx-list-item-icon">
      <i class="fas fa-star"></i>
    </div>
    <div class="onyx-list-item-content">
      <div class="onyx-list-item-title">Starred</div>
      <div class="onyx-list-item-subtitle">Your favorite items</div>
    </div>
    <div class="onyx-list-item-action">
      <i class="fas fa-chevron-right"></i>
    </div>
  </div>
  
  <div class="onyx-list-item">
    <div class="onyx-list-item-icon">
      <i class="fas fa-paper-plane"></i>
    </div>
    <div class="onyx-list-item-content">
      <div class="onyx-list-item-title">Sent</div>
      <div class="onyx-list-item-subtitle">View sent messages</div>
    </div>
    <div class="onyx-list-item-action">
      <i class="fas fa-chevron-right"></i>
    </div>
  </div>
  
  <div class="onyx-list-item">
    <div class="onyx-list-item-icon">
      <i class="fas fa-trash"></i>
    </div>
    <div class="onyx-list-item-content">
      <div class="onyx-list-item-title">Trash</div>
      <div class="onyx-list-item-subtitle">Deleted items</div>
    </div>
    <div class="onyx-list-item-action">
      <i class="fas fa-chevron-right"></i>
    </div>
  </div>
</div>

Dropdowns

Back to top

HTML

<div class="onyx-dropdown">
  <button class="onyx-btn onyx-btn-secondary onyx-dropdown-toggle">
    Dropdown Menu
    <i class="fas fa-chevron-down"></i>
  </button>
  <div class="onyx-dropdown-menu">
    <a href="#" class="onyx-dropdown-item">
      <div class="onyx-dropdown-item-icon">
        <i class="fas fa-user"></i>
      </div>
      Profile
    </a>
    <a href="#" class="onyx-dropdown-item">
      <div class="onyx-dropdown-item-icon">
        <i class="fas fa-cog"></i>
      </div>
      Settings
    </a>
    <div class="onyx-dropdown-divider"></div>
    <a href="#" class="onyx-dropdown-item">
      <div class="onyx-dropdown-item-icon">
        <i class="fas fa-sign-out-alt"></i>
      </div>
      Logout
    </a>
  </div>
</div>

<script>
  const toggle = document.querySelector('.onyx-dropdown-toggle');
  const menu = document.querySelector('.onyx-dropdown-menu');
  
  toggle.addEventListener('click', () => {
    menu.classList.toggle('show');
  });
  
  // Close when clicking outside
  document.addEventListener('click', (e) => {
    if (!e.target.closest('.onyx-dropdown')) {
      menu.classList.remove('show');
    }
  });
</script>

Accordion

Back to top

Section 1

Content for section 1. This can be any HTML content you want to display when the accordion is expanded.

Section 2

Content for section 2. Each accordion item operates independently by default.

Section 3

Content for section 3. The accordion provides a great way to organize content in a compact space.

HTML

<div class="onyx-accordion">
  <div class="onyx-accordion-item">
    <div class="onyx-accordion-header">
      <div class="onyx-accordion-title">Section 1</div>
      <div class="onyx-accordion-icon">
        <i class="fas fa-chevron-down"></i>
      </div>
    </div>
    <div class="onyx-accordion-content">
      <p class="onyx-text">Content for section 1...</p>
    </div>
  </div>
  
  <div class="onyx-accordion-item">
    <div class="onyx-accordion-header">
      <div class="onyx-accordion-title">Section 2</div>
      <div class="onyx-accordion-icon">
        <i class="fas fa-chevron-down"></i>
      </div>
    </div>
    <div class="onyx-accordion-content">
      <p class="onyx-text">Content for section 2...</p>
    </div>
  </div>
  
  <div class="onyx-accordion-item">
    <div class="onyx-accordion-header">
      <div class="onyx-accordion-title">Section 3</div>
      <div class="onyx-accordion-icon">
        <i class="fas fa-chevron-down"></i>
      </div>
    </div>
    <div class="onyx-accordion-content">
      <p class="onyx-text">Content for section 3...</p>
    </div>
  </div>
</div>

<script>
  document.querySelectorAll('.onyx-accordion-header').forEach(header => {
    header.addEventListener('click', () => {
      const item = header.parentElement;
      item.classList.toggle('active');
    });
  });
</script>

Toggle Switch

Back to top

Toggle Switch

Checked by Default

HTML

<label style="display: flex; align-items: center; gap: var(--onyx-spacing-md);">
  <div class="onyx-switch">
    <input type="checkbox">
    <div class="onyx-switch-slider"></div>
  </div>
  <span>Toggle Switch</span>
</label>

<label style="display: flex; align-items: center; gap: var(--onyx-spacing-md);">
  <div class="onyx-switch">
    <input type="checkbox" checked>
    <div class="onyx-switch-slider"></div>
  </div>
  <span>Checked by Default</span>
</label>

Pagination

Back to top

1

2

3

4

5

HTML

<div class="onyx-pagination">
  <div class="onyx-page-item">
    <a href="#" class="onyx-page-link">
      <i class="fas fa-chevron-left"></i>
    </a>
  </div>
  <div class="onyx-page-item">
    <a href="#" class="onyx-page-link">1</a>
  </div>
  <div class="onyx-page-item active">
    <a href="#" class="onyx-page-link">2</a>
  </div>
  <div class="onyx-page-item">
    <a href="#" class="onyx-page-link">3</a>
  </div>
  <div class="onyx-page-item">
    <a href="#" class="onyx-page-link">4</a>
  </div>
  <div class="onyx-page-item">
    <a href="#" class="onyx-page-link">5</a>
  </div>
  <div class="onyx-page-item">
    <a href="#" class="onyx-page-link">
      <i class="fas fa-chevron-right"></i>
    </a>
  </div>
</div>

Spinners

Back to top

HTML

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

Typography

Back to top

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

This is a regular paragraph text. The quick brown fox jumps over the lazy dog.

This is small text. The quick brown fox jumps over the lazy dog.

This is extra small text. The quick brown fox jumps over the lazy dog.

This is bold text.

This is muted text.

HTML

<h1 class="onyx-h1">Heading 1</h1>
<h2 class="onyx-h2">Heading 2</h2>
<h3 class="onyx-h3">Heading 3</h3>
<h4 class="onyx-h4">Heading 4</h4>
<h5 class="onyx-h5">Heading 5</h5>
<h6 class="onyx-h6">Heading 6</h6>

<p class="onyx-text">This is a regular paragraph text...</p>
<p class="onyx-text-sm">This is small text...</p>
<p class="onyx-text-xs">This is extra small text...</p>

<p class="onyx-text onyx-text-bold">This is bold text.</p>
<p class="onyx-text onyx-text-muted">This is muted text.</p>

Spacing Utilities

Back to top

HTML

<!-- Margin top -->
<div class="onyx-mt-sm"></div> <!-- small margin -->
<div class="onyx-mt-md"></div> <!-- medium margin -->
<div class="onyx-mt-lg"></div> <!-- large margin -->

<!-- Padding top -->
<div class="onyx-pt-sm"></div>
<div class="onyx-pt-md"></div>
<div class="onyx-pt-lg"></div>

<!-- Other utilities -->
<div class="onyx-mb-sm"></div> <!-- margin bottom -->
<div class="onyx-pb-sm"></div> <!-- padding bottom -->

Flex Utilities

Back to top

Item 1

Item 2

Item 3

Item 1

Item 2

Item 3

Left

Right

HTML

<!-- Flex row -->
<div class="onyx-d-flex">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<!-- Flex column -->
<div class="onyx-d-flex onyx-flex-column">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<!-- Space between -->
<div class="onyx-d-flex onyx-justify-between">
  <div>Left</div>
  <div>Right</div>
</div>

<!-- Other utilities -->
<div class="onyx-d-flex onyx-align-center">...</div> <!-- align items center -->
<div class="onyx-d-flex onyx-justify-center">...</div> <!-- justify content center -->
<div class="onyx-d-flex onyx-flex-wrap">...</div> <!-- flex wrap -->

Onyx UI Kit

Installation

HTML

Terminal

Buttons

HTML

HTML

HTML

Cards

Card Title

HTML

Alerts

Information

Success

Warning

Error

HTML

Form Elements

HTML

Navigation

HTML

Badges

HTML

Modals

Modal Title

HTML

Toasts

HTML

Avatars

HTML

Lists

HTML

Dropdowns

HTML

Accordion

HTML

Toggle Switch

HTML

Pagination

HTML

Spinners

HTML

Typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

HTML

Spacing Utilities

HTML

Flex Utilities

HTML