PrequelUI
Freeforever, MIT licence
Animated blocks you add to your own dashboard.
- Area chart, KPI counter, data table, live feed
- More blocks on the way
- No account, no email
- Light and dark, from your theme
- You own and edit all the code
PrequelUI is an open source project built on shadcn/ui
Every dashboard starts with a prequel.
Animated dashboard blocks for shadcn/ui, React and Tailwind CSS. Numbers roll, charts draw, lists update live, and it all installs with one command.
Complete dashboards, every page included
Origin is the first one: overview, revenue, customers, plans, invoices and settings, with search, notifications and export that really work. Pick a colour, plug in your data, ship.
Free blocks that move
Every piece of Origin, on its own, MIT licensed and installed with one shadcn command. Each one animates with intent: numbers roll, lines draw, rows slide in.
Add a block in seconds
One command copies a block into your project. No package to keep up to date: the code is yours from the first second.
npx shadcn@latest add https://prequelui.terravidhal.me/r/area-chart.json
Set up shadcn
Already using shadcn/ui? Skip this. Otherwise run
npx shadcn@latest initonce.Add a block
Pick a block above and run the command. It works in Next.js and any React app with shadcn/ui.
Make it yours
The block lands in your
componentsfolder. Change the data, the colours, the motion. You own it.
Every story has a prequel
Before a dashboard there is a sketch, and before the sketch a place that stayed with you. PrequelUI is the part that comes before: the blocks you start from, so the story you ship is your own. Hover a place to bring its colour back.
Turquoise shallowsCancún, Mexico 
A sea of poppiesEarly summer 
Emerald terracesBali, Indonesia 
Rows of lavenderProvence, France 
Golden canopyVermont, USA 
Jade lagoonBora Bora, French Polynesia 
Tulip ribbonsNetherlands 
Northern lightsNorway 
Painted ridgesVinicunca, Peru 
Falls in the mistIguazú Falls 
Cherry blossomEarly spring 
The pink lakeLac Rose, Senegal
Photographs from Pixabay.
Free blocks. Pro when you need more.
PrequelUI is free and stays free. PrequelUI Pro is a separate product, on its own site, for teams who want whole dashboards.
PrequelUI Pro
Proprice announced at launch
Complete dashboards, every page and every state.
- Loading, empty and error states
- Notifications and a Cmd+K menu
- Export and colour themes
- Origin is live, four more on the way
- Its own site, its own updates
Questions, answered
Something missing? Ask on GitHub.
Is PrequelUI really free?
Yes. It is open source under the MIT licence and free forever. No account, no email, no trial.
What do I need before installing?
A React project with shadcn/ui set up. If you do not have it yet, run npx shadcn@latest init first.
Does it only work with Next.js?
No. It works in Next.js and in any React app that uses shadcn/ui.
Can I edit the code?
Yes. The command copies the code into your components folder. You own it and can change everything.
How do dark mode and colours work?
Blocks read your shadcn theme tokens, so light mode, dark mode and your colours apply without extra setup.
What about accessibility and motion?
Every animation respects the reduced-motion setting of the system: people who prefer less motion get calm, still blocks.
What is the difference with Pro?
PrequelUI gives you single blocks. PrequelUI Pro is a separate, paid product with complete dashboards, notifications, a command menu, export and colour themes.
How do I report a bug or contribute?
Open an issue or a pull request on GitHub. PrequelUI is made by one independent developer, and help is welcome.
Origin is live, four more are on the way
Ship a dashboard that feels alive
The blocks are free. Pro adds complete dashboards like Origin, every page and every state included, and each new one as it ships.