Usage

Importing Components

Import components from @tesseraui/ui:

import { Button } from "@tesseraui/ui";

Basic Example

Here's a simple example of using the Button component:

import { Button } from "@tesseraui/ui";

export default function App() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  );
}

Using Variants

Components support variants using Class Variance Authority (CVA):

import { Button } from "@tesseraui/ui";

export default function App() {
  return (
    <div className="flex gap-4">
      <Button variant="default">Default</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="destructive">Destructive</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="link">Link</Button>
    </div>
  );
}

Composition with asChild

Many components support the asChild prop for composition:

import { Button } from "@tesseraui/ui";
import Link from "next/link";

export default function App() {
  return (
    <Button asChild>
      <Link href="/about">About</Link>
    </Button>
  );
}

This renders a Link component with Button styles.

TypeScript Support

All components are fully typed with TypeScript:

import { Button, type ButtonProps } from "@tesseraui/ui";

const MyButton: React.FC<ButtonProps> = (props) => {
  return <Button {...props} />;
};

Next Steps

Explore the Components section to see all available components and their APIs.