# Bulma CSS — Complete Extensions Reference

All 29 community extensions listed at bulma.io/extensions/.

---

## Extensions by Wikiki (17)

| # | Extension | npm | Description |
|---|-----------|-----|-------------|
| 1 | **bulma-accordion** | `bulma-accordion` | Collapsible accordion component |
| 2 | **bulma-badge** | `bulma-badge` | Badge element in different colors |
| 3 | **bulma-calendar** | `bulma-calendar` | Date/time picker in different colors and sizes |
| 4 | **bulma-carousel** | `bulma-carousel` | Image/content carousel/slider |
| 5 | **bulma-checkradio** | `bulma-checkradio` | Custom styled checkboxes and radio buttons |
| 6 | **bulma-divider** | `bulma-divider` | Vertical or horizontal content divider |
| 7 | **bulma-iconpicker** | `bulma-iconpicker` | Customizable icon selection input |
| 8 | **bulma-pageloader** | `bulma-pageloader` | Full-page loading overlay in different colors |
| 9 | **bulma-pricingtable** | `bulma-pricingtable` | Pricing table layout for product tiers |
| 10 | **bulma-quickview** | `bulma-quickview` | Quick preview panel without leaving current page |
| 11 | **bulma-ribbon** | `bulma-ribbon` | Ribbon banner on elements |
| 12 | **bulma-slider** | `bulma-slider` | Range slider input in different colors, sizes, states |
| 13 | **bulma-steps** | `bulma-steps` | Step indicators for sequential processes |
| 14 | **bulma-switch** | `bulma-switch` | Toggle switch for binary selections |
| 15 | **bulma-tagsinput** | `bulma-tagsinput` | Interactive tag input fields |
| 16 | **bulma-timeline** | `bulma-timeline` | Vertical timeline for event sequences |
| 17 | **bulma-tooltip** | `bulma-tooltip` | Hover tooltips in different positions |

GitHub base URL: `https://github.com/Wikiki/`
Docs base URL: `https://wikiki.github.io/`

---

## Extensions by Other Authors (12)

| # | Extension | Author | npm | Description |
|---|-----------|--------|-----|-------------|
| 18 | **bulma-o-steps** | octoshrimpy | `bulma-o-steps` | In-depth steps component |
| 19 | **bulma-tagsfield** | vyachkonovalov | `bulma-tagsfield` | Multi-line tags input control |
| 20 | **bulma-toast** | rfoel | `bulma-toast` | Pure JavaScript toast notifications |
| 21 | **bulma-dashboard** | lucperkins | `bulma-dashboard` | Dashboard layout plugin |
| 22 | **bulma-block-list** | chrisrhymes | `bulma-block-list` | Block style list elements |
| 23 | **bulma-spacing** | kaangokdemir | `bulma-spacing` | Additional spacing utility classes |
| 24 | **bulma-list** | bluefantail | `bulma-list` | Simple list component |
| 25 | **bulma-steps** (alt) | aramvisser | — | Alternative steps/wizard component |
| 26 | **bulma-megamenu** | hunzaboy | — | Large dropdown navigation menu |
| 27 | **bulma-coolcheckboxes** | hunzaboy | — | Custom designed checkboxes |
| 28 | **bulma.io-axure** | AGmakonts | — | Bulma widget library for Axure RP |
| 29 | **bulma-jumbo-tiny** | thirstyape | — | Additional size modifiers (jumbo and tiny) |

---

## Installation

### npm (most extensions)
```bash
npm install bulma-accordion
# or
yarn add bulma-accordion
```

### Sass Import
```scss
@import "bulma-accordion/src/sass/index";
// or
@import "bulma-tooltip/src/sass/index";
```

### CDN (check individual extension repos for CDN links)
Most Wikiki extensions are available via jsDelivr:
```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-tooltip@3/dist/css/bulma-tooltip.min.css">
```

---

## Extension Details

### bulma-accordion
Collapsible content panels. Toggle with JS.
```html
<div class="accordions">
  <div class="accordion">
    <div class="accordion-header toggle">
      <p>Title</p>
    </div>
    <div class="accordion-body">
      <div class="accordion-content">Content here</div>
    </div>
  </div>
</div>
```

### bulma-badge
Small labels attached to elements.
```html
<span class="badge is-badge-primary" data-badge="5">Notifications</span>
```
Modifiers: `.is-badge-primary`, `.is-badge-info`, `.is-badge-success`, `.is-badge-warning`, `.is-badge-danger`, `.is-badge-small`, `.is-badge-medium`, `.is-badge-large`, `.is-badge-outlined`

