Component Playground

Design Tokens

Colors

primary

secondary

accent

success

warning

danger

Spacing Scale

--spacing-1 (4px)

--spacing-2 (8px)

--spacing-4 (16px)

--spacing-8 (32px)

Border Radius

sm

md

lg

xl

full

Buttons

Primary

Outline

Sizes

View Code

<!-- Primary Button -->
<button type="button" class="btn-primary focus:ring-4 font-medium rounded-lg text-sm px-5 py-2.5">Default</button>

<!-- Secondary Button -->
<button type="button" class="btn-secondary focus:ring-4 font-medium rounded-lg text-sm px-5 py-2.5">Secondary</button>

<!-- Success Button -->
<button type="button" class="text-white bg-green-600 hover:bg-green-700 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5">Success</button>

<!-- Warning Button -->
<button type="button" class="text-white bg-yellow-400 hover:bg-yellow-500 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg text-sm px-5 py-2.5">Warning</button>

<!-- Danger Button -->
<button type="button" class="text-white bg-red-600 hover:bg-red-700 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5">Danger</button>

<!-- Outline Buttons -->
<button type="button" class="btn-outline-primary border focus:ring-4 font-medium rounded-lg text-sm px-5 py-2.5">Primary</button>
<button type="button" class="btn-outline-success border focus:ring-4 font-medium rounded-lg text-sm px-5 py-2.5">Success</button>

<!-- Button Sizes -->
<button type="button" class="btn-primary focus:ring-4 font-medium rounded-lg text-xs px-3 py-2">Extra Small</button>
<button type="button" class="btn-primary focus:ring-4 font-medium rounded-lg text-sm px-5 py-2.5">Base</button>
<button type="button" class="btn-primary focus:ring-4 font-medium rounded-lg text-base px-6 py-3">Large</button>

Form Elements

Text Input

Email Input

Select

Checkbox Option

Textarea

View Code

<!-- Text Input -->
<label for="text-input" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Text Input</label>
<input type="text" id="text-input" class="bg-gray-50 dark:bg-gray-600 border border-gray-300 dark:border-gray-500 text-gray-900 dark:text-white text-sm rounded-lg block w-full p-2.5" placeholder="Enter text...">

<!-- Email Input -->
<label for="email-input" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Email Input</label>
<input type="email" id="email-input" class="bg-gray-50 dark:bg-gray-600 border border-gray-300 dark:border-gray-500 text-gray-900 dark:text-white text-sm rounded-lg block w-full p-2.5" placeholder="name@example.com">

<!-- Select -->
<label for="select-input" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Select</label>
<select id="select-input" class="bg-gray-50 dark:bg-gray-600 border border-gray-300 dark:border-gray-500 text-gray-900 dark:text-white text-sm rounded-lg block w-full p-2.5">
  <option selected>Choose an option</option>
  <option value="1">Option 1</option>
</select>

<!-- Checkbox -->
<input id="checkbox-1" type="checkbox" class="w-4 h-4 border border-gray-300 dark:border-gray-500 rounded bg-gray-50 dark:bg-gray-600 focus:ring-2">
<label for="checkbox-1" class="ml-2 text-sm font-medium text-gray-900 dark:text-white">Checkbox Option</label>

<!-- Textarea -->
<label for="textarea" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Textarea</label>
<textarea id="textarea" rows="4" class="bg-gray-50 dark:bg-gray-600 border border-gray-300 dark:border-gray-500 text-gray-900 dark:text-white text-sm rounded-lg block w-full p-2.5" placeholder="Write your message..."></textarea>

Alerts

Info alert! This is an informational message.

Success alert! Operation completed successfully.

Warning alert! Please review this information carefully.

Danger alert! An error has occurred.

View Code

<!-- Info Alert -->
<div class="flex items-center p-4 text-sm text-blue-800 rounded-lg bg-blue-50 border border-blue-300" role="alert">
  <svg class="flex-shrink-0 inline w-4 h-4 mr-3" fill="currentColor" viewBox="0 0 20 20">
    <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
  </svg>
  <div><span class="font-medium">Info alert!</span> This is an informational message.</div>
</div>

