Getting Started
Usage
Learn how to use Tessina UI components in your project
Importing Components
Import components from @tessinaui/ui:
import { Button } from "@tessinaui/ui";Basic Example
Here's a simple example of using the Button component:
import { Button } from "@tessinaui/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 "@tessinaui/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 "@tessinaui/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 "@tessinaui/ui";
const MyButton: React.FC<ButtonProps> = (props) => {
return <Button {...props} />;
};Next Steps
Explore the Components section to see all available components and their APIs.