Card

shadcn/ui-style card primitives for LoomiUI. Compose a card from <loomi-card> and its loomi-card-* parts — the same structure as shadcn/ui Card.

1
npm install @loomidev/card lit

1
import "@loomidev/card";

Composition

1
loomi-card
2
├── loomi-card-header
3
│   ├── loomi-card-title
4
│   ├── loomi-card-description
5
│   └── loomi-card-action
6
├── loomi-card-content
7
└── loomi-card-footer

Basic Usage

Card Title

Card Description

Card Content

Card Footer

1
<loomi-card>
2
  <loomi-card-header>
3
    <loomi-card-title>Card Title</loomi-card-title>
4
    <loomi-card-description>Card Description</loomi-card-description>
5
  </loomi-card-header>
6
  <loomi-card-content>
7
    <p>Card Content</p>
8
  </loomi-card-content>
9
  <loomi-card-footer>
10
    <p>Card Footer</p>
11
  </loomi-card-footer>
12
</loomi-card>

Enter your email below to login to your account

1
<loomi-card style="max-width: 24rem">
2
  <loomi-card-header>
3
    <loomi-card-title>Login to your account</loomi-card-title>
4
    <loomi-card-description>
5
      Enter your email below to login to your account
6
    </loomi-card-description>
7
    <loomi-card-action>
8
      <loomi-button variant="link">Sign Up</loomi-button>
9
    </loomi-card-action>
10
  </loomi-card-header>
11
  <loomi-card-content>
12
    <form><!-- fields --></form>
13
  </loomi-card-content>
14
  <loomi-card-footer style="flex-direction: column; gap: 0.5rem">
15
    <loomi-button block>Login</loomi-button>
16
    <loomi-button block outline>Login with Google</loomi-button>
17
  </loomi-card-footer>
18
</loomi-card>

Small Size

Use size="sm" on <loomi-card> for tighter spacing (matches shadcn’s size="sm").

Small Card

This card uses the small size variant.

More compact spacing between sections.

Action

1
<loomi-card size="sm" style="max-width: 24rem">
2
  <loomi-card-header>
3
    <loomi-card-title>Small Card</loomi-card-title>
4
    <loomi-card-description>This card uses the small size variant.</loomi-card-description>
5
  </loomi-card-header>
6
  <loomi-card-content>
7
    <p>More compact spacing between sections.</p>
8
  </loomi-card-content>
9
  <loomi-card-footer>
10
    <loomi-button size="small" outline block>Action</loomi-button>
11
  </loomi-card-footer>
12
</loomi-card>

Clickable Cards

Set url to make the whole card act as a link — a path, a full URL, or a JS function call. Pair it with has-hover for a hover-shadow cue.

Click anywhere on me

1
<loomi-card has-hover url="/dashboard">
2
  <loomi-card-content>Click anywhere on me</loomi-card-content>
3
</loomi-card>

Image Cards

Place an <img> as the first child of <loomi-card> to get a flush top image with rounded top corners (same pattern as shadcn’s image example).

Design systems meetup

A practical talk on component APIs.

View Event

1
<loomi-card style="max-width: 24rem">
2
  <img src="/cover.jpg" alt="Event cover" />
3
  <loomi-card-header>
4
    <loomi-card-action>
5
      <loomi-tag label="Featured" color="secondary"></loomi-tag>
6
    </loomi-card-action>
7
    <loomi-card-title>Design systems meetup</loomi-card-title>
8
    <loomi-card-description>A practical talk on component APIs.</loomi-card-description>
9
  </loomi-card-header>
10
  <loomi-card-footer>
11
    <loomi-button block>View Event</loomi-button>
12
  </loomi-card-footer>
13
</loomi-card>

Card Styling

<loomi-card> renders as a clean, solid panel by default: a semantic surface fill, hairline border, theme-aware panel radius, and restrained shadow. This keeps dense dashboard and settings layouts clear without adding a glass effect. Turn the border or shadow off with has-border / has-shadow. Add transparent when you want to keep card spacing and composition but let the parent surface show through.

Flat, no border or shadow

Border only

Transparent card shell

1
<loomi-card has-shadow="false" has-border="false" style="max-width: 20rem">
2
  <loomi-card-content>Flat, no border or shadow</loomi-card-content>
3
</loomi-card>
4
<loomi-card has-shadow="false" style="max-width: 20rem">
5
  <loomi-card-content>Border only</loomi-card-content>
6
</loomi-card>
7
<loomi-card transparent has-shadow="false" has-border="false" style="max-width: 20rem">
8
  <loomi-card-content>Transparent card shell</loomi-card-content>
9
</loomi-card>

Spacing

Section spacing is controlled by the --loomi-card-spacing custom property on <loomi-card> (defaults to 1rem, 0.75rem when size="sm"). Override it for custom layouts:

...

1
<loomi-card style="--loomi-card-spacing: 1.5rem">...</loomi-card>

The card also reads the Pro theme tokens --loomi-component-panel-radius and --loomi-component-card-shadow. You can override --loomi-card-radius or --loomi-card-shadow directly when a single card needs a different treatment.

Accessibility

Compose headings with loomi-card-title for page structure.

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.

Attributes

`<loomi-card>`

Attribute	Default	Description
`size`	`default`	`default` \| `sm` — controls section spacing.
`has-shadow`	`true`	Restrained, theme-aware panel shadow. (boolean)
`has-border`	`true`	Hairline border. (boolean)
`has-hover`	`false`	Extra shadow on hover. (boolean)
`transparent`	`false`	Remove the card surface fill. (boolean)
`url`	(blank)	Navigate on click (path, `fn()` call, or full URL).

Parts

Element	Description
`<loomi-card-header>`	Title, description, and optional action.
`<loomi-card-title>`	Card heading.
`<loomi-card-description>`	Muted helper text under the title.
`<loomi-card-action>`	Top-right header action (button, badge, link).
`<loomi-card-content>`	Main card body.
`<loomi-card-footer>`	Bottom actions; gets a muted background and top border.

Slots

Slot	Description
(default)	Content placed inside the component.

Framework integration

<loomi-card> is a standard custom element, so the browser can use it in plain HTML, Blade, React, Vue, Angular, Svelte, Astro, and most other frameworks. The important beginner rule is: install the package, import it once before the tag is rendered, then write the Loomi tag in your template.

Where to run commands

Run install commands from the app where you want to use this component. That means the folder that contains that app’s package.json. Do not run these install commands from packages/card unless you are editing LoomiUI itself.

1
cd /path/to/your-app
2
npm install @loomidev/card lit

If you are contributing to LoomiUI itself, first move to the top-level components folder. That is where the main package.json for all packages lives, and pnpm --filter ... commands should be run from there:

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

Choose your framework

Use the CDN version for prototypes, documentation pages, or a quick reproduction. The import map tells the browser where to find Lit, which Loomi components use internally.

1
<script type="importmap">
2
  { "imports": { "lit": "https://esm.sh/lit@3.3.3", "lit/": "https://esm.sh/lit@3.3.3/" } }
3
</script>
4
<script type="module" src="https://esm.sh/@loomidev/card"></script>
5

6
<loomi-card>
7
  <loomi-card-header>
8
    <loomi-card-title>Billing</loomi-card-title>
9
  </loomi-card-header>
10
  <loomi-card-content>
11
    <p>Your next invoice is due on Friday.</p>
12
  </loomi-card-content>
13
</loomi-card>

In Vite, Webpack, Parcel, Rollup, or a framework build pipeline, install the package and import it once in your main app JavaScript file. After that, you can use the Loomi tag anywhere in your app.

1
import "@loomidev/card";

Run the install command from your Laravel project root, then import the component in resources/js/app.js. If your project uses Laravel Vite, npm run dev and npm run build should also be run from the Laravel project root.

1
cd /path/to/your-laravel-app
2
npm install @loomidev/card lit
3
npm run dev

1
import "@loomidev/card";

1
<loomi-card>
2
  <loomi-card-header>
3
    <loomi-card-title>Billing</loomi-card-title>
4
  </loomi-card-header>
5
  <loomi-card-content>
6
    <p>Your next invoice is due on Friday.</p>
7
  </loomi-card-content>
8
</loomi-card>

React can render Loomi tags directly. If you are on React 18, or if you need to pass arrays, objects, or functions, use a ref and assign those values after the component mounts.

1
import "@loomidev/card";
2

3
export function LoomiExample() {
4
  return (
5
    <loomi-card>
6
      <loomi-card-header>
7
        <loomi-card-title>Billing</loomi-card-title>
8
      </loomi-card-header>
9
      <loomi-card-content>
10
        <p>Your next invoice is due on Friday.</p>
11
      </loomi-card-content>
12
    </loomi-card>
13
  );
14
}

If TypeScript does not recognize the Loomi tag in JSX, add it to your app’s JSX type declarations.

Import the package in the component that uses it, or once in your main Vue file. Vue templates can use Loomi tags directly. For arrays, objects, or functions, pass the value as a JavaScript property instead of as plain text.

1
<script setup>
2
import "@loomidev/card";
3
</script>
4

5
<template>
6
  <loomi-card>
7
    <loomi-card-header>
8
      <loomi-card-title>Billing</loomi-card-title>
9
    </loomi-card-header>
10
    <loomi-card-content>
11
      <p>Your next invoice is due on Friday.</p>
12
    </loomi-card-content>
13
  </loomi-card>
14
</template>

If Vue warns that the tag is an unknown component, configure compilerOptions.isCustomElement for tags that start with loomi- in your Vite or Vue config.

Import the package once and tell Angular to allow custom HTML tags with CUSTOM_ELEMENTS_SCHEMA. For NgModule apps, add the schema to the module instead of the standalone component.

1
import { CUSTOM_ELEMENTS_SCHEMA, Component } from "@angular/core";
2
import "@loomidev/card";
3

4
@Component({
5
  selector: "app-root",
6
  standalone: true,
7
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
8
  template: `
9
    <loomi-card>
10
      <loomi-card-header>
11
        <loomi-card-title>Billing</loomi-card-title>
12
      </loomi-card-header>
13
      <loomi-card-content>
14
        <p>Your next invoice is due on Friday.</p>
15
      </loomi-card-content>
16
    </loomi-card>
17
  `,
18
})
19
export class AppComponent {}

Svelte can import the package inside a component script. Astro can import it in the frontmatter of the page or layout where the tag appears.

1
<script>
2
  import "@loomidev/card";
3
</script>
4

5
<loomi-card>
6
  <loomi-card-header>
7
    <loomi-card-title>Billing</loomi-card-title>
8
  </loomi-card-header>
9
  <loomi-card-content>
10
    <p>Your next invoice is due on Friday.</p>
11
  </loomi-card-content>
12
</loomi-card>

1
---
2
import "@loomidev/card";
3
---
4

5
<loomi-card>
6
  <loomi-card-header>
7
    <loomi-card-title>Billing</loomi-card-title>
8
  </loomi-card-header>
9
  <loomi-card-content>
10
    <p>Your next invoice is due on Friday.</p>
11
  </loomi-card-content>
12
</loomi-card>

Server-side rendering notes

Frameworks such as Next.js, Nuxt, SvelteKit, and Astro sometimes render HTML on the server before browser-only code runs. If your framework complains, move the Loomi import to client-side code. In Next.js, that usually means a component with "use client"; in Nuxt, it often means a .client.ts plugin.

Dependencies

@loomidev/core