Déjà View

You have seen this dashboard before.

That is the point. Flat cards, thin borders, and a full set of components already wired into a working fintech dashboard. Open any piece and you know how it works, because you have built it before too.

Open the dashboard Browse the components

MIT licensed. Nothing to install. Copy the files you want.

Primitives

Pages, wired

Chart types

Extra deps to copy one

Those four tiles are ui/stat-tile.tsx, and the shapes inside them are charts/sparkline.tsx. Nothing on this page is a screenshot.

The loop

Every project started the same way.

New client, new repo
Feb 5, 2024, 12:00 PM
Day one goes to the sidebar. Day two, the table.
Another dashboard
Jun 11, 2024, 12:00 PM
Same sidebar, same table, same modal that has to trap focus. Written from scratch, again.
I tried copying from the last one
Oct 2, 2024, 12:00 PM
Half of it came with a store, a provider and three imports I did not want.
Built it properly, once
Jan 20, 2025, 12:00 PM
Every piece standing on its own. This is that build.

That timeline is ui/timeline.tsx, the same component the payments page uses to show a charge going through.

The name

Why Déjà View.

Déjà vu, except it was always a view

Déjà vu is the feeling you have already lived this moment. That was every blank folder I opened. Same sidebar, same table, same modal, same nagging sense I had done all of this before. It was never déjà vu. It was always a view.

And the people using your app get it too

That is the good half. Copy a piece of this into your project and someone opens the table already knowing how it sorts, opens the modal already knowing how to close it. Familiar is the whole product.

Proof

This page is built from the thing it is selling.

Everything you have scrolled past is a component

The tiles, the small charts, the timeline, the badges, the buttons, and the table below. This banner is ui/banner.tsx.

	File	What you get
DataTable	`ui/table.tsx`	Sorting, row selection, per column responsive rules	This table
Timeline	`ui/timeline.tsx`	The story above is this component, fed four events	Used above
StatTile	`ui/stat-tile.tsx`	A number, a change badge and room for a small chart	Used above
Sparkline	`charts/sparkline.tsx`	Reads the theme colours, so it never needs a colour prop	Used above
Modal	`ui/modal.tsx`	Portalled, focus trapped, returns focus where it found it	On the components page
CustomSelect	`ui/custom-select.tsx`	Keyboard driven, positions itself, never clips	On the components page

And that is ui/table.tsx, listing components, including itself. Sort it, shrink the window, watch the middle column drop out.

How you use it

Copying a piece takes about a minute.

Take the colours, once

Copy two blocks out of globals.css. That is what makes bg-surface and text-ink mean something in your project.

Take cn

One file, about 40 lines, no dependencies. No clsx, no tailwind-merge.

Copy the file you want

Then follow its imports. They are only ever cn, lucide-react, another ui file, or a type you can swap for your own.

The components page names the file under every single demo, so you always know which one to copy.

What is inside

A dashboard you can actually run.

A real app, not a mood board

Overview, balances, payments, invoices, customers, products, subscriptions, developers, team and settings, all reading through one query layer.

Every piece detaches

Buttons, inputs, custom selects, tables, modals, drawers and charts, each in its own file with nothing to wire up first.

Dark mode is one file

Every colour is a CSS variable. Change two blocks and the whole thing follows, charts included.

Browse the components Read the source