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 render
To render a component as another element — a router link, say — pass that element as render. It takes an element, not a boolean, and there is no asChild prop:
import { Button } from "@tessinaui/ui";
import Link from "next/link";
export default function App() {
return (
<Button render={<Link href="/about" />}>About</Button>
);
}This renders the Link with Button's styles and behaviour. The component's own children replace the element's, and the element's ref is merged.
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.