Built with VivekUI
This entire website is built with VivekUI, a free React component library with zero runtime dependencies.
Not a wrapper around Tailwind, not a copy-paste kit you now maintain, and not a chart library in a trench coat. One install, one CSS import, no config file — and 47 of its exports plus all 6 of its charts are on the pages you just clicked through.
npm i @the_viveksingh/vivek-uiNo chart library is installed
Every chart on this site renders from @the_viveksingh/vivek-ui — no chart library installed.
There is no Recharts, no Chart.js and no D3 in package.json. All six charts are pure SVG with no measurement step, which is why they render on the server: view source on the dashboard and the paths are already there. Each one also ships a visually hidden data table, so a screen reader gets the numbers rather than the word “graphic”, and series are told apart by dash pattern and marker shape as well as colour.
Hero panel · Dashboard revenue · Reports
Dashboard signups by channel · Reports feature adoption
Dashboard retention cohorts · Reports volume by week
Dashboard plan mix (donut) · Reports traffic sources
Dashboard quarterly goals
Hero KPI strip · all four dashboard KPI cards
Section by section
Every component this template imports, what it draws, and a link straight to its documentation.
| Component | Where it appears on this site | Docs |
|---|---|---|
| AreaChart chart | Hero panel · Dashboard revenue · Reports | Docs for AreaChart |
| BarChart chart | Dashboard signups by channel · Reports feature adoption | Docs for BarChart |
| LineChart chart | Dashboard retention cohorts · Reports volume by week | Docs for LineChart |
| PieChart chart | Dashboard plan mix (donut) · Reports traffic sources | Docs for PieChart |
| ProgressRing chart | Dashboard quarterly goals | Docs for ProgressRing |
| Sparkline chart | Hero KPI strip · all four dashboard KPI cards | Docs for Sparkline |
| Hero | Homepage hero, with the live chart panel in its media slot | Docs for Hero |
| LogoCloud | Homepage customer logos | Docs for LogoCloud |
| FeatureGrid | Homepage six features | Docs for FeatureGrid |
| Stats | Homepage by-the-numbers band | Docs for Stats |
| Testimonials | Homepage customer quotes | Docs for Testimonials |
| Pricing | Homepage preview · /pricing plan grid | Docs for Pricing |
| FAQ | Homepage and /pricing — also the FAQPage schema source | Docs for FAQ |
| CTA | Homepage closing ask | Docs for CTA |
| Newsletter | Homepage changelog signup | Docs for Newsletter |
| Footer | Every marketing page | Docs for Footer |
| Navbar | Every marketing page, with the collapse sheet | Docs for Navbar |
| Section | Page bands on /pricing and /built-with | Docs for Section |
| Sidebar | Dashboard rail and mobile drawer | Docs for Sidebar |
| CommandPalette | Dashboard topbar, ⌘K | Docs for CommandPalette |
| DataTable | /dashboard/customers — sort, search, paginate, select | Docs for DataTable |
| KanbanBoard | /dashboard/roadmap, with a keyboard move path | Docs for KanbanBoard |
| DatePicker | /dashboard/reports range, two fields | Docs for DatePicker |
| Timeline | Dashboard recent activity | Docs for Timeline |
| RelativeTime | Timestamps in the activity feed | Docs for RelativeTime |
| Drawer | Dashboard navigation below 960px | Docs for Drawer |
| DropdownMenu | Account menu · customer row actions | Docs for DropdownMenu |
| Toast | Export, row actions and WIP-limit warnings | Docs for Toast |
| EmptyState | Customers table, filtered-out view | Docs for EmptyState |
| Skeleton | Dashboard loading state | Docs for Skeleton |
| Table | /pricing comparison · this component map | Docs for Table |
| Field | Labels the two report date inputs | Docs for Field |
| Input | The customers search field — rendered by DataTable | Docs for Input |
| Checkbox | Row selection in the customers table — rendered by DataTable | Docs for Checkbox |
| Button | Every call to action, via asChild for links | Docs for Button |
| IconButton | Mobile nav trigger · table toolbar | Docs for IconButton |
| Badge | Navbar credit · statuses · plan tags | Docs for Badge |
| Card | Every KPI and chart panel | Docs for Card |
| Avatar | Account menu · customer rows · testimonials | Docs for Avatar |
| Heading | Dashboard page and card titles | Docs for Heading |
| Text | Body copy throughout | Docs for Text |
| Code | The install command, in the footer and here | Docs for Code |
| CopyButton | Beside every install command | Docs for CopyButton |
| Kbd | ⌘K hint and the palette footer legend | Docs for Kbd |
| Divider | Sidebar section rules | Docs for Divider |
| Switch | /pricing monthly-yearly toggle | Docs for Switch |
| Stack | Vertical rhythm on /built-with and the KPI cards | Docs for Stack |
| Flex | Horizontal rows — toolbars, figure-plus-delta, the pricing switch | Docs for Flex |
| Grid | The /built-with promo tiles | Docs for Grid |
| Container | Width cap inside Navbar and every Section | Docs for Container |
| AnimatedCounter | Homepage stats, counting up on scroll | Docs for AnimatedCounter |
| ThemeProvider | Root layout, plus the anti-flash themeScript | Docs for ThemeProvider |
| ThemeToggle | Marketing navbar and dashboard topbar | Docs for ThemeToggle |
What this template does not contain
No Tailwind, no PostCSS plugin
The styling is one imported stylesheet plus this project’s own globals.css. Every library selector is wrapped in :where(), so a single flat class of yours wins with no !important anywhere.
No chart library
Six chart types, all SVG, all from the same package as the buttons. That is roughly 100 kB of Recharts not shipped.
No runtime dependencies
The UI package pulls in nothing at runtime — no clsx, no CVA, no Radix, no Emotion. Check package.json; it is next, react and react-dom.
No provider you must remember
ThemeProvider is here because this site has a theme toggle. Every component works without it.
Take it from here
MIT licensed, credit removable, star appreciated.