Introduction

shincn is a portable design system built on top of shadcn/ui. It provides a curated set of components with a neutral palette, Phosphor icons, SF Pro Rounded typography, restrained radii, and purposeful motion.

What is shincn?

shincn is not a component library you install as a dependency. It is a collection of reusable components built using Base UI primitives and styled with Tailwind CSS. You copy the components into your project and customize them as needed.

Every component uses the same design tokens, icon set, and motion principles. The result is a consistent UI across your entire application.

Key Principles

• Base UI primitives — accessible, unstyled headless components from @base-ui/react
• Phosphor Icons — consistent icon set with multiple weights (regular, fill, bold)
• SF Pro Rounded — single sans-serif font across the entire UI
• Restrained radii — md for buttons/inputs, lg for cards, xl for dialogs
• Purposeful motion — only transform and opacity, with reduced-motion support

Quick Start

import { Button } from "@/components/ui/button"

export default function Page() {
  return <Button>Click me</Button>
}