Spireflow is a free, open-source dashboard starter designed for building modern SaaS products, internal tools and data-rich admin panels. It provides the UI components, pages and patterns you need to create a complete dashboard application - available out of the box.

It will give you a solid head start and save weeks of development time by serving as a practical foundation that you can easily extend and adapt to your specific needs. The project runs as a standalone frontend by default, ready to be integrated with your own API or an optional Spireflow backend that enables a production-ready authentication flow.

React 19, Next.js 16, TypeScript, Tailwind 4, Shadcn UI, Zustand, Apollo Client, Recharts, Better-Auth, Vitest

• 90+ reusable components - Built on Shadcn UI and Radix primitives
• 60+ chart variations - Powered by Recharts library
• Authentication - Better-Auth with login and registration flow + Yup validation
• i18n - Multi-language support via next-intl
• Advanced Tables - Filtering, sorting, search and pagination, via TanStack Table v8
• Calendar - Move, add and delete events with FullCalendar.io
• Product gallery - Lightbox popup and PDF export
• World map - Interactive map with tooltips, powered by react-simple-maps
• Themes - Dark/light mode via next-themes library and CSS variables
• Testing - Unit tests written using Vitest + React Testing Library
• CI Pipeline - Automated linting, type checking and testing via GitHub Actions
• Accessibility - Seamless keyboard navigation, clear focus indicators and ARIA support
• Code quality - Prettier (formatter), Eslint (linter) and Husky (pre-commit hooks)

You can get started with Spireflow by cloning the repository:

git clone https://github.com/spireflow/spireflow.git
cd spireflow
npm install
npm run dev

🎉 That's it! Navigate to http://localhost:3000 to explore the dashboard.

Spireflow starter is designed to work as a standalone front-end application by default. It loads mock data from public/backendBackup.json and has routes protection disabled.

Optionally, it can be connected to an associated Node.js backend, which enables authentication and fetching real data on each request. See Configuration section below for more details.

• Storybook
• Authentication docs
• Node.js backend

• Live demo
• Repository

├── src
│   ├── app                       # Next.js pages (App Router)
│   │   ├── [locale]              # Dynamic locale folder for i18n
│   │   │   ├── (auth)            # Auth & error pages
│   │   │   └── (protected)       # Protected pages (require auth)
│   │   └── api                   # API routes
│   ├── assets                    # Static assets
│   │   ├── icons                 # Icon components
│   │   └── images                # Image files
│   ├── components                # Main components folder
│   │   ├── auth                  # Authentication related components
│   │   ├── common                # Reusable components
│   │   ├── layout                # Layout components
│   │   └── views                 # Page-specific components
│   ├── hooks                     # Custom reusable hooks
│   │   └── auth                  # Authentication hooks
│   ├── i18n                      # Internationalization config
│   ├── queries                   # GraphQL queries
│   ├── services                  # Services utils
│   ├── store                     # Zustand stores
│   ├── styles                    # Themes and global styles
│   │   ├── themes                # Colors for themes
│   │   └── overrides             # Style overrides
│   ├── tests                     # Test files
│   │   ├── config                # Test configuration
│   │   ├── unit                  # Unit tests
│   │   └── utils                 # Test utilities
│   ├── utils                     # Utility functions
│   └── proxy.ts                  # Next.js proxy configuration
└── package.json                  # Project dependencies and scripts

Want to use real backend and authentication? Follow these steps:

Clone and run the Spireflow Backend

Follow the instructions in the backend README to initialize and seed the database. The backend will run on http://localhost:4000 by default.

Create a .env file in your project root:

# Backend GraphQL API
GRAPHQL_URL=http://localhost:4000/graphql

# Better Auth Configuration
NEXT_PUBLIC_AUTH_URL=http://localhost:4000/api/auth

npm run dev

That's it! The dashboard will automatically:

• ✅ Connect to your backend for real data
• ✅ Enable route protection
• ✅ Allow user registration and login

The application automatically detects your configuration:

Standalone mode (no env vars)

• Uses mock data from backendBackup.json, all routes accessible without login
• npm run build pre-renders pages as static HTML, npm start serves them instantly

Backend online (env vars set, backend running)

• Fetches real data from GraphQL backend, route protection is enabled
• npm run build and npm start treat pages as dynamic, fetching fresh data on each request

Backend offline (env vars set, backend unreachable)

• Route protection enabled, but login is not possible while the backend is down
• Same build and runtime behavior as Backend online mode, but pages will fail to load data

Note: npm run dev always tries to render pages dynamically regardless of the configuration

If you use npm start (production mode), please remember that npm run build must be run after configuring environment variables for changes to take effect. This is not needed when using npm run dev.

For remote hosting, you can easily deploy your own instance of Spireflow dashboard on Vercel using the link below.

• Seamless keyboard navigation with Tab and arrow buttons across all interactive elements
• Visible focus indicators (focus-visible) with single CSS variable for consistent outline color
• ARIA attributes wherever needed across components
• UI components are built on top of Radix UI primitives which provide core accessibility support
• Tested with Storybook a11y addon and Chrome Lighthouse (95+)

Desktop-only shortcuts (active above 1280px). Disabled when focus is inside a text input (except Ctrl+K).

On macOS use Cmd instead of Ctrl.

Check out CONTRIBUTING.md to learn how to get started with contributions.

All forms of project support are valued and appreciated, including code contributions, issue reporting, and sponsorship through GitHub Sponsors or Buy Me A Coffee service.

This project is open source and available under the MIT License. Feel free to use it to build any personal or commercial applications (SaaS, internal tools etc.). Although the license allows redistribution, I would greatly appreciate it if you did not repackage or resell this project as a standalone UI kit or a template.

Subscribe to the Spireflow newsletter to get notified about major updates and new features.

Made with ♥ by matt765