The canvas is the brand.
Tangram is a React 19 admin template built out of flat bento tiles on a deep green canvas. No borders, no shadows, no hairlines — depth is color blocks and 2px ink lines. Eighty-four routes, one coherent demo world, and a design system you can actually read.
React 19 · TypeScript · Vite · Tailwind CSS v4 · one framework, no bundle of eight.
Every one is a real page with real data from the same shop. There is no “coming soon” screen behind a nav item.
Green, cocoa, navy, plum and a bone-on-bone calm mode.
The components documented in the product itself — buttons, tiles, charts, motion — so the kit can never drift from what ships.
Shipping queue, customer inbox, social planner, media library, team inbox, chat, calendar and notes.
And zero shadows. The whole product is color blocks.
- Dark theme, system-aware
- Comfortable and compact density
- Right-to-left, by logical properties
The whole thing, running.
These are captures of the pages in the download, not mockups. Switch a tab, then open the same page in the demo and compare.
Captured at 1440 × 900 in the default green scheme, light mode.
Open this pageA scheme is a whole palette, not a background.
Pick one and this page changes with it — the header, the tiles, the numerals, the
signal colors, all of it. So does the demo, because both read the same
tg: keys. The hero tile is butter on green, honey on cocoa, gold on navy
and amber on plum, each stated at green's own lightness and chroma, so “hero”, “good”
and “urgent” read at exactly the same strength whichever scheme is on.
Dark mode keeps the canvas.
It is not an inversion. The canvas color stays exactly where it is and the tiles turn ink with bone text, so the product still reads as itself at night. Every role is re-stated for dark by hand and checked against AA — including the chart marks, which swap to the light tints because an ink tile makes them the brighter mark.
Six axes, one attribute each.
Mode, scheme, density, island, direction and motion. Each is a
data-tg-* attribute on <html>, remembered per
browser and restored before the first paint by a script that runs ahead of the
stylesheet — so there is no flash of the wrong theme, ever. Bake a different
default in by editing one line of index.html.
React 19, all the way down.
One framework, one project, one npm install. Not an HTML template with
React bolted on, and not a bundle of eight editions you will use one of.
Typed, and it stays typed.
TypeScript in strict mode with no any in the source, type-aware ESLint,
Stylelint over the CSS, and a build that type-checks before it bundles. The ship
gate is one command: npm run check.
One manifest drives the app.
nav-manifest.json owns the routes. The island, the breadcrumbs, the
command palette and the router all read it, and a checked-in script fails the build
if a page file has no slug or a slug has no page. Add a route by adding a file.
No literal colors in components.
Tokens layer from raw ramps to semantic roles to surface recipes, and a check script
fails on a literal color, radius or shadow anywhere in src/. Retune the
product by editing values in one folder.
Charts that draw themselves.
ApexCharts behind one lazy loader, so no chart code is in the first bundle, plus an
in-house SVG set for the signature bars, rings and sparklines. Every series reads a
--tg-chart-* token, so charts re-color with the scheme live.
Motion is part of the product.
Tiles rise on a 50ms stagger, bars grow, lines draw, rings sweep and numerals count
up once. Sticky chrome never animates in, tiles never scale under the cursor, and a
check script enforces both. All of it respects
prefers-reduced-motion and the motion axis.
Contrast is documented, not hoped for.
Every role pair that ships has a measured ratio in the design-system doc, in both themes and all five schemes. Keyboard-operable navigation, a visible focus ring that changes color with the surface it lands on, and an axe pass over every route.
One shop, eighty-four screens.
Tangram is not a bag of sample dashboards from eight unrelated industries. Every page belongs to the same small homewares brand, so a figure on the home tile is the same figure on the order it came from — which is what makes the demo worth clicking through, and what makes the pages worth keeping when you build on them.
What you actually get.
- template/ — the whole React project: source, public assets, Vite and TypeScript configs, ESLint, Stylelint, Prettier and a pinned lockfile
- Documentation/ — the manual you can read right now at /docs, one self-contained file that works offline out of the zip
- All 84 routes, both themes, five schemes, both densities, RTL and the live customizer — nothing is held back for a “pro” version
- The design system and component contracts as written documents, not just as code
- Free updates and support under the standard Envato license
Nothing you cannot ship.
No stock photography and no paid assets are bundled. Icons are Tabler (MIT), fonts are Google Fonts (OFL) and every illustration, avatar and the mark itself are original SVGs made for this template. The runtime libraries — React, React Router, Tailwind CSS, ApexCharts, Leaflet, Floating UI — are all MIT and installed from npm.
Every license is listed in the Credits section of the manual.
Before you buy.
Stop shipping the same indigo dashboard.
The marketplace has a default look and this is not it. Click through the demo first — it is the whole product, not a teaser.