Panel

Collapsible panel with header, body, and footer. Uses CSS grid for smooth expand/collapse animation. Toggle the .panel-open class or data-state="open" to control state.

Basic (Open)

Account Settings

Manage your account preferences, profile information, and notification settings.

<div class="panel panel-open" style="max-width:480px;">
  <div class="panel-header">
    <div class="panel-header-content">
      <span class="panel-title">Account Settings</span>
    </div>
    <svg class="panel-toggle" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /></svg>
  </div>
  <div class="panel-body">
    <div class="panel-content">
      <div class="panel-content-inner">
        Manage your account preferences, profile information, and notification settings.
      </div>
    </div>
  </div>
</div>

Requires: ux.min.css

<div style="max-width:480px;">
  <div class="flex flex-col overflow-hidden bg-base-100 border border-base-300 rounded-box">
    <div class="flex items-center justify-between gap-2 p-4 bg-base-200 border-b border-base-300 cursor-pointer select-none hover:bg-base-300">
      <div class="flex items-center gap-2 flex-1 min-w-0">
        <span class="font-semibold truncate">Account Settings</span>
      </div>
      <svg class="size-5 shrink-0 opacity-30 rotate-180 transition-transform" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /></svg>
    </div>
    <div class="grid" style="grid-template-rows: 1fr;">
      <div class="overflow-hidden">
        <div class="p-4">
          Manage your account preferences, profile information, and notification settings.
        </div>
      </div>
    </div>
  </div>
</div>

Requires: tw.min.css

// Toggle open/close:
const panel = document.querySelector('.panel');
panel.classList.toggle('panel-open');

// Or use data-state:
panel.dataset.state = panel.dataset.state === 'open' ? 'closed' : 'open';

Closed (Default)

Privacy & Security Configure two-factor authentication

This content is hidden when the panel is closed.

<div class="panel" style="max-width:480px;">
  <div class="panel-header">
    <div class="panel-header-content">
      <span class="panel-title">Privacy & Security</span>
      <span class="panel-subtitle">Configure two-factor authentication</span>
    </div>
    <svg class="panel-toggle" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /></svg>
  </div>
  <div class="panel-body">
    <div class="panel-content">
      <div class="panel-content-inner">
        This content is hidden when the panel is closed.
      </div>
    </div>
  </div>
</div>

Requires: ux.min.css

<div style="max-width:480px;">
  <div class="flex flex-col overflow-hidden bg-base-100 border border-base-300 rounded-box">
    <div class="flex items-center justify-between gap-2 p-4 bg-base-200 border-b border-base-300 cursor-pointer select-none hover:bg-base-300">
      <div class="flex items-center gap-2 flex-1 min-w-0">
        <span class="font-semibold truncate">Privacy & Security</span>
        <span class="text-sm truncate opacity-60">Configure two-factor authentication</span>
      </div>
      <svg class="size-5 shrink-0 opacity-30 transition-transform" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /></svg>
    </div>
    <div class="grid overflow-hidden" style="grid-template-rows: 0fr;">
      <div class="overflow-hidden">
        <div class="p-4">
          This content is hidden when the panel is closed.
        </div>
      </div>
    </div>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required for static closed state.
// Add panel-open class to expand.

With Footer

Billing Information

Update your billing address and payment method.

<div class="panel panel-open" style="max-width:480px;">
  <div class="panel-header">
    <div class="panel-header-content">
      <span class="panel-title">Billing Information</span>
    </div>
    <svg class="panel-toggle" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /></svg>
  </div>
  <div class="panel-body">
    <div class="panel-content">
      <div class="panel-content-inner">
        Update your billing address and payment method.
      </div>
    </div>
  </div>
  <div class="panel-footer">
    <button class="btn btn-sm btn-ghost">Cancel</button>
    <button class="btn btn-sm color-primary">Save</button>
  </div>
</div>

Requires: ux.min.css

