Installation

Layout UI is built on top of shadcn/ui, extending it with beautiful animations and advanced components. Follow these steps to set up your project.

Setup

Create a new Next.js project with shadcn/ui

First, create a new Next.js project and initialize shadcn/ui:

pnpm dlx shadcn@latest init

You can use the -d flag for default settings (New York style, Zinc color, and CSS variables):

pnpm dlx shadcn@latest init -d

Configure components.json

When running the init command, you'll be asked to configure your components.json:

- Which style would you like to use? › Default
- Which color would you like to use as base color? › Gray
- Do you want to use CSS variables for colors? › yes

Install additional dependencies

Layout UI requires some additional dependencies for animations and advanced features:

pnpm add framer-motion
pnpm add tailwindcss-animate
pnpm add lucide-react

Install base shadcn/ui components

Layout UI builds on top of several shadcn/ui base components. Install them:

pnpm dlx shadcn@latest add button
pnpm dlx shadcn@latest add card
pnpm dlx shadcn@latest add dialog
pnpm dlx shadcn@latest add separator

Install Layout UI components

Finally, install Layout UI components:

pnpm dlx shadcn@latest add "https://www.layoutui.tech/r/styles/default/stars.json"

Next Steps

Now that you have Layout UI set up, you can start using our animated components:

• Browse the components section to see our extended component collection
• Check out our sections for example layouts