@loomidev/components

The whole LoomiUI component library in one install. This umbrella package re-exports every individual @loomidev/* component, so you can get everything with a single dependency.

npm install @loomidev/components lit

// register every LoomiUI custom element
import "@loomidev/components";

// …or just one component's entry
import "@loomidev/components/button";

It also re-exports the theming utilities from @loomidev/theme:

import { LOOMI_COLORS, isLoomiColor, type LoomiColor } from "@loomidev/components";

Accessibility

For the library-wide baseline, see Foundations — Accessibility.

Responsive behavior

For the shared container and viewport rules, see Foundations — Responsive behavior.

Dark mode

For theme activation, token overrides, and contrast guidance, see Foundations — Dark mode.

Want a smaller footprint?

Install only the components you use — each is a standalone package:

npm install @loomidev/button lit

See the root README for the full "install everything vs. install just what you need" comparison and the theming model.

// per-component entries are available too
import "@loomidev/components/input";
import "@loomidev/components/select";

Included components

| Element | Package | | ---------------------- | ------------------------------------------- | | <loomi-button> | @loomidev/button | | <loomi-input> | @loomidev/input | | <loomi-password> | @loomidev/password | | <loomi-textarea> | @loomidev/textarea | | <loomi-text-editor> | @loomidev/text-editor | | <loomi-checkbox> | @loomidev/checkbox | | <loomi-radio> | @loomidev/radio | | <loomi-toggle> | @loomidev/toggle | | <loomi-number> | @loomidev/number | | <loomi-select> | @loomidev/select | | <loomi-divider> | @loomidev/divider | | <loomi-scroller> | @loomidev/scroller | | <loomi-qrcode> | @loomidev/qrcode | | <loomi-clipboard> | @loomidev/clipboard | | <loomi-context-menu> | @loomidev/context-menu | | <loomi-profile-menu> | @loomidev/profile-menu | | <loomi-side-nav> | @loomidev/side-nav | | <loomi-timer> | @loomidev/timer | | <loomi-arc-meter> | @loomidev/arc-meter |

Framework integration

@loomidev/components registers the full LoomiUI component set. Use it when you want one import for a whole category instead of installing each component separately.

Where to run commands

Run install commands from the app where you want to use this bundle. That means the folder that contains that app's package.json. If you are editing LoomiUI itself, run pnpm --filter ... commands from the top-level components folder.

cd /path/to/your-app
npm install @loomidev/components lit

cd /path/to/your-copy-of-loomiui/components
pnpm --filter @loomidev/components build
pnpm --filter @loomidev/components typecheck

Choose your framework

<script type="importmap">
  { "imports": { "lit": "https://esm.sh/[email protected]", "lit/": "https://esm.sh/[email protected]/" } }
</script>
<script type="module" src="https://esm.sh/@loomidev/components"></script>

<loomi-button icon="check">Save</loomi-button>
<loomi-input name="email" label="Email"></loomi-input>
<loomi-card title="Account">Ready to go.</loomi-card>

cd /path/to/your-laravel-app
npm install @loomidev/components lit
npm run dev

// resources/js/app.js
import "@loomidev/components";

<loomi-button icon="check">Save</loomi-button>
<loomi-input name="email" label="Email"></loomi-input>
<loomi-card title="Account">Ready to go.</loomi-card>

import "@loomidev/components";

export function LoomiBundleExample() {
  return (
    <>
      <loomi-button icon="check">Save</loomi-button>
      <loomi-input name="email" label="Email"></loomi-input>
      <loomi-card title="Account">Ready to go.</loomi-card>
    </>
  );
}

For array or object properties such as select data or table columns, assign the value with a ref after mount when using React 18.

<script setup>
import "@loomidev/components";
</script>

<template>
  <loomi-button icon="check">Save</loomi-button>
  <loomi-input name="email" label="Email"></loomi-input>
  <loomi-card title="Account">Ready to go.</loomi-card>
</template>

Configure Vue's compilerOptions.isCustomElement for tags that start with loomi- if your tooling warns about unknown components.

import { CUSTOM_ELEMENTS_SCHEMA, Component } from "@angular/core";
import "@loomidev/components";

@Component({
  selector: "app-root",
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <loomi-button icon="check">Save</loomi-button>
    <loomi-input name="email" label="Email"></loomi-input>
    <loomi-card title="Account">Ready to go.</loomi-card>
  `,
})
export class AppComponent {}

<script>
  import "@loomidev/components";
</script>

<loomi-button icon="check">Save</loomi-button>
<loomi-input name="email" label="Email"></loomi-input>
<loomi-card title="Account">Ready to go.</loomi-card>

---
import "@loomidev/components";
---

<loomi-button icon="check">Save</loomi-button>
<loomi-input name="email" label="Email"></loomi-input>
<loomi-card title="Account">Ready to go.</loomi-card>

Server-side rendering notes

In Next.js, Nuxt, SvelteKit, and other SSR frameworks, put the bundle import in client-side code if the server build complains about browser-only APIs. The rendered HTML can still contain the <loomi-*> tags; the browser upgrades them after the JavaScript loads.

Dependencies

• @loomidev/accordion
• @loomidev/alert
• @loomidev/arc-meter
• @loomidev/autocomplete
• @loomidev/avatar
• @loomidev/bell
• @loomidev/button
• @loomidev/button-group
• @loomidev/calendar
• @loomidev/card
• @loomidev/centered-content
• @loomidev/chart
• @loomidev/checkbox
• @loomidev/checkcards
• @loomidev/clipboard
• @loomidev/colorpicker
• @loomidev/command-palette
• @loomidev/contact-card
• @loomidev/context-menu
• @loomidev/core
• @loomidev/countries
• @loomidev/creditcard
• @loomidev/data-grid
• @loomidev/date-range-picker
• @loomidev/datepicker
• @loomidev/divider
• @loomidev/drawer
• @loomidev/dropmenu
• @loomidev/emoji-picker
• @loomidev/empty-state
• @loomidev/filepicker
• @loomidev/filter-builder
• @loomidev/horizontal-line-graph
• @loomidev/icon
• @loomidev/icons
• @loomidev/input
• @loomidev/lightbox
• @loomidev/listview
• @loomidev/modal
• @loomidev/notification
• @loomidev/number
• @loomidev/pagination
• @loomidev/password
• @loomidev/otp
• @loomidev/popover
• @loomidev/processing
• @loomidev/profile-menu
• @loomidev/progress
• @loomidev/progress-steps
• @loomidev/qrcode
• @loomidev/radio
• @loomidev/rating
• @loomidev/resizable
• @loomidev/scroller
• @loomidev/select
• @loomidev/side-nav
• @loomidev/slider
• @loomidev/sortable
• @loomidev/spinner
• @loomidev/statistic
• @loomidev/tab
• @loomidev/table
• @loomidev/tag
• @loomidev/tag-input
• @loomidev/text-editor
• @loomidev/textarea
• @loomidev/theme
• @loomidev/theme-switcher
• @loomidev/timeline
• @loomidev/timepicker
• @loomidev/timer
• @loomidev/toggle
• @loomidev/tooltip