Built with VivekUI
This entire website is built with VivekUI, a free React component library with zero runtime dependencies.
No Tailwind, no shadcn, no MUI, no config file. Ninety-one components and six SVG charts arrive from one package, and the only styling this template writes itself is a stylesheet that re-points a few custom properties for the blue accent and the two typefaces.
npm i @the_viveksingh/vivek-uigit clone https://github.com/intellectwithvivek/theledger.gitRepository: intellectwithvivek/theledger · MIT licensed · credit removable
Section by section
Every row is a live part of this site. Follow a component name to its documentation page, which carries a rendered example, the code in TypeScript and JavaScript, and a props table generated from the package’s own type declarations.
| Section | Component | What it handles |
|---|---|---|
| Sticky top bar | Navbar | Brand, links, actions and the mobile sheet, with the toggle wired to aria-controls. |
| Search (⌘K) | CommandPalette | Full combobox/listbox ARIA model over all twelve articles, four desks and this page. |
| Light / dark switch | ThemeToggle | Three states, named for the action rather than the current theme. |
| Theme persistence | ThemeProvider | Plus the exported themeScript, inlined in head so there is no flash of the wrong theme. |
| Breaking ticker | Marquee | Zero JavaScript. Stops on hover, on focus within, and entirely under reduced motion. |
| Desk labels | Badge | Soft and solid variants mark the desk on every card and headline. |
| Bylines | Avatar | Author portraits, with initials as the fallback when an image fails. |
| Timestamps | RelativeTime | Renders the absolute date on the server and switches to "3 days ago" after mount. |
| Article listings | Card | The eight-card Latest grid, the desk strips and the Read next rail. |
| Most read — 7-day trend | Sparkline | One per entry. Pure SVG, no client boundary, with a visually hidden data table. |
| Desk tabs | Tabs | Manual activation, so arrowing across the desks does not swap the panel four times. |
| Subscribe band | Newsletter | A real label, a promise-driven busy state, and the result announced politely. |
| Reading progress | Progress | Pinned to the top of the viewport, driven by a passive rAF-throttled scroll listener. |
| Trail on every article | Breadcrumb | Matched by BreadcrumbList structured data emitted from the same array. |
| Article body | Prose | Headings, pull quotes, figures, code and charts — all server rendered. |
| Data story — developers over time | LineChart | Two series, told apart by colour, dash pattern and marker shape. |
| Data story — frameworks by usage | BarChart | Value axis always includes zero. Values printed at the end of each bar. |
| Code samples in copy | Code | Inline spans and fenced blocks inside the reading column. |
| Share row | CopyButton | Clipboard with a legacy fallback, a visible error state and a polite announcement. |
| Share intents | ButtonGroup | X and LinkedIn as real anchors, so cmd-click and "copy link address" both work. |
| Toasts on copy and subscribe | Toast | Two live regions mounted empty with the provider, so the first message is never dropped. |
| Quick answers | FAQ | Native details/summary. Opens with no JavaScript and expands for in-page find. |
| Comments placeholder | EmptyState | The "nothing here yet" block, with the action that would fix it. |
| Category paging | Pagination | Fully controlled, with real accessible names on the icon-only jump buttons. |
| This table | Table | Scrolls inside its own wrapper rather than making the page scroll sideways. |
| Page width | Container | Every route is wrapped in one, at lg or xl. |
| Buttons and links | Button | asChild renders next/link, so a link that looks like a button is still an anchor. |
| Secondary copy | Text | Muted deks and counts, with line clamping in the card grid. |
| Shortcut hint | Kbd | The ⌘K legend in the search button. |
| Site footer | Footer | One named nav around all three link columns, plus the install command. |
One package, mostly on the server
The two charts inside the data story, the sparkline beside every most-read entry, the Prose that sets the article body and the reading-progress bar all ship in the same install. There is no charting library here, no markdown pipeline and no second design system.
Almost all of it renders on the server. The charts are plain SVG with nothing measured, so a reader receives a complete article — figures included — in the first HTML response, which is exactly what a crawler wants too. JavaScript is spent only where state genuinely exists: the command palette, the theme toggle, the progress bar, the copy button, pagination and the subscribe form.
The credit in the navbar and the footer is removable and nothing breaks when it goes. A star on GitHub is appreciated instead.
About this template
What people ask before cloning it.
Is this template really free?
Yes. The template is MIT licensed and VivekUI itself is MIT licensed and free, with no paid tier, no account and no usage limits. Clone it, change the words, ship it commercially if you like.
Do I have to keep the "Built with VivekUI" credit?
No. The credit in the navbar and footer is removable and nothing breaks when you delete it. A star on the GitHub repository is appreciated instead, but it is not required by the licence.
Does VivekUI need Tailwind or a config file?
Neither. It is one npm install and one CSS import. There is no PostCSS plugin, no Babel plugin, no CLI, no code generation and no required provider — the ThemeProvider on this site is opt-in because the site offers a dark mode.
Are the articles here server rendered?
Almost entirely. Article bodies, the charts inside them, the Most read sparklines, the cards, the footer and the FAQ are all server components. The client bundle covers only what genuinely needs state: the command palette, the theme toggle, the reading-progress bar, the copy button, pagination and the subscribe form.
How do I change the accent colour or the fonts?
Every value in VivekUI is a CSS custom property. app/globals.css re-points a handful of --vk-* tokens for the blue accent and the square corners; the two typefaces are loaded with next/font and wired to the same tokens. Nothing is overridden with an importance flag.