Built with VivekUI
This entire website is built with VivekUI, a free React component library with zero runtime dependencies.
There is no Tailwind here, no shadcn, no MUI and no CSS-in-JS. One package install, one stylesheet import in app/layout.tsx, and a handful of CSS custom properties to set the Emerald accent — that is the whole setup. Every chart on the site ships in the same package as every button.
npm i @the_viveksingh/vivek-uiTemplate repository: intellectwithvivek/SkillForge · MIT licensed · the credit in the footer is removable, though a star is appreciated.
Rings, bars, lines and sparks — one package
The charts are not a separate dependency and not a wrapper around Recharts. They are inline SVG in the same install, at a second import path, and each one renders a hidden data table so the numbers reach a screen reader.
ProgressRing
Completion on every enrolled card — and every bullet glyph on the site
PieChart
“What’s inside” content mix on each course page
LineChart
Learning minutes over the last eight weeks
Sparkline
Thirty-day streak beside the counter
Every section, and the component behind it
Each name links straight to its documentation page, props table included.
| Area | Component | What it does here |
|---|---|---|
| Site header | Navbar | Sticky bar, mobile sheet, brand and actions |
| Site header | Combobox | Course search that navigates on select |
| Site header | ThemeToggle | Light / dark / system, cycling |
| Site header | Badge | The “Built with VivekUI” chip |
| Everywhere | ThemeProvider | Theme state, storage and the anti-flash script |
| Everywhere | Section | Every page band, with its own header slot |
| Everywhere | Container | Width cap and responsive gutter |
| Everywhere | Stack / Flex | Token-gapped layout, no utility classes |
| Everywhere | Grid | Auto-fitting card grids at every width |
| Everywhere | Heading | Level and size set separately, so the outline stays correct |
| Everywhere | Text | Body copy, tones and line clamping |
| Homepage | Stats | Learners, courses, completion rate |
| Homepage | AnimatedCounter | Counts up on view; renders the final value on the server |
| Homepage | Stepper | The four-step “how it works” flow |
| Homepage | Timeline | Instructor credentials |
| Homepage | Testimonials | Learner quotes as figure/blockquote |
| Homepage | Pricing | Free / Pro / Team, with a yearly Switch |
| Homepage | Switch | Monthly ↔ yearly billing |
| Homepage | FAQ | Native <details>; feeds the FAQPage schema |
| Homepage | Newsletter | Email capture with a real busy state |
| Homepage | Prose | The instructor biography |
| Catalogue | Select | Category and level filters |
| Catalogue | Slider | Maximum price |
| Catalogue | Rating | Minimum rating — a real radio group |
| Catalogue | Field | Label, hint and ARIA wiring for each filter |
| Catalogue | Pagination | Six courses a page |
| Catalogue | EmptyState | When no course matches the filters |
| Course card | Card | Header / body / footer slots |
| Course card | Avatar | Instructor face, with initials fallback |
| Course page | Breadcrumb | Trail, mirrored in BreadcrumbList JSON-LD |
| Course page | AspectRatio | Preview frame that cannot shift layout |
| Course page | IconButton | Play control — aria-label required at the type level |
| Course page | Modal | Demo player: focus trap, scroll lock, inert background |
| Course page | FeatureGrid | “What you’ll learn” |
| Course page | Accordion | Curriculum sections, multiple open at once |
| Course page | Progress | Per-star review distribution |
| Course page | RelativeTime | Review dates, via Intl — no date library |
| Course page | Divider | Labelled rules in the enrol panel |
| Course page | Toast | Enrol confirmation, announced in a live region |
| Dashboard | Sidebar | Collapsible navigation rail |
| Dashboard | Alert | The “this is a template” note |
| Dashboard | EmptyState | No certificates yet |
| Built with | Table | This table |
| Built with | CopyButton | The install command |
| Built with | Code | Inline and block code |
| Footer | Footer | Link columns inside one named nav |
What that bought us
- No build configuration. No Tailwind, no PostCSS plugin, no component CLI, no generated source in the repository.
- Server components by default. 49 of the 91 components carry no
'use client', so most of this site is static HTML. - Accessibility that was already there. Focus traps, live regions and keyboard models ship with the components rather than being added afterwards.
- Themeable from one block of CSS. The Emerald accent on this site is nine custom properties in
globals.css. - Overrides that do not fight. Every library selector is wrapped in
:where(), so a single flat class of ours wins — there is no!importantanywhere in this project.
91 components · 6 charts · 47.6 kB for the entire library, brotlied, with React excluded. Verify it yourself: npm ls --omit=dev @the_viveksingh/vivek-ui
Back to the homepage, or browse the course catalogue. Built by Vivek Kumar Singh.