Sections
Get Started
UI
Components
- Animated Beam
- Animated List
- Animated Logo
- Animated Theme Toggler
- Avatar Circles
- Bento Grid
- Big Name Text
- Border Beam
- Dock
- Feature Card
- Filter Dropdown
- Footer Link
- Hero Badge
- Hero Buttons
- Hyper Text
- Lens
- Magic Card
- Marquee
- Meteors
- Onboarding Form
- Pricing Card
- Scroll Text
- Section Header
- Site Header
- Status Card
- Status
- Tweet Card
"use client";
import { AnimatedLogo } from "@/registry/sase/animated-logo";
export function AnimatedLogoDemo() {
return (
<div className="flex flex-wrap items-center gap-8">
<AnimatedLogo size="sm" letter="S" />
<AnimatedLogo size="md" letter="S" />
<AnimatedLogo size="lg" letter="S" />
</div>
);
}
Installation
pnpm dlx shadcn@latest add https://sase-ui.vercel.app/r/animated-logo.json
Usage
import { AnimatedLogo } from "@/components/ui/animated-logo";<AnimatedLogo href="/" letter="S" size="md" />Sizes
The logo supports three sizes: sm, md, and lg.
<AnimatedLogo size="sm" letter="S" />
<AnimatedLogo size="md" letter="S" />
<AnimatedLogo size="lg" letter="S" />