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
Note: We have the exact same installation process as shadcn/ui.
Create project
Run the init command to create a new Next.js project or to setup an existing one:
pnpm dlx shadcn@latest init
Add components
You can now start adding components to your project.
pnpm dlx shadcn@latest add https://sase-ui.vercel.app/r/button.json
Import component
The command above will add the Button component to your project. You can then import it like this:
import { Button } from "@/components/sase/button";
export default function Home() {
return <Button>Click me</Button>;
}