A project management and CRM admin dashboard delivered as two complete apps, one in Vue 3 and one in React 19. Both share a single design system, so they look the same down to the pixel. Pick the framework your team uses, or keep both.

The design is flat and calm: no borders, no box shadows, just warm off-white surfaces, one yellow accent and a palette of lilac, mint, coral and sky. Colorful geometric shapes (circles, halves, leaves, rings) give the interface its personality. Headings use Bricolage Grotesque, interface text uses Inter.

What sets it apart

• Vue and React, same result. Every page, component, interaction and state exists in both apps with the same names and props. We compared the two apps screen by screen: 14 pages in light, dark and mobile, plus 24 interactive states, render identically.
• A design system in plain CSS. All styles live in one shared folder of readable CSS with design tokens (custom properties). There is no utility framework or CSS-in-JS to learn. Change the accent in one line and both apps follow.
• Built for real work. Drag-and-drop pipeline and kanban, a contacts table with sorting, filters, pagination, bulk actions and CSV export, a calendar, a global ⌘K search, modals, menus and toasts. All of it is interactive in the demo.

Pages

Features

• Light and dark mode: light by default, dark mode from the top bar, remembered between visits. Panels and menus stay light in light mode and dark in dark mode.
• Runtime accent color: users can pick one of five accents in Settings, applied instantly.
• Dependency-free SVG charts: bar, donut and sparkline charts with tooltips. Their geometry is shared by both apps.
• Global search palette (⌘K / Ctrl K) across pages, contacts, deals and projects.
• Responsive: off-canvas navigation and single-column layouts from 390 px phones to large screens.
• Accessibility practices: landmarks, skip link, visible focus, focus management in modals, labeled controls, WCAG AA text contrast in both themes. Every page passes an automated axe-core check (WCAG 2 A/AA). Drag and drop needs a mouse or touch, but keyboard users can change statuses from the edit dialogs and the list view.
• No external requests: fonts and icons are bundled. There is no CDN, analytics or tracking.

Technical details

• Vue 3.5, Vue Router 5, React 19, React Router 8, TypeScript 5.9, Vite 8
• Lucide icons, self-hosted Inter and Bricolage Grotesque fonts
• npm workspaces: one npm install for both apps, a typed build for each
• Full HTML documentation: installation, file structure, customization, rebranding (name and logo), components, charts, connecting your API, deployment, accessibility, third-party licenses