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 yourcomponents.json
:Which style would you like to use? › New York
Which color would you like to use as base color? › Zinc
Do you want to use CSS variables for colors? › yes
Install additional dependencies
AtomixUI 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
AtomixUI 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 AtomixUI components
Finally, install AtomixUI components:pnpm dlx shadcn@latest add "https://www.atomixui.tech/r/styles/default/expandable-card.json"
Next Steps
Now that you have AtomixUI set up, you can start using our animated components:
- Browse the components section to see our extended component collection
- Check out our portfolios for example layouts