Apple-ish UIKit for Next.js
Appleの公式サイトに見られるような、静寂で洗練されたUIを、Next.js (App Router) で即座に再現するためのデザインシステム兼UIキットです。
「Appleっぽさ」を部品化する 角丸、影、余白、そしてガラス表現（Blur）――。これらをバラバラに実装するのではなく、統一された「トークン」として管理し、積み上げることで美しいUIを構築します。
- 🍎 Apple-ish Design
- 大きめで統一された角丸 (
--r-*) - 繊細なレイヤー構造と柔らかい影
- 美しいGlass morphism / blur表現
- 大きめで統一された角丸 (
- 🎨 Design Tokens
- CSS Variables による一元管理 (
--accent,--border,--shadow, etc.) - ダークモード対応を見越した設計
- CSS Variables による一元管理 (
- ⚡️ Next.js Ready
- App Router 完全対応
- Server Component 指向（基本はCSS + React）
- Tailwind Utility を前提とした軽量設計
- 📦 Monorepo Friendly
- Bun + Turborepo 構成
@vrugd/uiパッケージとして分離済み
repo-root/
├── apps/
│ └── web/ # Next.js App Router (Demo App)
└── packages/
└── ui/ # @vrugd/ui (Component Library)
- Bun:
1.3.x - Node.js:
18+(Recommended:20+)
ルートディレクトリで以下を実行してください。
# Install dependencies
bun install
# Start development server (Demo app)
bunx turbo dev --filter=web
起動後、http://localhost:3000 にアクセスするとデモが表示されます。
Next.js (App Router) アプリケーションで @vrugd/ui を使用する手順です。
ワークスペース内のパッケージとして依存関係に追加します。
apps/web/package.json
{
"dependencies": {
"@vrugd/ui": "workspace:*"
}
}
UIキットの基本スタイル（Design Tokens & Base styles）を読み込みます。
apps/web/app/globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;
/* @vrugd/ui global styles & tokens */
@import "../../../packages/ui/src/styles/globals.css";UIパッケージ内のクラスをTailwindが検知できるようにパスを通します。
apps/web/tailwind.config.ts
import type { Config } from "tailwindcss";
const config: Config = {
content: [
"./app/**/*.{ts,tsx}",
// UIパッケージ内のコンポーネントをスキャン対象に追加
"../../packages/ui/src/**/*.{ts,tsx}"
],
// ...
};
export default config;コンポーネントをインポートして配置します。
apps/web/app/page.tsx
import * as React from "react";
import { Button, Card, Hero, Navbar, Section, Text } from "@vrugd/ui";
export default function Page() {
return (
<main>
<Navbar
brand={<span className="font-semibold">UIKit</span>}
items={[
{ label: "Overview", href: "#overview" },
{ label: "Components", href: "#components" }
]}
right={
<div className="flex items-center gap-2">
<Button variant="soft">Docs</Button>
<Button>Get started</Button>
</div>
}
/>
<Hero
eyebrow="Next.js App Router"
title="AppleっぽいUIを “部品化” して積み上げる"
description="トークン（色/影/角丸/ガラス）を中心に、一貫したルールで提供します。"
actions={
<>
<Button>Install</Button>
<Button variant="ghost">View components</Button>
</>
}
/>
<Section id="overview">
<div className="grid gap-4 md:grid-cols-3">
<Card tone="elevated" className="p-6">
<div className="text-[13px] text-[rgb(var(--muted))]">Design tokens</div>
<div className="mt-2 font-semibold">一貫した“Apple感”</div>
<Text className="mt-2" tone="muted">
角丸・影・ガラス・タイポ・余白をトークン化して統一。
</Text>
</Card>
</div>
</Section>
</main>
);
}デザインは packages/ui/src/styles/tokens.css 内の CSS Variables によって制御されています。これらを変更するだけで、全体のルック＆フィールを調整可能です。
:root {
/* Colors (RGB format for opacity manipulation) */
--accent: 10 132 255; /* Blue */
--border: 228 228 231; /* Gray */
/* Radius */
--r-sm: 12px;
--r-md: 16px;
--r-lg: 22px;
/* Shadows (Layered shadows) */
--shadow-sm: 0 1px 0 rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.06);
}現在提供されている主要コンポーネント：
| Name | Description |
|---|---|
| Navbar | 半透明（Glass）効果を持つナビゲーションバー |
| Hero | 大きな見出しとCTAを持つイントロダクションエリア |
| Card | elevated, outlined, soft などのトーンを持つカード |
| Button | インタラクティブなボタン要素 |
| Glass | 背景ぼかし効果を持つコンテナ |
| Text | タイポグラフィルールを適用したテキストラッパー |
TypeScript Support Next.js が TypeScript を検知した場合、依存関係の追加が必要になることがあります。
bun add -d --cwd apps/web @types/node @types/react @types/react-dom
- 🌗 Dark mode toggle / Theme switch
- ✍️ Typography components (
H1,H2,Lead) - 🎬 Motion layer (Framer Motion optional)
- 📐 Layout primitives (Grid, Stack)
- 📦 Publish-ready build (
dist/output + type declarations)
MIT (TBD)