---
title: "JavaScript Components and Plugins"
description: "The official LemonadeJS v6 blocks: 45 contract-verified JavaScript components, each with a live example, its props, events and API."
source: https://lemonadejs.com/docs/plugins/
---

# JavaScript Components

Every block below is an npm package, a machine-readable contract and a
conformance proof. Each page runs the block live at the top, then lists its
props, events and `ref` API straight from the contract.

One component, three deployment forms:

```js
html`<${Rating} />`                      // by value, no registration
setComponents({ Rating });               // then <Rating /> by name anywhere
createWebComponent(Rating);              // <lm-rating> in plain HTML or any framework
```

Install any block with `npm install @lemonadejs/<name>` and import its
stylesheet once. Styling is plain CSS on `lm-*` classes with `--lm-*` tokens,
so a block looks right on its own and adopts your theme when you set the
tokens. See [The Studio](/docs/studio/) for how the catalog is built and
verified, and [Building a block](/docs/building-blocks/) to publish your own.

## Blocks

<!-- blocks:start -->

### Data & Visualization

* [Charts](/charts/): 33+ chart types on one reactive block, at a fraction of the size.
* [Data Grid](/docs/plugins/datagrid/): Virtualized data table with sorting, editing and big-data rendering.
* [Gantt](/docs/plugins/gantt/): Percent-positioned gantt: drag to move and resize, dependencies, milestones.
* [Kanban](/docs/plugins/kanban/): Drag-and-drop card board whose cards keep their DOM identity across columns.
* [Organogram](/docs/plugins/organogram/): Org chart from a flat adjacency list, with pan, zoom and search.
* [Schedule](/docs/plugins/schedule/): Calendar and agenda scheduling views.
* [Timeline](/docs/plugins/timeline/): Vertical event timeline with grouping.
* [Tree View](/docs/plugins/treeview/): Collapsible tree with selection.

### Forms & Inputs

* [Button](/docs/plugins/button/): Buttons in every variant and size.
* [Button Group](/docs/plugins/buttongroup/): Segmented button group.
* [Calendar](/docs/plugins/calendar/): Date, datetime and range picker.
* [Color Picker](/docs/plugins/color/): Palette and gradient color picker.
* [Dropdown](/docs/plugins/dropdown/): Select with search, groups, images and multi-select.
* [Rich Text Editor](/docs/plugins/editor/): Rich text on the Toolbar block, with tables, print and Word export.
* [Formify](/docs/plugins/formify/): Smart HTML forms: your markup in, one data object out.
* [Login](/docs/plugins/login/): Multi-screen authentication: login, register, forgot and reset password.
* [Rating](/docs/plugins/rating/): Star rating input.
* [Signature Pad](/docs/plugins/signature/): Signature drawing pad.
* [Slider](/docs/plugins/slider/): Range slider input.
* [Switch](/docs/plugins/switch/): On/off switch.
* [Toggle](/docs/plugins/toggle/): Toggle button with icon support.
* [Transfer List](/docs/plugins/transferlist/): Two-pane item transfer picker.
* [Wheel Picker](/docs/plugins/wheel/): iOS-style wheel picker.

### Overlays & Popups

* [Action Sheet](/docs/plugins/actionsheet/): Bottom action sheet.
* [Alert](/docs/plugins/alert/): Inline alert banners.
* [Backdrop](/docs/plugins/backdrop/): Dimming backdrop layer.
* [Context Menu](/docs/plugins/contextmenu/): Right-click context menu.
* [Dialog](/docs/plugins/dialog/): Confirm and prompt dialogs.
* [Drawer](/docs/plugins/drawer/): Anchored side panels and the bottom sheet.
* [Modal](/docs/plugins/modal/): Draggable, resizable window overlay; the primitive under the other popups.
* [Quick Menu](/docs/plugins/quickmenu/): Command palette and quick actions.
* [Speed Dial](/docs/plugins/speeddial/): Floating action button with fan-out actions.
* [Toast](/docs/plugins/toast/): Transient notification toasts.
* [Tooltip](/docs/plugins/tooltip/): Hover tooltips.

### Navigation

* [Navbar](/docs/plugins/navbar/): Top navigation bar.
* [Router](/docs/plugins/router/): Client-side route outlet.
* [Tabs](/docs/plugins/tabs/): Tabbed views.
* [Toolbar](/docs/plugins/toolbar/): Icon and action toolbar.
* [Top Menu](/docs/plugins/topmenu/): Menu bar with nested submenus.

### Layout & Content

* [Accordion](/docs/plugins/accordion/): Expandable content panels.
* [Card](/docs/plugins/card/): Content card with media, header and footer slots.
* [Carousel](/docs/plugins/carousel/): Swipeable slide carousel.
* [List](/docs/plugins/list/): List with search, pagination and remote mode.
* [Progress](/docs/plugins/progress/): Linear and circular progress indicators.

### Media

* [Image Cropper](/docs/plugins/cropper/): Image cropping with zoom and rotate.
* [Image List](/docs/plugins/imagelist/): Image gallery grid.

<!-- blocks:end -->

> **Submit your components**
>
> If you have created something awesome and would like to share, please clone [https://github.com/lemonadejs/lemonadejs](https://github.com/lemonadejs/lemonadejs) and send your PR.