Components
Loading preview...
Highly customizable button component with animations and custom gradient effects using webgl and gsap
@Scottclayton3d
npx shadcn@latest add https://21st.dev/r/lovesickfromthe6ix/gradient-buttonimport React, { useState } from 'react';
import { AdvancedButton } from "@/components/ui/gradient-button";
const DemoOne = () => {
const [clickCount, setClickCount] = useState(0);
const [loading, setLoading] = useState(false);
const handleClick = () => {
setClickCount(prev => prev + 1);
};
const handleAsyncAction = async () => {
setLoading(true);
// Simulate async operation
await new Promise(resolve => setTimeout(resolve, 2000));
setLoading(false);
alert('Action completed!');
};
return (
<div className={`demo-wrapper ${theme}`}>
<div className="button-grid">
{/* Variants */}
<section className="button-section">
<h2>Variants</h2>
<div className="button-row">
<AdvancedButton variant="primary" onClick={handleClick}>
Primary
</AdvancedButton>
<AdvancedButton variant="secondary" onClick={handleClick}>
Secondary
</AdvancedButton>
<AdvancedButton variant="ghost" onClick={handleClick}>
Ghost
</AdvancedButton>
<AdvancedButton variant="gradient" onClick={handleClick}>
Gradient
</AdvancedButton>
</div>
</section>
{/* Gradient Types */}
<section className="button-section">
<h2>Gradient Types</h2>
<div className="button-row">
<AdvancedButton gradientType="animated" onClick={handleClick}>
Animated Gradient
</AdvancedButton>
<AdvancedButton gradientType="static" onClick={handleClick}>
Static Gradient
</AdvancedButton>
<AdvancedButton gradientType="radial" onClick={handleClick}>
Radial Gradient
</AdvancedButton>
<AdvancedButton gradientType="conic" onClick={handleClick}>
Conic Gradient
</AdvancedButton>
</div>
</section>
{/* Custom Styling */}
<section className="button-section">
<h2>Custom Styling</h2>
<div className="button-row">
<AdvancedButton
className="custom-purple"
onClick={handleClick}
>
Custom Purple
</AdvancedButton>
<AdvancedButton
className="custom-green"
onClick={handleClick}
>
Custom Green
</AdvancedButton>
<AdvancedButton
className="custom-orange"
size="small"
onClick={handleClick}
>
Custom Orange
</AdvancedButton>
</div>
</section>
{/* Icon Examples */}
<section className="button-section">
<h2>With Icons</h2>
<div className="button-row">
<AdvancedButton variant="primary" onClick={handleClick}>
<span style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
</svg>
Add Item
</span>
</AdvancedButton>
<AdvancedButton variant="secondary" onClick={handleClick}>
<span style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
<path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>
</svg>
Edit
</span>
</AdvancedButton>
<AdvancedButton variant="ghost" onClick={handleClick}>
<span style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
Settings
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
</svg>
</span>
</AdvancedButton>
</div>
</section>
</div>
</div>
);
};
const DemoTwo = () => {
const [theme, setTheme] = useState('dark');
return (
<div className={`demo-wrapper ${theme}`}>
<div className="button-grid">
{/* E-commerce Examples */}
<div className="button-card">
<h4>E-commerce</h4>
<AdvancedButton
variant="primary"
size="medium"
onClick={() => console.log('Add to cart')}
>
Add to Cart
</AdvancedButton>
<AdvancedButton
variant="secondary"
size="medium"
onClick={() => console.log('Buy now')}
>
Buy Now
</AdvancedButton>
</div>
</div>
</div>
);
};
const DemoThree = () => {
const [theme, setTheme] = useState('dark');
return (
<div className={`demo-wrapper ${theme}`}>
<div className="button-grid">
{/* Social Media Examples */}
<div className="button-card">
<h4>Social Actions</h4>
<AdvancedButton
variant="ghost"
size="small"
onClick={() => console.log('Follow')}
>
Follow
</AdvancedButton>
</div>
</div>
</div>
);
};
const DemoFour = () => {
const [clickCount, setClickCount] = useState(0);
const [loading, setLoading] = useState(false);
const handleClick = () => {
setClickCount(prev => prev + 1);
};
const handleAsyncAction = async () => {
setLoading(true);
// Simulate async operation
await new Promise(resolve => setTimeout(resolve, 2000));
setLoading(false);
alert('Action completed!');
};
return (
<div className={`demo-wrapper ${theme}`}>
<div className="button-grid">
<h2>With Icons</h2>
<div className="button-row">
<AdvancedButton variant="primary" onClick={handleClick}>
<span style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
</svg>
Add Item
</span>
</AdvancedButton>
<AdvancedButton variant="secondary" onClick={handleClick}>
<span style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
<path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>
</svg>
Edit
</span>
</AdvancedButton>
<AdvancedButton variant="ghost" onClick={handleClick}>
<span style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
Settings
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
</svg>
</span>
</AdvancedButton>
</div>
</div>
</div>
);
};
export default DemoOne;
export { DemoTwo, DemoThree, DemoFour };