<div style="max-width:480px;">
  <div class="flex flex-col overflow-hidden bg-base-100 border border-base-300 rounded-box">
    <div class="flex items-center justify-between gap-2 p-4 bg-base-200 border-b border-base-300 cursor-pointer select-none hover:bg-base-300">
      <div class="flex items-center gap-2 flex-1 min-w-0">
        <span class="font-semibold truncate">Billing Information</span>
      </div>
      <svg class="size-5 shrink-0 opacity-30 rotate-180" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /></svg>
    </div>
    <div class="grid" style="grid-template-rows: 1fr;">
      <div class="overflow-hidden">
        <div class="p-4">Update your billing address and payment method.</div>
      </div>
    </div>
    <div class="flex items-center justify-end gap-2 px-4 py-2 border-t border-base-300 bg-base-200">
      <button class="btn btn-sm btn-ghost">Cancel</button>
      <button class="btn btn-sm color-primary">Save</button>
    </div>
  </div>
</div>

Requires: tw.min.css

// Footer is only visible when panel is open (panel-open class)

Color Variants

Primary Panel

Primary colored header.

Success Panel

Success colored header.

Warning Panel

Warning colored header.

Error Panel

Error colored header.

<div style="display:flex; flex-direction:column; gap:0.75rem; max-width:480px;">
  <div class="panel panel-primary panel-open">
    <div class="panel-header">
      <div class="panel-header-content">
        <span class="panel-title">Primary Panel</span>
      </div>
    </div>
    <div class="panel-body"><div class="panel-content"><div class="panel-content-inner">Primary colored header.</div></div></div>
  </div>
  <div class="panel panel-success panel-open">
    <div class="panel-header">
      <div class="panel-header-content">
        <span class="panel-title">Success Panel</span>
      </div>
    </div>
    <div class="panel-body"><div class="panel-content"><div class="panel-content-inner">Success colored header.</div></div></div>
  </div>
  <div class="panel panel-warning panel-open">
    <div class="panel-header">
      <div class="panel-header-content">
        <span class="panel-title">Warning Panel</span>
      </div>
    </div>
    <div class="panel-body"><div class="panel-content"><div class="panel-content-inner">Warning colored header.</div></div></div>
  </div>
  <div class="panel panel-error panel-open">
    <div class="panel-header">
      <div class="panel-header-content">
        <span class="panel-title">Error Panel</span>
      </div>
    </div>
    <div class="panel-body"><div class="panel-content"><div class="panel-content-inner">Error colored header.</div></div></div>
  </div>
</div>

Requires: ux.min.css

<div style="display:flex; flex-direction:column; gap:0.75rem; max-width:480px;">
  <div class="flex flex-col overflow-hidden bg-base-100 border border-base-300 rounded-box">
    <div class="flex items-center justify-between gap-2 p-4 cursor-pointer select-none" style="background-color: color-mix(in oklch, var(--color-primary) 10%, transparent); border-bottom: 1px solid color-mix(in oklch, var(--color-primary) 20%, transparent);">
      <span class="font-semibold text-primary">Primary Panel</span>
    </div>
    <div class="grid" style="grid-template-rows: 1fr;"><div class="overflow-hidden"><div class="p-4">Primary colored header.</div></div></div>
  </div>
  <div class="flex flex-col overflow-hidden bg-base-100 border border-base-300 rounded-box">
    <div class="flex items-center justify-between gap-2 p-4 cursor-pointer select-none" style="background-color: color-mix(in oklch, var(--color-success) 10%, transparent); border-bottom: 1px solid color-mix(in oklch, var(--color-success) 20%, transparent);">
      <span class="font-semibold text-success">Success Panel</span>
    </div>
    <div class="grid" style="grid-template-rows: 1fr;"><div class="overflow-hidden"><div class="p-4">Success colored header.</div></div></div>
  </div>
  <div class="flex flex-col overflow-hidden bg-base-100 border border-base-300 rounded-box">
    <div class="flex items-center justify-between gap-2 p-4 cursor-pointer select-none" style="background-color: color-mix(in oklch, var(--color-warning) 10%, transparent); border-bottom: 1px solid color-mix(in oklch, var(--color-warning) 20%, transparent);">
      <span class="font-semibold text-warning">Warning Panel</span>
    </div>
    <div class="grid" style="grid-template-rows: 1fr;"><div class="overflow-hidden"><div class="p-4">Warning colored header.</div></div></div>
  </div>
  <div class="flex flex-col overflow-hidden bg-base-100 border border-base-300 rounded-box">
    <div class="flex items-center justify-between gap-2 p-4 cursor-pointer select-none" style="background-color: color-mix(in oklch, var(--color-error) 10%, transparent); border-bottom: 1px solid color-mix(in oklch, var(--color-error) 20%, transparent);">
      <span class="font-semibold text-error">Error Panel</span>
    </div>
    <div class="grid" style="grid-template-rows: 1fr;"><div class="overflow-hidden"><div class="p-4">Error colored header.</div></div></div>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required for color variants

