Orchid - React, Vue.js, Nuxt, Next.js, HTML & Laravel Admin Dashboard Template - 1

Orchid is a modern, production-ready admin dashboard template shipped in six parallel technology builds — pure HTML, React 18, Vue 3, Next.js 15 (App Router), Nuxt 3, and Laravel 11 — all sharing one carefully-designed visual system and one shared JSON mock database. Every purchase includes the complete source code for all six stacks in a single download — pick the one your team already ships in, or ship the same admin experience across multiple products without redesigning anything. Every build contains 140 fully-designed pages, 8 unique dashboards, 50+ ready-to-use UI components, and first-class dark mode across every single page. Whether you are building a SaaS admin panel, an internal business tool, a CRM, an HR portal, an e-commerce back office, a project management app, a financial reporting suite, or any custom management dashboard — Orchid gives you a beautiful, cohesive, accessible starting point in the stack you already work in.

Unlike templates that ship as static mockups, every button, dropdown, modal, offcanvas, wizard, calendar view, drag-drop kanban, date picker, color picker, data table, and toast notification in Orchid is fully functional out of the box using sample data. Forms validate with proper success and error states. Tables sort, filter, paginate, and bulk-export CSV. Charts recolor themselves when you toggle dark mode. Sidebars collapse into off-canvas menus on mobile. Real product photos and portrait avatars are loaded from Unsplash and pravatar with automatic 404 fallback so cards never look broken. It is, quite literally, a template you can ship to production the day you buy it — in whichever framework matches your team.

Six stacks. One design. One mock database.

Orchid is not just an HTML template with React components bolted on. Each build is a first-class, idiomatic implementation of the same design in that framework’s native conventions:

HTML — 141 static .html pages, vanilla ES6 JavaScript, external CSS, Chart.js via CDN. Zero build step; open index.html in a browser and everything works. Perfect for teams that want to embed the pages directly, port them into their existing stack, or ship a marketing-oriented static admin.
React — Vite 5 + React 18 + React Router 6 SPA. Every page is a JSX component under src/pages/, three layout wrappers (MainLayout, AuthLayout, BlankLayout), a converter script that regenerates all 140 pages from the HTML source in seconds, and a JSON mock database with a useApi() hook.
Vue — Vite 5 + Vue 3.5 (Composition API + <script setup>) + Vue Router 4. Single-File Components with the same layouts and same mock API as React, exposed as a useApi() composable returning reactive refs.
Next.js 15 — App Router build with route groups (main), (auth), (blank) for layouts. Every page is a Client Component with 'use client', uses next/link and usePathname(), and builds to a fully static out/ folder via output: 'export' — no Node.js server required.
Nuxt 3 — File-based routing under pages/, three named layouts, auto-imported composables and utilities. nuxi generate produces a fully static SPA (ssr: false) that can be dropped into any web root or subdirectory.
Laravel 11 — PHP 8.2 backend with Blade templates. Sidebar navigation lives in a single config/nav.php array, one PageController resolves any slug to a Blade view under resources/views/pages/, and routes/pages.php is auto-generated with a named route per slug. The mock API JSON is served as static files from public/api/.

