React Guide

Install

Install the shared styles package, Tailwind CSS v4, animation helpers, React, and the React component package.

pnpm add tailwindcss tw-animate-css @line/abc-def-styles
pnpm add @line/abc-def-react react react-dom

Add the React package output to your Tailwind source list and keep a source rule for your application files.

@source "../node_modules/@line/abc-def-react/dist/**/*.{js,cjs}";
@source "../**/*.{ts,tsx}";

Import components

The React package intentionally has no root component export. Import each component from its public subpath.

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

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

// Unsupported
import { Button } from "@line/abc-def-react";

Composition

Compound components are exported from the same subpath as their root component. For example, dialog content, title, description, and trigger exports all come from `@line/abc-def-react/dialog`.

Examples

Component pages include React imports and basic snippets. The repository also keeps a richer local Next.js example gallery under `examples/nextjs`.