Helios — Analytics Dashboard

Helios is a product analytics interface built for real data volumes. Charts share one colour system, tables paginate on the server, and every widget has a keyboard-accessible tooltip plus a table fallback for screen readers.

What makes it different

• Accessible data charts — Colour-blind-safe palettes, keyboard-navigable tooltips and a data table fallback for every chart.
• Server-side data tables — Sorting, filtering, pagination and CSV export handled on the server, so a hundred thousand rows stay instant.
• Accessible components — Keyboard navigation, focus rings, ARIA labels and WCAG AA contrast verified on every interactive element.
• Token-based theming — Every colour, radius and shadow is a CSS variable. Rebrand the whole product by editing one file.
• Server components by default — Data fetching happens on the server, so pages ship almost no JavaScript and stay fast on mid-range phones.
• Every breakpoint designed — Not just fluid — mobile, tablet and desktop each get a layout that was actually laid out on purpose.

Who it's for

Teams building an analytics product, an internal BI tool, or any interface where the data matters more than the decoration.

Built with

Next.js 16 · React 19 · TypeScript · Tailwind CSS v4 · Recharts · TanStack Table · Prisma

In the download

• Full Next.js source code (TypeScript)
• Figma design file
• Tailwind CSS design tokens
• Written documentation
• One-click deploy config

Updates and support

Framework upgrades and bug fixes are free for as long as this product exists. Support is included for 6 months with a Regular license and 12 months with an Extended one, and can be extended at any time.