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 CSS-in-JS, and no chart library. One install, one CSS import, and the emerald accent you are looking at is seven custom properties in globals.css. Every row below deep-links to the component’s own documentation page.
npm i @the_viveksingh/vivek-uiThe climate charts need no chart library
The two “best time to visit” charts on every trip page are LineChart and BarChart, which ship inside VivekUI as pure inline SVG. Nothing is measured in the browser, so they render complete in the first HTML response — and each one emits a visually hidden
<table> of the real numbers, so a screen reader gets the data rather than the word “graphic”. Recharts alone is roughly 100 kB; all six VivekUI charts together are 8.3 kB brotlied. See the charts documentation.Section by section
46 rows, covering every part of the site.
| Where on the site | Component | What it does here |
|---|---|---|
| Every page — top bar | Navbar | Sticky bar that collapses to a sheet on a narrow screen, with the “Built with VivekUI” badge |
| Every page — top bar | ThemeToggle | Light / dark / system, named after the action rather than the current state |
| Every page — footer | Footer | Link columns in one named nav, plus the credit block |
| Every page — footer | CopyButton | The install command, with a live-region confirmation and a legacy fallback |
| Every page — feedback | ToastProvider | Two live regions mounted empty at boot, so the first toast is never dropped |
| Home — hero search | Combobox | Type-to-filter destination picker, ARIA activedescendant, focus never leaves the input |
| Home — hero search | DatePicker | Text entry first, calendar popup second |
| Home — hero search | Select | A real native select, so the platform picker is inherited |
| Home — hero search | Field | Owns the label, hint and error wiring for all three controls above |
| Home — ticker | Marquee | Zero-JS infinite ticker; stops on hover, on focus and under reduced motion |
| Home — destination wall | BentoGrid | The six trips, with wide feature tiles alternating sides |
| Home — deals | Carousel | CSS scroll-snap track that works with JavaScript disabled |
| Home — deals | Countdown | Given a server now, hydration-safe by construction — never reads the clock in render |
| Home — numbers | Stats | A description list, so every figure is announced with what it measures |
| Home — numbers | AnimatedCounter | Renders the final value in server HTML, never a zero that hopefully animates |
| Home — numbers | Rating | Read-only average as a single role="img", not six dead tab stops |
| Home — how it works | Stepper | Three steps as an ordered list inside a nav landmark |
| Home — social proof | Testimonials | figure / blockquote / figcaption, the markup HTML actually defines for a quote |
| Home & trips — FAQ | FAQ | Native <details>, so it opens with no JavaScript and no ARIA at all |
| Home — signup | Newsletter | Promise-driven busy state, which is what actually stops a double submit |
| Home — closing ask | CTA | Container-queried, so it stacks correctly in a narrow column |
| Destinations — comparison | Table | The six trips on the numbers, with a visually hidden caption naming the table |
| Destinations — search echo | Alert | Politeness picked from the tone, so it does not talk over the user |
| Trip page — gallery | Carousel | Five photographs, two at a time above 768px |
| Trip page — itinerary | Timeline | The day-by-day. icon carries the day number, statusLabel fixes the announcement |
| Trip page — inclusions | Badge | Decorative in / out marks; the headings carry the meaning |
| Trip page — location | MapEmbed | OpenStreetMap by default — no cookies set before the visitor has agreed to anything |
| Trip page — booking | Modal | Focus trapped, scroll locked, the rest of the page inert, focus returned on close |
| Trip page — booking | Card | The sticky booking rail, header / body / footer |
| Trip page — booking | Divider | A real <hr>, which already means "thematic break" |
| Trip page — booking | Stack | Token-based vertical rhythm inside the card, which has no gap of its own |
| Plan — interests | TagInput | Live region announcing the whole tag list, and a spoken reason for every rejection |
| Plan — budget | Slider | Built on <input type="range">, so the keyboard and the slider role are the platform’s |
| Plan — no matches | EmptyState | The glyph, the reason, and the two buttons that fix it |
| Plan — results | Grid | Responsive columns compiled to custom properties — no CSS generated at render |
| Trip page — climate | LineChart chart | Average high temperature by month. Pure inline SVG, rendered on the server |
| Trip page — climate | BarChart chart | Rainfall in millimetres by month, with a visually hidden data table |
| Structure — everywhere | Section | Landmark, rhythm and the inner Container in one component |
| Structure — everywhere | Container | Centres content and caps its width with a responsive gutter |
| Structure — everywhere | Heading | level sets semantics, size sets appearance — separately, on purpose |
| Structure — everywhere | Text | Body copy with tone, size, weight and line clamping |
| Structure — everywhere | Breadcrumb | The trail, in compound form so each hop is a next/link |
| Structure — everywhere | Button | asChild hands the element to next/link, so a link stays an <a> |
| Structure — trip cards | Flex | The wrapping badge row on every boarding-pass card |
| Footer & this page | Code | The install command, beside its CopyButton |
| Theme — root layout | ThemeProvider | Owns the theme, plus the blocking themeScript that prevents a wrong first paint |
What is not in this project
The dependency list is the point. Run npm ls --omit=dev and this is all of it.
- No Tailwind, no PostCSS plugin, no build-time CSS pipeline
- No Radix, no CVA, no clsx
- No Recharts, Chart.js, D3 or canvas — the charts are VivekUI
- No Emotion or styled-components, so no runtime style computation
- No icon package — the star rating and the status glyphs are CSS
- Three dependencies in total: next, react, react-dom — plus VivekUI
Take it
MIT licensed. Clone it, swap data/trips.ts, change the accent tokens, ship it. The VivekUI credit in the footer is removable — a star on the repository is appreciated instead.
Full guide — data model, theming, SEO, AEO and recipes — in DOCUMENTATION.md. Public repository: intellectwithvivek/wanderly · back to the trips