Button

A button component with some good default styling.

Installation

Usage

Default

Here's an example of a button with the default variant and size out-of-the-box:

import { Button } from "@/components/ui/button"

export default function SimpleButton() {
  return <Button>Click me</Button>
}

Link Button

You can use the render prop to create a link that looks like a button:

import Link from "next/link"

import { Button } from "@/components/ui/button"

export function LinkAsButton() {
  return <Button render={<Link href="/login" />}>Login</Button>
}

Components

A collection of clean, dependency-light UI components inspired by shad/cn. Each one is built for flexibility, readability, and easy customization.

Files

Ready-to-use configuration files for tools, frameworks, and environments.

On this page

Installation Usage Default Link Button