Components
Loading preview...
Here is Eclipse Button component
@iamsatish4564
npx shadcn@latest add https://21st.dev/r/iamsatish4564/eclipse-button'use client';
import { EclipseButton } from '@/components/ui/eclipse-button';
import { ArrowRight, ChevronLeft, Settings, Github } from 'lucide-react';
export default function EclipseButtonIcons() {
return (
<div className="p-8 flex flex-col gap-8 items-center justify-center bg-white dark:bg-neutral-950">
{/*
NOTE: This layout uses container queries (@sm, @lg, etc.).
For this to work in your own application, the parent element of this component
must have the Tailwind CSS class "@container".
*/}
<div className="flex flex-col w-full gap-8 items-center @md:flex-row @md:justify-center @md:items-end">
{/* Small with Left Icon */}
<div className="flex flex-col items-center gap-2">
<span className="text-xs text-neutral-400 font-mono uppercase">Size: SM</span>
<EclipseButton
size="sm"
variant="outline"
leftIcon={<ChevronLeft className="w-3 h-3" />}
text="Back"
/>
</div>
{/* Default with Right Icon */}
<div className="flex flex-col items-center gap-2">
<span className="text-xs text-neutral-400 font-mono uppercase">Size: Default</span>
<EclipseButton
text="Continue"
rightIcon={<ArrowRight className="w-4 h-4" />}
/>
</div>
{/* Large with Icon */}
<div className="flex flex-col items-center gap-2">
<span className="text-xs text-neutral-400 font-mono uppercase">Size: LG</span>
<EclipseButton
size="lg"
leftIcon={<Github className="w-5 h-5" />}
text="Sign in with Github"
/>
</div>
{/* Icon Only */}
<div className="flex flex-col items-center gap-2">
<span className="text-xs text-neutral-400 font-mono uppercase">Size: Icon</span>
<EclipseButton
size="icon"
variant="ghost"
aria-label="Settings"
leftIcon={<Settings className="w-5 h-5" />}
/>
</div>
</div>
</div>
);
}