Style Variants

Outline

Transparent background with border.

Filled

No border, filled header background.

Borderless

No border, no radius, minimal style.

<div style="display:flex; flex-direction:column; gap:0.75rem; max-width:480px;">
  <div class="panel panel-outline panel-open">
    <div class="panel-header">
      <div class="panel-header-content"><span class="panel-title">Outline</span></div>
    </div>
    <div class="panel-body"><div class="panel-content"><div class="panel-content-inner">Transparent background with border.</div></div></div>
  </div>
  <div class="panel panel-filled panel-open">
    <div class="panel-header">
      <div class="panel-header-content"><span class="panel-title">Filled</span></div>
    </div>
    <div class="panel-body"><div class="panel-content"><div class="panel-content-inner">No border, filled header background.</div></div></div>
  </div>
  <div class="panel panel-borderless panel-open">
    <div class="panel-header">
      <div class="panel-header-content"><span class="panel-title">Borderless</span></div>
    </div>
    <div class="panel-body"><div class="panel-content"><div class="panel-content-inner">No border, no radius, minimal style.</div></div></div>
  </div>
</div>

Requires: ux.min.css

<div style="display:flex; flex-direction:column; gap:0.75rem; max-width:480px;">
  <div class="flex flex-col overflow-hidden bg-transparent border border-base-300 rounded-box">
    <div class="flex items-center gap-2 p-4 bg-transparent border-b border-base-300 cursor-pointer hover:bg-base-200">
      <span class="font-semibold">Outline</span>
    </div>
    <div class="grid" style="grid-template-rows: 1fr;"><div class="overflow-hidden"><div class="p-4">Transparent background with border.</div></div></div>
  </div>
  <div class="flex flex-col overflow-hidden bg-base-100 rounded-box">
    <div class="flex items-center gap-2 p-4 bg-base-300 cursor-pointer hover:bg-base-content/10">
      <span class="font-semibold">Filled</span>
    </div>
    <div class="grid" style="grid-template-rows: 1fr;"><div class="overflow-hidden"><div class="p-4">No border, filled header background.</div></div></div>
  </div>
  <div class="flex flex-col overflow-hidden bg-base-100">
    <div class="flex items-center gap-2 p-4 bg-transparent cursor-pointer">
      <span class="font-semibold">Borderless</span>
    </div>
    <div class="grid" style="grid-template-rows: 1fr;"><div class="overflow-hidden"><div class="p-4">No border, no radius, minimal style.</div></div></div>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required for style variants

Sizes

Small Panel

Compact padding and smaller text.

Default Panel

Standard padding and text size.

Large Panel

Spacious padding and larger text.

<div style="display:flex; flex-direction:column; gap:0.75rem; max-width:480px;">
  <div class="panel panel-sm panel-open">
    <div class="panel-header">
      <div class="panel-header-content"><span class="panel-title">Small Panel</span></div>
      <svg class="panel-toggle" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /></svg>
    </div>
    <div class="panel-body"><div class="panel-content"><div class="panel-content-inner">Compact padding and smaller text.</div></div></div>
  </div>
  <div class="panel panel-open">
    <div class="panel-header">
      <div class="panel-header-content"><span class="panel-title">Default Panel</span></div>
      <svg class="panel-toggle" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /></svg>
    </div>
    <div class="panel-body"><div class="panel-content"><div class="panel-content-inner">Standard padding and text size.</div></div></div>
  </div>
  <div class="panel panel-lg panel-open">
    <div class="panel-header">
      <div class="panel-header-content"><span class="panel-title">Large Panel</span></div>
      <svg class="panel-toggle" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /></svg>
    </div>
    <div class="panel-body"><div class="panel-content"><div class="panel-content-inner">Spacious padding and larger text.</div></div></div>
  </div>
