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 the M3 color scheme, type scale, shape, and elevation from CSS tokens. Install them once:

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

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

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

npm install tw-animate-css

npx shadcn@latest add https://mountainview-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="tonal">Continue</Button>