Rainbow Button

PreviewCode

Get Unlimited Access

@/demos/RainbowButtonDemo.tsx

import { RainbowButton } from '@/registry/magicui/rainbow-button'

export function RainbowButtonDemo() {
  return <RainbowButton>Get Unlimited Access</RainbowButton>
}

Installation

pnpm

pnpm dlx shadcn@latest add @magicui-solid/rainbow-button

bun

bunx shadcn@latest add @magicui-solid/rainbow-button

yarn

yarn dlx shadcn@latest add @magicui-solid/rainbow-button

npm

npx shadcn@latest add @magicui-solid/rainbow-button

Import

import { RainbowButton } from '@/components/magicui/rainbow-button'

Usage

<RainbowButton>Rainbow Button</RainbowButton>

Examples

Outline Variant

PreviewCode

Get Unlimited Access

@/demos/RainbowButtonDemo2.tsx

import { RainbowButton } from '@/registry/magicui/rainbow-button'

export function RainbowButtonDemo2() {
  return <RainbowButton variant="outline">Get Unlimited Access</RainbowButton>
}

Props

Prop	Type	Default	Description
class	string	-	Additional CSS classes to be applied to the button.
children	JSX.Element	-	The content to be displayed inside the button.
as	ValidComponent	"button"	The element or component to render as.
variant	"default" "outline"	"default"	The variant of the button.
size	"default" "sm" "lg" "icon"	"default"	The size of the button.

Original:

magicui.design/docs/components/rainbow-button