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:

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 for how the catalog is built and verified, and Building a block to publish your own.

Blocks

Data & Visualization

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

Forms & Inputs

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

Overlays & Popups

  • Action Sheet: Bottom action sheet.
  • Alert: Inline alert banners.
  • Backdrop: Dimming backdrop layer.
  • Context Menu: Right-click context menu.
  • Dialog: Confirm and prompt dialogs.
  • Drawer: Anchored side panels and the bottom sheet.
  • Modal: Draggable, resizable window overlay; the primitive under the other popups.
  • Quick Menu: Command palette and quick actions.
  • Speed Dial: Floating action button with fan-out actions.
  • Toast: Transient notification toasts.
  • Tooltip: Hover tooltips.
  • Navbar: Top navigation bar.
  • Router: Client-side route outlet.
  • Tabs: Tabbed views.
  • Toolbar: Icon and action toolbar.
  • Top Menu: Menu bar with nested submenus.

Layout & Content

  • Accordion: Expandable content panels.
  • Card: Content card with media, header and footer slots.
  • Carousel: Swipeable slide carousel.
  • List: List with search, pagination and remote mode.
  • Progress: Linear and circular progress indicators.

Media

Submit your components

If you have created something awesome and would like to share, please clone https://github.com/lemonadejs/lemonadejs and send your PR.