### bulma-calendar
Full date/time picker component.
```html
<input class="input" type="date" id="datepicker">
<script>
  bulmaCalendar.attach('#datepicker', { type: 'date' });
</script>
```

### bulma-carousel
Image/content slider.
```html
<div class="carousel">
  <div class="item-1">Slide 1</div>
  <div class="item-2">Slide 2</div>
</div>
<script>
  bulmaCarousel.attach('.carousel', { slidesToShow: 3 });
</script>
```

### bulma-checkradio
Styled checkboxes and radios.
```html
<div class="field">
  <input class="is-checkradio is-primary" id="check1" type="checkbox" checked>
  <label for="check1">Primary Checkbox</label>
</div>
```
Modifiers: `.is-primary`, `.is-info`, `.is-success`, `.is-warning`, `.is-danger`, `.is-small`, `.is-medium`, `.is-large`, `.is-circle`, `.is-block`, `.is-rtl`, `.has-no-border`, `.has-background-color`

### bulma-divider
Content separator.
```html
<div class="divider">OR</div>
<div class="divider is-vertical">OR</div>
```
Modifiers: `.is-vertical`, color classes

### bulma-pageloader
Full-page loading overlay.
```html
<div class="pageloader is-active is-primary"><span class="title">Loading...</span></div>
```

### bulma-pricingtable
Pricing comparison table.
```html
<div class="pricing-table">
  <div class="pricing-plan is-primary">
    <div class="plan-header">Pro</div>
    <div class="plan-price"><span class="plan-price-amount"><span class="plan-price-currency">$</span>29</span>/month</div>
    <div class="plan-items">
      <div class="plan-item">10 Users</div>
      <div class="plan-item">100GB Storage</div>
    </div>
    <div class="plan-footer">
      <button class="button is-fullwidth">Choose</button>
    </div>
  </div>
</div>
```

### bulma-slider
Range input slider.
```html
<input class="slider is-primary is-medium" type="range" min="0" max="100" value="50">
```
Modifiers: color classes, `.is-small`, `.is-medium`, `.is-large`, `.is-fullwidth`, `.is-circle`

### bulma-steps
Step indicator for multi-step processes.
```html
<ul class="steps is-medium">
  <li class="steps-segment is-active">
    <span class="steps-marker">1</span>
    <div class="steps-content"><p class="is-size-4">Account</p></div>
  </li>
  <li class="steps-segment">
    <span class="steps-marker">2</span>
    <div class="steps-content"><p class="is-size-4">Profile</p></div>
  </li>
</ul>
```
Modifiers: `.is-small`, `.is-medium`, `.is-large`, `.has-content-centered`, `.is-balanced`, `.is-narrow`, `.has-gaps`

### bulma-switch
Toggle switch.
```html
<div class="field">
  <input id="switch1" type="checkbox" class="switch is-primary">
  <label for="switch1">Dark Mode</label>
</div>
```
Modifiers: color classes, `.is-small`, `.is-medium`, `.is-large`, `.is-rounded`, `.is-thin`, `.is-outlined`, `.is-rtl`

### bulma-timeline
Vertical timeline.
```html
<div class="timeline">
  <div class="timeline-item is-primary">
    <div class="timeline-marker is-primary"></div>
    <div class="timeline-content">
      <p class="heading">January 2024</p>
      <p>Event description</p>
    </div>
  </div>
</div>
```
Modifiers: color classes, `.is-centered`, marker styles

### bulma-toast
JavaScript toast notifications.
```js
bulmaToast.toast({
  message: 'Hello World',
  type: 'is-success',
  position: 'top-right',
  duration: 4000,
  dismissible: true,
  animate: { in: 'fadeIn', out: 'fadeOut' }
});
```
Positions: `top-left`, `top-center`, `top-right`, `center`, `bottom-left`, `bottom-center`, `bottom-right`

### bulma-tooltip
Hover tooltips.
```html
<button class="button is-primary" data-tooltip="Tooltip text">Hover me</button>
```
Modifiers: `.has-tooltip-primary`, `.has-tooltip-info`, `.has-tooltip-success`, `.has-tooltip-warning`, `.has-tooltip-danger`, `.has-tooltip-left`, `.has-tooltip-right`, `.has-tooltip-bottom`, `.has-tooltip-top`, `.has-tooltip-multiline`, `.has-tooltip-active`

---

## npm Availability Summary

- **24/29** extensions have npm packages
- **5** are GitHub-only: bulma-megamenu, bulma-coolcheckboxes, bulma.io-axure, bulma-steps (aramvisser), bulma-jumbo-tiny
- Most prolific author: **Wikiki** (17 extensions)