</div>

Requires: ux.min.css

<div style="display:flex; flex-direction:column; gap:0.75rem; max-width:480px;">
  <div class="flex flex-col overflow-hidden bg-base-100 border border-base-300 rounded-field">
    <div class="flex items-center justify-between gap-2 p-2 bg-base-200 border-b border-base-300 cursor-pointer select-none hover:bg-base-300">
      <span class="font-semibold text-sm truncate">Small Panel</span>
      <svg class="size-4 shrink-0 opacity-30 rotate-180" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /></svg>
    </div>
    <div class="grid" style="grid-template-rows: 1fr;"><div class="overflow-hidden"><div class="p-2">Compact padding and smaller text.</div></div></div>
  </div>
  <div class="flex flex-col overflow-hidden bg-base-100 border border-base-300 rounded-box">
    <div class="flex items-center justify-between gap-2 p-4 bg-base-200 border-b border-base-300 cursor-pointer select-none hover:bg-base-300">
      <span class="font-semibold truncate">Default Panel</span>
      <svg class="size-5 shrink-0 opacity-30 rotate-180" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /></svg>
    </div>
    <div class="grid" style="grid-template-rows: 1fr;"><div class="overflow-hidden"><div class="p-4">Standard padding and text size.</div></div></div>
  </div>
  <div class="flex flex-col overflow-hidden bg-base-100 border border-base-300 rounded-box">
    <div class="flex items-center justify-between gap-2 p-6 bg-base-200 border-b border-base-300 cursor-pointer select-none hover:bg-base-300">
      <span class="font-semibold text-lg truncate">Large Panel</span>
      <svg class="size-6 shrink-0 opacity-30 rotate-180" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /></svg>
    </div>
    <div class="grid" style="grid-template-rows: 1fr;"><div class="overflow-hidden"><div class="p-6">Spacious padding and larger text.</div></div></div>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required for size variants

Accordion Group

General

General settings and preferences for your account.

Notifications

Configure email and push notification preferences.

Advanced

Developer options and experimental features.

<div class="panel-group-accordion" style="max-width:480px;">
  <div class="panel panel-open">
    <div class="panel-header">
      <div class="panel-header-content"><span class="panel-title">General</span></div>
      <svg class="panel-toggle" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /></svg>
    </div>
    <div class="panel-body"><div class="panel-content"><div class="panel-content-inner">General settings and preferences for your account.</div></div></div>
  </div>
  <div class="panel">
    <div class="panel-header">
      <div class="panel-header-content"><span class="panel-title">Notifications</span></div>
      <svg class="panel-toggle" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /></svg>
    </div>
    <div class="panel-body"><div class="panel-content"><div class="panel-content-inner">Configure email and push notification preferences.</div></div></div>
  </div>
  <div class="panel">
    <div class="panel-header">
      <div class="panel-header-content"><span class="panel-title">Advanced</span></div>
      <svg class="panel-toggle" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /></svg>
    </div>
    <div class="panel-body"><div class="panel-content"><div class="panel-content-inner">Developer options and experimental features.</div></div></div>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col" style="max-width:480px;">
  <div class="flex flex-col overflow-hidden bg-base-100 border border-base-300 rounded-t-box -mb-px">
    <div class="flex items-center justify-between gap-2 p-4 bg-base-200 border-b border-base-300 cursor-pointer hover:bg-base-300">
      <span class="font-semibold">General</span>
      <svg class="size-5 opacity-30 rotate-180" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /></svg>
    </div>
    <div class="grid" style="grid-template-rows: 1fr;"><div class="overflow-hidden"><div class="p-4">General settings and preferences for your account.</div></div></div>
  </div>
  <div class="flex flex-col overflow-hidden bg-base-100 border border-base-300 -mb-px">
    <div class="flex items-center justify-between gap-2 p-4 bg-base-200 border-b border-base-300 cursor-pointer hover:bg-base-300">
      <span class="font-semibold">Notifications</span>
      <svg class="size-5 opacity-30" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /></svg>
    </div>
    <div class="grid" style="grid-template-rows: 0fr;"><div class="overflow-hidden"><div class="p-4">Configure email and push notification preferences.</div></div></div>
  </div>
  <div class="flex flex-col overflow-hidden bg-base-100 border border-base-300 rounded-b-box">
    <div class="flex items-center justify-between gap-2 p-4 bg-base-200 cursor-pointer hover:bg-base-300">
      <span class="font-semibold">Advanced</span>
      <svg class="size-5 opacity-30" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /></svg>
    </div>
    <div class="grid" style="grid-template-rows: 0fr;"><div class="overflow-hidden"><div class="p-4">Developer options and experimental features.</div></div></div>
  </div>
