kargulstudio/calender-app-design

选用指南

AI 根据 README 整理 · 2026/10/27 12:11:34

使用方式

通过浏览器访问，使用 npm 命令在本地启动开发服务器。

查看 README 依据

- **Tailwind CSS v4** with design tokens mapped from the Figma variables - **shadcn/ui** (Radix primitives) themed to the design - **Zustand** for state (`persist` middleware → `localStorage`) - **next-themes** for dark mode, **Sonner** for toasts, **cmdk** for the command palette ## Getting started ```bash npm install npm run dev ``` Open http://localhost:3000. To return to the exact design state, use **Settings → Data → Reset demo data** (or clear site data). ## What works - **Calendar** — week / day / month views; drag on empty space to create, drag

部署要求

需要 Node.js 环境，通过 npm install 和 npm run dev 运行。

查看 README 依据

- **Tailwind CSS v4** with design tokens mapped from the Figma variables - **shadcn/ui** (Radix primitives) themed to the design - **Zustand** for state (`persist` middleware → `localStorage`) - **next-themes** for dark mode, **Sonner** for toasts, **cmdk** for the command palette ## Getting started ```bash npm install npm run dev ``` Open http://localhost:3000. To return to the exact design state, use **Settings → Data → Reset demo data** (or clear site data). ## What works - **Calendar** — week / day / month views; drag on empty space to create, drag

已知限制

没有后端，数据存储在 localStorage 中，可通过设置重置演示数据。

查看 README 依据

# Kargul Calender Design Prototype A design prototype of **Kargul Workspace**, a people-ops workspace built from the "Dashboard – calendar" Figma design. Live at https://calender-app-design.vercel.app. The **Time off** page (`/time-off`, the default route) reproduces the design pixel-for-pixel; every other page in the sidebar is built in the same visual language. Everything runs in the browser — there is no backend; data persists to `localStorage`. ## Stack - **Next.js 16** (App Router, Turbopack) · **React 19** · **TypeScript**

- **Tailwind CSS v4** with design tokens mapped from the Figma variables - **shadcn/ui** (Radix primitives) themed to the design - **Zustand** for state (`persist` middleware → `localStorage`) - **next-themes** for dark mode, **Sonner** for toasts, **cmdk** for the command palette ## Getting started ```bash npm install npm run dev ``` Open http://localhost:3000. To return to the exact design state, use **Settings → Data → Reset demo data** (or clear site data). ## What works - **Calendar** — week / day / month views; drag on empty space to create, drag