Sonner

Imports

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

import { Toaster } from "@line/abc-def-react/sonner";

<script setup lang="ts">
import { Toaster } from "@line/abc-def-vue/sonner";
</script>

Shadcn references

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

Basic usage

import { Button } from "@line/abc-def-react/button";
import { Toaster } from "@line/abc-def-react/sonner";

export function Example() {
  return (
    <div>
      <Button variant="outline">Toast trigger</Button>
      <Toaster />
    </div>
  );
}

<script setup lang="ts">
import { Button } from "@line/abc-def-vue/button";
import { Toaster } from "@line/abc-def-vue/sonner";
</script>

<template>
  <div>
    <Button variant="outline">Toast trigger</Button>
    <Toaster />
  </div>
</template>

Component tokens

This component does not define a dedicated component token file. It inherits shared semantic tokens and utility classes.

Composition exports

Usage notes

• Mount one toaster near the app root.
• Use toasts for transient feedback only.
• Related component tokens use the `sonner` token group in `@line/abc-def-styles/css`.