Rich Button

A highly customizable button with premium 3D effects and color variants.

The RichButton is a tactile trigger designed for modern interfaces. It features a subtle 3D lift effect, responsive spring physics, and a wide palette of premium color variants.

Preview

Usage

Installation

$ pnpm dlx shadcn add https://klarden.vercel.app/r/rich-button.json

Basic Example

import { RichButton } from "@/components/rich-button";

export default function App() {
  return <RichButton color="emerald">Confirm Action</RichButton>;
}

Properties

PropTypeDefaultDescription
colorstring"default"Defines the color variant of the button.
size"sm" | "default" | "lg""default"Controls the size of the button.
asChildbooleanfalseAllows rendering as a child component via Radix Slot.
classNamestringAdditional CSS classes.