Components
Prism Button
A stunning animated button with prismatic gradient effects, shimmer animations, and customizable colors.
Installation
Loading installation instructions...
Usage
import { PrismButton } from "@/components/pluto-ui/prism-button"<PrismButton>Get unlimited access</PrismButton>Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Button content |
highlightColor | string | - | Main highlight color (CSS color value, e.g., "hsl(280 100% 70%)" or "#ff00ff") |
highlightSubtle | string | - | Subtle highlight color for shimmer effect (CSS color value) |
className | string | - | Additional CSS classes |
| All standard button props | ButtonHTMLAttributes | - | All standard HTML button attributes are supported |
Examples
Basic Usage
Custom Colors
Customize the button's highlight colors using the highlightColor and highlightSubtle props:
<PrismButton
highlightColor="hsl(280 100% 70%)"
highlightSubtle="hsl(280 100% 70% / 0.6)"
>
Purple Button
</PrismButton>Different Sizes
Use Tailwind classes to adjust the button size:
<PrismButton className="text-sm px-4 py-2">Small</PrismButton>
<PrismButton>Default</PrismButton>
<PrismButton className="text-xl px-8 py-4">Large</PrismButton>Features
- ✓ Animated conic gradient border that rotates on hover
- ✓ Dots pattern overlay effect
- ✓ Inner shimmer animation
- ✓ Smooth hover and focus transitions
- ✓ Theme-aware styling (adapts to light/dark modes)
- ✓ Customizable highlight colors
- ✓ Fully accessible with proper focus states
- ✓ Uses CSS
@propertyfor smooth animations
Notes
- The component uses CSS
@propertywhich requires modern browser support - Animations are paused by default and activate on hover/focus
- The button automatically adapts to your theme's color scheme
- All standard button props are supported for accessibility
Credits
This component was inspired by Ryan Mulligan's CSS @property article.