Installation
How to install dependencies and set up your project to use shincn components.
Prerequisites
shincn is designed for Next.js projects using Tailwind CSS v4 and the App Router. Make sure you have a project set up with these before continuing.
Steps
1
Create a new Next.js project
npx create-next-app@latest my-app --tailwind
2
Initialize shadcn CLI
Run the shadcn init command to set up the project with the required configuration files.
npx shadcn init
3
Install required dependencies
shincn uses Base UI primitives, Phosphor Icons, and Framer Motion.
npm install @base-ui/react @phosphor-icons/react framer-motion
4
Add components from the shincn registry
Use the --registry flag to pull components from the shincn registry.
npx shadcn add button --registry https://ui.ch.sh/r
You can add multiple components at once:
npx shadcn add button card dialog input tabs --registry https://ui.ch.sh/r
5
Configure your fonts
shincn uses SF Pro Rounded as the primary font. Add this to your globals.css:
@theme inline {
--font-sans: "SF Pro Rounded", -apple-system, BlinkMacSystemFont, sans-serif;
--font-mono: "SF Mono", ui-monospace, monospace;
}