Every stack reads from the same 26 mock-API endpoints at /api/*.json (contacts, leads, companies, users, employees, products, orders, teams, meetings, calendar events, and more) so the sample data you see is identical across all six builds. When you’re ready to point the app at a real backend, you change one BASE constant in api/client.js — or on the Laravel side, replace the JSON URLs with controller routes that return Eloquent models.

Complete feature set

Eight fully unique dashboards

Orchid ships with eight distinct dashboards, each purpose-built for its use case with completely different KPI card treatments, chart selections, widget arrangements, and color palettes. The Default dashboard gives a general business overview with KPIs, revenue chart, sales pipeline, upcoming meetings, customer table, and task updates. The Analytics dashboard uses an editorial dark-hero console with luminous KPIs, session heartbeat, traffic overview area chart, traffic sources stacked bar, audience-by-country list, top landing pages with data-bar row backgrounds, campaign performance receipts, and activity timeline. The CRM dashboard is funnel-forward with a CSS-drawn horizontal sales funnel, medaled sales leaderboard, mini five-column pipeline, follow-ups feed with method icons, and lead conversion multi-line chart. The Sales dashboard features a semi-circular target gauge, split KPI cards with mini charts, regional sales grid with sparklines, top products with medal-colored rank chips, and recent orders table. The Finance dashboard is CFO-grade with dark-topped KPI cards, tabular-nums, real P&L summary with accent-stripe highlight rows, income-vs-expense chart, invoice list with status filter, expense donut, budget progress with threshold-tinted bars, and transactions table. The HR dashboard is people-first with avatar-cluster KPIs, attendance stacked bar, department distribution doughnut, recruitment pipeline stage cards, payroll breakdown, birthday cards with cake glyph, and activities timeline. The Projects dashboard uses radial-ring KPIs, project status stacked bar, kanban column preview, deadlines with color-coded date blocks, team workload capacity bars, and activity feed. The E-Commerce dashboard ships with pastel-blob KPI cards, mixed sales trend chart, top products, inventory alerts, payment methods stacked bar, customer satisfaction with SVG star ratings, and orders table.

140 ready-made pages in every stack

Beyond the eight dashboards, Orchid includes a comprehensive set of pre-built pages for every common admin scenario — and each of them is available in all six technology builds. Business pages: Leads, Contacts, Companies, Opportunities, Deals, Sales Pipeline, Customer List, Customer Details, Customer Groups, Customer Feedback, Quotations, Orders, Invoices, Payments, Refunds, Revenue Analytics, Product List, Product Categories, Brands, Inventory, Stock Transfer, Price Management. Project management: Projects, Tasks, Teams, Calendar, Meetings. Human resources: Employees, Attendance, Leave Management, Payroll, Recruitment, Performance. Finance: Accounting, Expenses, Income, Transactions, Budgets, Financial Reports. Communication: Messages, Chat, Email, Notifications, Support Tickets. Analytics: Reports, Sales Analytics, Customer Analytics, Revenue Analytics, Marketing Analytics. User management: Users, Roles, Permissions, User Activity, Login History. Applications: File Manager, Notes, Documents, Knowledge Base, To-Do, Bookmarks. E-commerce back office: Products, Orders, Customers, Coupons, Reviews, Shipping, Taxes. Content management: Pages, Blog, Media Library, Categories, Comments, Menus. System: Settings, Integrations, Audit Logs, System Logs, Maintenance Mode. UI components showcase: Alerts, Badges, Buttons, Cards, Dropdowns, Modals, Tabs, Pagination, Progress, Toasts, Tooltips. Forms: Basic Forms, Validation, Wizard, File Upload, Rich Text Editor, Date Picker, Time Picker, Color Picker. Tables: Basic Table, Data Table, Responsive Table, Editable Table, Advanced Table. Charts: Line, Bar, Area, Pie, Donut, Radar, Polar, Mixed, Chart.js, ApexCharts. Icons: Bootstrap Icons, Font Awesome, Lucide, Remix Icons. Maps: Google Maps, Vector Maps. Authentication: Login, Register, Forgot Password, Reset Password, Lock Screen, Two-Factor Authentication. Extra pages: Profile, Account Settings, Pricing, FAQ, Help Center, Timeline, Invoice, Coming Soon, Maintenance, 404, 500.

JSON mock database + API client — shared across every stack

Orchid ships with 26 pre-built API endpoints served as static JSON files under public/api/ — contacts, leads, companies, users, employees, leave-requests, sales-customers, sales-products, salespeople, finance-clients, accounts, chart-of-accounts, budget-categories, products, brands, categories, warehouses, shop-products, shop-customers, shop-orders, comms-users, conversations, chat-list, teams, meetings, calendar-events. React and Vue expose a useApi() hook / composable that fetches with loading + error state; Next.js and Nuxt use the same pattern; Laravel serves them as static files but two clear paths are documented for swapping in real Eloquent-backed controller routes. The mock JSON is byte-identical across all six builds so datasets stay in sync during evaluation and development.

First-class dark mode

Every single page, every chart, every form, every table, every dropdown, every modal, every toast, every card — the entire template is meticulously dark-mode tuned with proper contrast ratios, adjusted shadow depths, and color-scheme-aware borders. One click on the theme toggle in the header flips the whole application. The user preference is persisted in localStorage and respects the operating system’s prefers-color-scheme setting on first visit. Chart.js instances are destroyed and rebuilt on theme change so grid lines, tick labels, tooltip backgrounds, and gradients all recolor cleanly rather than stuttering between themes.

Real business data, not lorem ipsum

Every sample list uses realistic business content: real customer names (Priya Menon, Marcus Chen, Sofia García, Yuki Tanaka, Ananya Rao, David Okafor, Isabella Rossi), real company names (Vertex Robotics, Meridian Health, Aurora Labs, Northwind Analytics, Titan Media, Cirrus Cloud), real product names (Halo Wireless Earbuds Pro, Nomad Weekender Bag, Aurora Smart Bulb 4-Pack, Meridian Chef’s Knife), plausible dollar figures with proper tabular-nums formatting, real statuses (Fulfilled, In Transit, Processing, Cancelled), real KB article titles, real chat message contents, real email subjects, real support ticket subjects. This makes it easy to demonstrate the template to stakeholders and to see what your production data will look like.

Actual product photos and portraits

Product cards on Product List, Product Brands, Inventory, Shop Products, and Blog use real Unsplash photos keyed to a curated category-to-photo map. Contact cards, employee cards, and support agent avatars use pravatar portrait photos seeded by user ID so the same person always renders with the same face. Every image includes a defensive 404 fallback listener that swaps to a Picsum placeholder if any Unsplash asset ever becomes unavailable, so your cards never render as broken image icons even if a CDN URL changes.

Interactive data tables

Data tables in Orchid are not decorative. They include live search across all columns with debounced input, column-header sorting with visual chevron indicators and proper aria-sort announcements, per-column filter popovers (text, select, number, and date types are auto-detected from the data), column visibility toggle dropdowns, row-density selectors (compact, comfortable, spacious), row selection with a header select-all checkbox and indeterminate state, sticky bulk-action bars for Delete/Archive/Export/Change status/Change role, per-row context menus with View/Edit/Duplicate/Delete/Reset actions, client-side pagination with page-number ellipsis and per-page size selector, an empty state that appears when filters return no results, and a shimmering skeleton loading state that shows during simulated fetch delays. CSV, JSON, PDF, and Excel export actions work with real Blob downloads.

80+ Chart.js configurations

Every chart in Orchid is a real Chart.js v4 instance with theme-aware colors. The template ships with line charts, area charts (with gradient fills), bar charts (vertical, horizontal, grouped, stacked, 100% stacked, with negative values, with data labels, with gradient fills), doughnut charts (with center-label plugins, dynamic cutout, rounded caps), pie charts (with slice labels and hover offset), radar charts, polar area charts, mixed bar-plus-line charts with dual y-axes, semi-circular gauge charts, and sparklines embedded inside KPI cards, table rows, and product ranks. Advanced recipes include real-time streaming line charts, click-to-drill-down bar charts, mouse-wheel zoom, custom canvas plugins that draw overlays, cross-chart synchronized tooltips, and dynamic data source swapping with animated transitions.

Custom form widgets

Orchid ships with hand-rolled custom date pickers, time pickers, color pickers, and a rich text editor — no external libraries required. The date picker includes a month-year navigation calendar popup, disabled date support, range selection with two linked calendars, and preset ranges (Today, Last 7 days, Last 30 days, This month). The time picker includes a scrollable hour/minute column selector, a wheel-style iOS-inspired picker, a duration picker, and an analog SVG clock face. The color picker features a preset swatch grid, recent colors history, synchronized Hex/RGB/HSL inputs, opacity slider, and an EyeDropper API integration. The rich text editor uses contentEditable with a full formatting toolbar (bold, italic, underline, strikethrough, headings, lists, blockquote, code blocks, links, images), a live word-and-character count, and a preview mode toggle. Multi-step form wizards navigate cleanly between steps with per-step validation, and file upload zones support drag-and-drop with per-file progress bars, image preview, and MIME-type restrictions.

Full-featured application pages

Orchid is not just dashboards and tables — it ships with fully interactive productivity apps that could be their own product. The Email client is Gmail-inspired with a 3-column layout, folders and colored labels sidebar, message list with unread/starred/attachment states, preview pane with a reply-in-place composer, and full Compose modal. The Team chat is Slack-inspired with workspace switcher, collapsible channel and DM sections, colored per-user names, message reactions with add-remove toggle, thread reply indicators, @-mention picker autocomplete, formatting toolbar composer, and hover message actions. The File Manager supports drag-and-drop between folders, breadcrumb navigation, right-click context menu, three view modes (grid, list, details), and a storage usage bar. Notes uses a three-column layout with folder navigation, note list, and rich editor with color tints. To-Do supports drag-reorder within lists, quick-add input with hashtag and priority parsers (#tag, !p1), and a progress ring showing completion percentage. Knowledge Base has a category tree navigation, article viewer with syntax-highlighted code blocks, and an auto-generated scroll-spy table of contents. The custom Calendar supports Month, Week, and Day views with no external library dependency. Meetings groups sessions by Today/Tomorrow/This week with a LIVE badge for currently-running meetings.

Complete authentication flow

Six polished authentication pages ship out of the box in every stack, all sharing a common split-screen shell with a gradient illustration panel on the left and the form on the right. The Login page includes email and password validation, remember-me toggle, forgot-password link, social sign-in buttons (Google, GitHub, Apple), and password visibility toggle. Register adds a live password strength meter with a 4-segment color-graded indicator, confirm-password matching validation, and terms-of-service acceptance. Forgot Password submits an email and shows a success state with an animated check. Reset Password includes a strength meter and success redirect. Lock Screen shows a large avatar with the user’s initials and a password prompt. Two-Factor Authentication features six individual OTP input boxes with auto-advance on typing, backspace-to-previous, paste distribution, a 30-second resend countdown, and an option to use a backup code. In Laravel, these pages are Blade-based; in React / Vue / Next / Nuxt they use the auth layout wrapper with the appropriate router link component.

HTML → framework conversion pipeline

The React, Vue, Next.js, and Nuxt builds are not hand-ported. Each stack ships with a small Node.js converter script under scripts/convert-pages.mjs that parses every HTML page in the shared html/ folder, extracts the <main> block plus any body-level modals / offcanvas panels, transforms attributes for the target framework (class ↔ className, <a href="foo.html"> ↔ <Link to="/foo">, <router-link to="/foo">, <NuxtLink to="/foo">), captures data-* attributes from <body> / <main>, preserves inline <script> blocks as per-page files, and generates the appropriate route manifest or filesystem structure. Regenerating all 140 pages takes a few seconds. Any page you customize can be marked with an @orchid-preserve comment in its first five lines so the converter skips it.

Fully responsive with mobile off-canvas sidebar

Orchid uses Bootstrap 5.3 breakpoints throughout. On desktop (large viewports), the sidebar is fixed at 260px with a collapse-to-icon-rail option. On tablet and mobile (below 992px), the sidebar becomes an off-canvas drawer that slides in from the left with a semi-transparent backdrop. Data tables gracefully hide non-essential columns as viewport shrinks. Card grids collapse from 4 columns to 3, then 2, then 1. Toolbars use flex-wrap or flex-nowrap shrink-to-fit patterns to keep search and filters accessible on narrow screens.

Accessibility first

Semantic HTML5 throughout, proper ARIA labels on every interactive element, keyboard navigation for all controls, visible focus rings via :focus-visible, skip-to-main-content link at the top of every page, aria-current="page" on active navigation items, aria-sort announcements on sortable tables, aria-live="polite" regions on bulk-action bars so screen readers hear selection counts change, proper heading hierarchy (h1 → h2 → h3), meaningful alt text on all images, and adequate color contrast in both light and dark modes.

Deployable anywhere

Every build produces a deployment output that can be served from either a domain root or an arbitrary subdirectory with a single config change:

HTML — copy files to any static host
React — npm run build → static dist/; set base in vite.config.js to move under a subdirectory. Ships with an SPA-fallback .htaccess.
Vue — same story: npm run build → static dist/, configurable base, SPA .htaccess included.
Next.js — output: 'export' produces a fully static out/ folder; set basePath in next.config.mjs to move under a subdirectory. Trailing-slash URLs mean Apache serves them without rewrite rules.
Nuxt — nuxi generate produces a static .output/public/ folder; set app.baseURL to move under a subdirectory. SPA .htaccess included.
Laravel — standard root-domain deploy with DocumentRoot at public/. Auto-generated named routes (route('page.analytics') etc.) make link generation typo-proof. Configurations documented for Apache and nginx, plus Sail/Forge/Vapor/Docker deploys.

Modular, well-organized codebase

SCSS source is organized into abstracts/ (variables, mixins), base/ (reset, typography), layout/ (app shell, sidebar, header, main, footer), components/ (card, avatar, badge, dropdown, search, table, timeline, pipeline, tasks, meetings, charts, upgrade card, theme toggle, utilities), and themes/ (light, dark). Per-page CSS lives in assets/css/pages/. Per-page JavaScript lives in assets/js/pages/. Shared core scripts (theme toggle, sidebar behavior, chart palette, orchid utilities) are in assets/js/. Namespaced class prefixes prevent styles from leaking between pages: .analytics-*, .crm-*, .sales-*, .finance-*, .hr-*, .projects-*, .shop-*, and so on.

Perfect for

Orchid is designed for teams building SaaS applications, internal business tools, customer relationship management systems, human resources platforms, financial dashboards, project management tools, e-commerce back offices, content management systems, learning management systems, healthcare admin panels, real estate portals, logistics dashboards, marketing analytics tools, sales pipelines, help desk software, invoice management systems, inventory management platforms, booking systems, POS admin panels, and any web-based back-office application that needs a professional, cohesive, immediately-productive starting point — in HTML, React, Vue, Next.js, Nuxt, or Laravel.

What you get with your purchase

All 141 HTML pages (vanilla HTML/CSS/ES6, production-ready)
Full React 18 build (Vite 5 + React Router 6, 140 JSX pages, three layouts, useApi() hook)
Full Vue 3 build (Vite 5 + Vue Router 4, 140 SFC pages, three layouts, useApi() composable)
Full Next.js 15 build (App Router, route groups, static export, 140 client pages)
Full Nuxt 3 build (file-based routing, three named layouts, static generate, 140 pages)
Full Laravel 11 build (Blade templates, PageController, auto-generated named routes, config-driven sidebar)
26 shared mock-API JSON endpoints (contacts, leads, companies, users, employees, products, orders, teams, meetings, calendar events, and more)
HTML → framework converter scripts (regenerate React / Vue / Next / Nuxt / Laravel pages from HTML in seconds)
Complete SCSS source with modular architecture
All compiled CSS and page-specific JavaScript modules
80+ Chart.js configurations and sample data
Per-stack documentation.html with install, run, layouts, routing, API, gotchas, and deploy guides
Screenshot library (light and dark modes)
Puppeteer screenshot generation script for updating screenshots after customization
Lifetime free updates
Priority customer support

Technical requirements

HTML build: any modern browser (Chrome, Edge, Firefox, Safari, latest two major versions). No server, no database, no backend required — pure front-end template that runs from any static host including GitHub Pages, Netlify, Vercel, Cloudflare Pages, S3, or a plain nginx/Apache install.

React, Vue, Next.js, Nuxt builds: Node.js 18 or newer, npm 9+ (or pnpm / yarn / bun). Vite is used as the dev server and bundler for React and Vue; Next.js and Nuxt bring their own toolchains. All builds compile to fully static output — no Node.js required in production.

Laravel build: PHP 8.2 or newer, Composer 2.x, standard PHP extensions (ctype, curl, dom, fileinfo, filter, hash, mbstring, openssl, pcre, PDO, session, tokenizer, xml). Runs on any Apache or nginx host with PHP-FPM, on Laravel Sail (Docker), on Laravel Forge, Vapor, Ploi, DigitalOcean App Platform, Railway, Render, or shared hosting with PHP 8.2+.

All six builds share the same mock JSON database, the same design tokens, the same page slugs, and the same asset library, so switching between stacks is as easy as changing folders.