Empty

Imports

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

import { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent } from "@line/abc-def-react/empty";

<script setup lang="ts">
import { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent } from "@line/abc-def-vue/empty";
</script>

Shadcn references

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

Basic usage

import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyTitle,
} from "@line/abc-def-react/empty";
import { Button } from "@line/abc-def-react/button";

export function Example() {
  return (
    <Empty>
      <EmptyHeader>
        <EmptyTitle>No overrides</EmptyTitle>
        <EmptyDescription>Add token edits to preview them.</EmptyDescription>
      </EmptyHeader>
      <EmptyContent><Button size="sm">Create override</Button></EmptyContent>
    </Empty>
  );
}

<script setup lang="ts">
import { Button } from "@line/abc-def-vue/button";
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyTitle,
} from "@line/abc-def-vue/empty";
</script>

<template>
  <Empty>
    <EmptyHeader>
      <EmptyTitle>No overrides</EmptyTitle>
      <EmptyDescription>Add token edits to preview them.</EmptyDescription>
    </EmptyHeader>
    <EmptyContent>
      <Button size="sm">Create override</Button>
    </EmptyContent>
  </Empty>
</template>

Component tokens

Composition exports

Usage notes

• Explain why the state is empty.
• Offer one clear recovery or creation action.
• Related component tokens use the `empty` token group in `@line/abc-def-styles/css`.