Skip to main content

Advanced components

Discover boodoo v1.3.1's advanced components engineered for generative AI interfaces, complex data filtering, task management workflows, interactive media, and modern web application layouts.

Chat Bubble & AI Stream

Build conversational AI interfaces and chat feeds using .chat-thread, .chat-bubble, and .ai-stream. Use .incoming and .outgoing modifiers to set message direction, and .ai-cursor to render an animated streaming text cursor.

Boodoo Assistant 10:42 AM

Hello! How can I assist you with your design system or layouts today?

You 10:43 AM

Can you explain how to build a responsive Bento grid?

Boodoo Assistant Just now

Certainly! In Boodoo, you can apply .bento-grid to your container and combine items with .bento-col-span-2 and .bento-row-span-2.

<div class="chat-thread">
  <div class="chat-bubble incoming">
    <div class="chat-bubble-header">
      <span class="chat-bubble-author"><span>AI Assistant</span></span>
      <span class="chat-bubble-time"><span>10:42 AM</span></span>
    </div>
    <div class="chat-bubble-body">
      <p><span>Hello! How can I help you?</span></p>
    </div>
  </div>
  <div class="chat-bubble outgoing">
    <div class="chat-bubble-body">
      <p><span>Tell me more about Boodoo!</span></p>
    </div>
  </div>
</div>

Filter Bar & Dimension Query Builder

The .filter-bar component organizes multi-dimensional filters, active selection pills (.filter-pill), and search controls. Initialized automatically with data-boodoo="filter-bar" or via new boodoo.FilterBar(element).

All Drafts Published Archived 
<div class="filter-bar" data-boodoo="filter-bar">
  <div class="filter-search">
    <input type="text" id="searchField" name="searchField" class="form-control form-control-sm" placeholder="Search...">
  </div>
  <div class="filter-pills">
    <span class="filter-pill active" data-filter="all"><span>All</span></span>
    <span class="filter-pill" data-filter="active"><span>Active</span><button type="button" class="filter-pill-remove" aria-label="Remove"><span>&times;</span></button></span>
  </div>
</div>

Kanban / Pipeline Board

Organize workflows with .kanban-board, .kanban-column, and .kanban-card. Features horizontal scrolling, customizable column badges, and priority tags.

To Do 2

Add Dark Mode Tokens

v1.2 High

Write API Documentation

Docs Medium
In Progress 1

Release v1.2.1 Components

Core Urgent
Completed 1

CommonJS & Dual Dist Entry

Packaging Done 
<div class="kanban-board">
  <div class="kanban-column">
    <div class="kanban-column-header">
      <span class="kanban-column-title"><span>To Do</span></span>
      <span class="badge badge-secondary"><span>3</span></span>
    </div>
    <div class="kanban-column-body">
      <div class="kanban-card">
        <div class="kanban-card-title"><p><span>Task title</span></p></div>
      </div>
    </div>
  </div>
</div>

Bento Grid Layout Presets

Modern dashboard layout pattern powered by CSS Grid. Use .bento-grid along with span utilities like .bento-col-span-2, .bento-col-span-3, and .bento-row-span-2.

Performance Analytics

Real-time throughput metrics across all operational regions with ultra-low latency monitoring.

Active Users

18.4k

+14.2% this week

Uptime

99.99%

Zero incidents

Cloud Infrastructure

Multi-cluster deployments orchestrated with automated failover and health detection.

<div class="bento-grid">
  <div class="bento-item bento-col-span-2">
    <div class="bento-item-header"><span class="bento-item-title"><span>Featured Tile</span></span></div>
    <div class="bento-item-body"><p><span>Large span item</span></p></div>
  </div>
  <div class="bento-item">
    <div class="bento-item-header"><span class="bento-item-title"><span>Compact Tile</span></span></div>
    <div class="bento-item-body"><p><span>Regular item</span></p></div>
  </div>
</div>

Transfer List (Dual Listbox)

Allow users to move items between available and selected collections using .transfer-list, .transfer-panel, and .transfer-controls. Activated automatically via data-boodoo="transfer-list" or new boodoo.TransferList(element).

Available Skills
Selected Stack 
<div class="transfer-list" data-boodoo="transfer-list">
  <div class="transfer-panel">
    <div class="transfer-panel-header"><span class="transfer-panel-title"><span>Available</span></span></div>
    <div class="transfer-panel-body">
      <div class="transfer-item" data-value="item1">
        <input type="checkbox" id="item1" name="item1" class="form-check-input">
        <label for="item1"><span>Item 1</span></label>
      </div>
    </div>
  </div>
  <div class="transfer-controls">
    <button type="button" class="btn btn-sm btn-outline-primary transfer-btn-right"><span>&rarr;</span></button>
    <button type="button" class="btn btn-sm btn-outline-secondary transfer-btn-left"><span>&larr;</span></button>
  </div>
  <div class="transfer-panel">
    <div class="transfer-panel-header"><span class="transfer-panel-title"><span>Selected</span></span></div>
    <div class="transfer-panel-body"></div>
  </div>
</div>

Audio Player Widget

Compact media control bar with simulated waveform visualization using .audio-player, .audio-controls, and .audio-waveform.

Deep Focus Session #4 01:24 / 04:30 
<div class="audio-player">
  <div class="audio-controls">
    <button type="button" class="btn btn-primary btn-sm rounded-circle" aria-label="Play"><span>▶</span></button>
    <div class="audio-meta">
      <span class="audio-title"><span>Track title</span></span>
      <span class="audio-time"><span>01:24 / 04:30</span></span>
    </div>
  </div>
  <div class="audio-waveform">
    <span class="audio-wave-bar played" style="height: 60%;"></span>
    <span class="audio-wave-bar" style="height: 40%;"></span>
  </div>
</div>

Color Picker Popover

Customizable swatch palette and custom color selector using .color-picker, .color-swatch-grid, and .color-swatch. Initialized via data-boodoo="color-picker" or new boodoo.ColorPicker(element).

<div class="color-picker" data-boodoo="color-picker">
  <div class="color-swatch-grid">
    <button type="button" class="color-swatch selected" data-color="#7c3aed" style="background-color: #7c3aed;" aria-label="Purple"></button>
    <button type="button" class="color-swatch" data-color="#3b82f6" style="background-color: #3b82f6;" aria-label="Blue"></button>
  </div>
  <div class="color-picker-input-group mt-2">
    <input type="text" id="colorHex" name="colorHex" class="form-control form-control-sm color-picker-hex" value="#7c3aed">
    <input type="color" id="colorNative" name="colorNative" class="color-picker-native" value="#7c3aed" aria-label="Color">
  </div>
</div>

Scroll-to-Top Floating Button

Floating action button (.back-to-top) that listens to page scrolling and provides smooth deceleration back to top. Initialized with data-boodoo="back-to-top" or new boodoo.BackToTop(button).

Scroll the window down or click below to preview the active floating button state:

<button type="button" class="back-to-top" data-boodoo="back-to-top" aria-label="Back to top">
  <span>&uarr;</span>
</button>