</div>

Requires: tw.min.css

// Accordion behavior (one open at a time):
document.querySelectorAll('.panel-header').forEach(header => {
  header.addEventListener('click', () => {
    const panel = header.closest('.panel');
    const group = panel.parentElement;
    group.querySelectorAll('.panel').forEach(p => p.classList.remove('panel-open'));
    panel.classList.add('panel-open');
  });
});

Glass

Glass Panel

Frosted glass effect with backdrop blur.

<div style="background: linear-gradient(135deg, oklch(0.55 0.22 250), oklch(0.55 0.20 280)); padding: 2rem; border-radius: 1rem;">
  <div class="panel glass panel-open" style="max-width:400px; margin:auto;">
    <div class="panel-header">
      <div class="panel-header-content">
        <span class="panel-title">Glass Panel</span>
      </div>
      <svg class="panel-toggle" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /></svg>
    </div>
    <div class="panel-body">
      <div class="panel-content">
        <div class="panel-content-inner">
          Frosted glass effect with backdrop blur.
        </div>
      </div>
    </div>
  </div>
</div>

Requires: ux.min.css

<div style="background: linear-gradient(135deg, oklch(0.55 0.22 250), oklch(0.55 0.20 280)); padding: 2rem; border-radius: 1rem;">
  <div class="flex flex-col overflow-hidden glass rounded-box" style="max-width:400px; margin:auto;">
    <div class="flex items-center justify-between gap-2 p-4 cursor-pointer select-none" style="background: rgba(255,255,255,0.3); border-bottom: 0.5px solid rgba(255,255,255,0.18);">
      <span class="font-semibold">Glass Panel</span>
      <svg class="size-5 opacity-30 rotate-180" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /></svg>
    </div>
    <div class="grid" style="grid-template-rows: 1fr;"><div class="overflow-hidden"><div class="p-4">Frosted glass effect with backdrop blur.</div></div></div>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required for glass variant

Classes Reference

Class	Description
.panel	Base container
.panel-header	Clickable header bar
.panel-header-content	Header text wrapper (flex row)
.panel-title	Title text
.panel-subtitle	Subtitle text
.panel-icon	Leading icon
.panel-toggle	Chevron that rotates on open
.panel-actions	Header action buttons
.panel-body	Collapsible grid wrapper
.panel-content	Overflow hidden wrapper
.panel-content-inner	Padded content area
.panel-footer	Footer (visible when open)
.panel-open	Open state
data-state="open"	Open state (attribute)
.panel-outline	Transparent background
.panel-filled	Filled header, no border
.panel-borderless	No border or radius
.panel-flush	Transparent header until open
.panel-sm	Small size
.panel-lg	Large size
.panel-primary	Primary color header
.panel-success	Success color header
.panel-warning	Warning color header
.panel-error	Error color header
.panel-disabled	Disabled state
.panel-loading	Loading spinner in content
.panel.glass	Glassmorphism variant
.panel-group	Group with gap
.panel-group-accordion	Connected accordion group