@loomidev/content

All LoomiUI content / data-display components in one install.

npm install @loomidev/content lit

import "@loomidev/content"; // registers all content elements

| Package | | ------------------------------------------------------------- | | @loomidev/card | | @loomidev/divider | | @loomidev/scroller | | @loomidev/qrcode | | @loomidev/avatar | | @loomidev/accordion | | @loomidev/tag | | @loomidev/tooltip | | @loomidev/popover | | @loomidev/empty-state | | @loomidev/statistic | | @loomidev/rating | | @loomidev/arc-meter | | @loomidev/timeline | | @loomidev/progress | | @loomidev/listview | | @loomidev/contact-card | | @loomidev/centered-content | | @loomidev/sortable | | @loomidev/processing | | @loomidev/horizontal-line-graph | | @loomidev/chart |

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.

Framework integration

@loomidev/content registers all LoomiUI content/display components. 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/content lit

cd /path/to/your-copy-of-loomiui/components
pnpm --filter @loomidev/content build
pnpm --filter @loomidev/content 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/content"></script>

<loomi-card title="Team member">
  <loomi-avatar label="AM" bg-color="success"></loomi-avatar>
  <loomi-tag color="success">Active</loomi-tag>
</loomi-card>

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

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

<loomi-card title="Team member">
  <loomi-avatar label="AM" bg-color="success"></loomi-avatar>
  <loomi-tag color="success">Active</loomi-tag>
</loomi-card>

import "@loomidev/content";

export function LoomiBundleExample() {
  return (
    <loomi-card title="Team member">
      <loomi-avatar label="AM" bg-color="success"></loomi-avatar>
      <loomi-tag color="success">Active</loomi-tag>
    </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/content";
</script>

<template>
  <loomi-card title="Team member">
    <loomi-avatar label="AM" bg-color="success"></loomi-avatar>
    <loomi-tag color="success">Active</loomi-tag>
  </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/content";

@Component({
  selector: "app-root",
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <loomi-card title="Team member">
      <loomi-avatar label="AM" bg-color="success"></loomi-avatar>
      <loomi-tag color="success">Active</loomi-tag>
    </loomi-card>
  `,
})
export class AppComponent {}

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

<loomi-card title="Team member">
  <loomi-avatar label="AM" bg-color="success"></loomi-avatar>
  <loomi-tag color="success">Active</loomi-tag>
</loomi-card>

---
import "@loomidev/content";
---

<loomi-card title="Team member">
  <loomi-avatar label="AM" bg-color="success"></loomi-avatar>
  <loomi-tag color="success">Active</loomi-tag>
</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/arc-meter
• @loomidev/avatar
• @loomidev/calendar
• @loomidev/card
• @loomidev/centered-content
• @loomidev/chart
• @loomidev/chat
• @loomidev/contact-card
• @loomidev/data-grid
• @loomidev/divider
• @loomidev/empty-state
• @loomidev/horizontal-line-graph
• @loomidev/listview
• @loomidev/popover
• @loomidev/processing
• @loomidev/progress
• @loomidev/qrcode
• @loomidev/rating
• @loomidev/scroller
• @loomidev/sortable
• @loomidev/statistic
• @loomidev/tag
• @loomidev/timeline
• @loomidev/tooltip