<!-- Success Alert -->
<div class="flex items-center p-4 text-sm text-green-800 rounded-lg bg-green-50 border border-green-300" role="alert">
  <svg class="flex-shrink-0 inline w-4 h-4 mr-3" fill="currentColor" viewBox="0 0 20 20">
    <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"/>
  </svg>
  <div><span class="font-medium">Success alert!</span> Operation completed successfully.</div>
</div>

<!-- Warning Alert -->
<div class="flex items-center p-4 text-sm text-yellow-800 rounded-lg bg-yellow-50 border border-yellow-300" role="alert">
  <svg class="flex-shrink-0 inline w-4 h-4 mr-3" fill="currentColor" viewBox="0 0 20 20">
    <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM10 15a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm1-4a1 1 0 0 1-2 0V6a1 1 0 0 1 2 0v5Z"/>
  </svg>
  <div><span class="font-medium">Warning alert!</span> Please review this information carefully.</div>
</div>

<!-- Danger Alert -->
<div class="flex items-center p-4 text-sm text-red-800 rounded-lg bg-red-50 border border-red-300" role="alert">
  <svg class="flex-shrink-0 inline w-4 h-4 mr-3" fill="currentColor" viewBox="0 0 20 20">
    <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 11.793a1 1 0 1 1-1.414 1.414L10 11.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L8.586 10 6.293 7.707a1 1 0 0 1 1.414-1.414L10 8.586l2.293-2.293a1 1 0 0 1 1.414 1.414L11.414 10l2.293 2.293Z"/>
  </svg>
  <div><span class="font-medium">Danger alert!</span> An error has occurred.</div>
</div>

Cards

Card Title

This is a simple card component with a title and description.

Image Card

Card with a header image or gradient background.

LT

User Card

Laundry Tactics

Card with avatar and user information.

View Code

<div class="bg-white dark:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-600 p-6">
  <h5 class="mb-2 text-2xl font-bold text-gray-900 dark:text-white">Card Title</h5>
  <p class="mb-3 text-gray-700 dark:text-gray-400">Card description</p>
  <button class="btn-primary">Learn More</button>
</div>

Table

Product	Category	Price	Action
Apple MacBook Pro	Laptop	$2999	Edit
Microsoft Surface Pro	Laptop PC	$1999	Edit
Magic Mouse 2	Accessories	$99	Edit

View Code

<table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
  <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
    <tr><th class="px-6 py-3">Product</th></tr>
  </thead>
  <tbody>
    <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
      <td class="px-6 py-4">Apple MacBook Pro</td>
    </tr>
  </tbody>
</table>

Badges

Primary Secondary Success Danger Warning Info

View Code

<!-- Primary Badge (uses brand color) -->
<span class="text-white text-xs font-medium px-2.5 py-0.5 rounded" style="background-color: var(--color-primary);">Primary</span>

<!-- Secondary Badge (uses brand color) -->
<span class="text-white text-xs font-medium px-2.5 py-0.5 rounded" style="background-color: var(--color-secondary);">Secondary</span>

<!-- Success Badge -->
<span class="bg-green-600 text-white text-xs font-medium px-2.5 py-0.5 rounded">Success</span>

<!-- Danger Badge -->
<span class="bg-red-600 text-white text-xs font-medium px-2.5 py-0.5 rounded">Danger</span>

<!-- Warning Badge -->
<span class="bg-yellow-500 text-white text-xs font-medium px-2.5 py-0.5 rounded">Warning</span>

<!-- Info Badge -->
<span class="bg-blue-500 text-white text-xs font-medium px-2.5 py-0.5 rounded">Info</span>

Toast Notifications

Click the buttons below to see toast notifications in action:

View Code

// JavaScript function in site.js
showToast('Your message here', 'success'); // types: success, info, warning, danger

Modal

Click the button below to open a modal dialog:

View Code

<!-- Button trigger -->
<button data-modal-target="example-modal" data-modal-toggle="example-modal" class="btn-primary" type="button">
  Open Modal
</button>

<!-- Modal -->
<div id="example-modal" tabindex="-1" aria-hidden="true" class="hidden fixed top-0 left-0 right-0 z-50 w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full">
  <div class="relative w-full max-w-2xl max-h-full">
    <div class="relative bg-white dark:bg-gray-700 rounded-lg shadow">
      <!-- Modal content here -->
    </div>
  </div>
</div>

📚 Additional Components

For more advanced components, refer to the official Flowbite documentation: