Item

Imports

Use the same component slug for React, Vue, and style token lookup. Do not import components from package roots.

import { Item, ItemHeader, ItemContent, ItemDescription, ItemActions } from "@line/abc-def-react/item";

<script setup lang="ts">
import { Item, ItemHeader, ItemContent, ItemDescription, ItemActions } from "@line/abc-def-vue/item";
</script>

Shadcn references

Compare the corresponding shadcn React and Vue documentation for the same component slug.

Basic usage

import {
  Item,
  ItemContent,
  ItemDescription,
  ItemHeader,
  ItemTitle,
} from "@line/abc-def-react/item";

export function Example() {
  return (
    <Item>
      <ItemHeader><ItemTitle>Component tokens</ItemTitle></ItemHeader>
      <ItemContent>
        <ItemDescription>Scoped to each shared class contract.</ItemDescription>
      </ItemContent>
    </Item>
  );
}

<script setup lang="ts">
import {
  Item,
  ItemContent,
  ItemDescription,
  ItemHeader,
  ItemTitle,
} from "@line/abc-def-vue/item";
</script>

<template>
  <Item>
    <ItemHeader>
      <ItemTitle>Component tokens</ItemTitle>
    </ItemHeader>
    <ItemContent>
      <ItemDescription>
        Scoped to each shared class contract.
      </ItemDescription>
    </ItemContent>
  </Item>
</template>

Component tokens

Composition exports

Usage notes

• Use for repeated rows.
• Keep row actions visually secondary unless they are the primary workflow.
• Related component tokens use the `item` token group in `@line/abc-def-styles/css`.