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 OpenRunde as the primary font. Download the woff2 files from the OpenRunde releases page and place them in public/fonts/open-runde/. Then configure next/font/local in your root layout:
import localFont from "next/font/local";
const openRunde = localFont({
src: [
{ path: "../../public/fonts/open-runde/OpenRunde-Regular.woff2", weight: "400" },
{ path: "../../public/fonts/open-runde/OpenRunde-Medium.woff2", weight: "500" },
{ path: "../../public/fonts/open-runde/OpenRunde-Semibold.woff2", weight: "600" },
{ path: "../../public/fonts/open-runde/OpenRunde-Bold.woff2", weight: "700" },
],
variable: "--font-open-runde",
display: "swap",
});
// In your layout, add the variable to <html>:
// <html className={openRunde.variable}>Then set the font in your globals.css:
@theme inline {
--font-sans: var(--font-open-runde), ui-rounded, sans-serif;
--font-mono: "SF Mono", ui-monospace, monospace;
}