Skip to main content

​
Overview

Premium Button pairs a high-contrast lime-yellow multi-stop gradient with a 300ms bg-position hover transition to create a shimmering color shift. A built-in SVG crown icon reinforces the premium visual identity without any external icon dependency.

​
Installation

npx rareui@latest add premium-button
Or copy the component source manually into components/rareui/premium-button.tsx.

​
Usage

import { PremiumButton } from '@/components/rareui/premium-button';

export default function App() {
  return (
    <PremiumButton />
  );
}
This component does not accept props. To customize colors, text, or icon, edit the component source directly after installation.

​
Props

This component does not expose props. All styling is baked into the Tailwind class list. Modify the source file after installation to adjust the gradient stops, label text, or icon.

​
Examples

​
Basic usage

import { PremiumButton } from '@/components/rareui/premium-button';

<PremiumButton />

​
Inside a flex container

<div className="flex items-center justify-center gap-4">
  <PremiumButton />
</div>

​
Wrapping in a link

import Link from 'next/link';

<Link href="/upgrade">
  <PremiumButton />
</Link>

​
Features

Animated gradient background

An 8-stop lime-yellow gradient shifts from bg-left to bg-right on hover via background-position transition.

Built-in crown icon

An inline SVG crown mark is included — no external icon library required.

Text and box shadows

Lime-tinted text-shadow and a diffused box-shadow add perceived depth.

Smooth transitions

Background and color properties transition at 300ms ease-out for a polished feel.

Build docs developers (and LLMs) love

Get started for freeTalk to us