Docs·Rich Button

Rich Button

A tactile gradient button with inset highlights, color variants, responsive sizes, and press feedback.

Installation

$pnpm dlx shadcn@latest add @spiderui/rich-button

Usage

API Reference

PropTypeDefault
colorButton color treatment.
RichButtonColordefault
asChildMerges button behavior into a single child element.
booleanfalse
sizeButton height and text scale.
"sm" | "default" | "lg"default
disabledPrevents interaction and dims the button.
booleanfalse
classNameAdditional classes on the button.
string—

Click on the icon in the top right of the example preview to view the source code for specific variants.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Have any questions?
Contact on@ctrlcat0x
import { RichButton } from "@/components/ui/rich-button"
export default function Page() {
  return <RichButton color="orange">Continue</RichButton>
}