Installation

Works in any React project with Tailwind CSS v4. Next.js shown here.

1. Set up shadcn

If your project doesn't have a components.json yet:

npx shadcn@latest init

The components read Apple's system colors, type scale, and materials from CSS tokens. Install them once:

npx shadcn@latest add --overwrite https://cupertino-ui.baltoon.jp/r/theme.json

This places cupertino-ui-theme.css in your project root. Import it in your global stylesheet, after Tailwind:

@import "tailwindcss";
@import "tw-animate-css";
@import "../cupertino-ui-theme.css";

npm install tw-animate-css

npx shadcn@latest add https://cupertino-ui.baltoon.jp/r/button.json

The source lands in components/ui/. It's yours now — edit it freely.

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

<Button variant="tinted">Continue</Button>