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. 47 components and 2 charts, all from one package, styled through CSS custom properties in a single stylesheet of our own.
npm i @the_viveksingh/vivek-uiEvery section, and the component behind it
Each name links to its documentation page, which carries a live example, the code in TypeScript and JavaScript, and a props table generated from the package's own type declarations.
| Component | Where it does the work |
|---|---|
| Navbar | Site header, with the mobile sheet and active-link state |
| ThemeToggle | Light / dark / system switch in the header |
| ThemeProvider | Owns the theme and persists it, no flash on load |
| Badge | “For sale”, “New”, amenity chips, the header’s VivekUI badge |
| Combobox | Locality picker in the hero search card |
| Select | Property type, bedrooms and the results sort order |
| ButtonGroup | Buy / Rent segmented control, hero and filter rail |
| Slider | Hero budget, the filter rail price range, all three EMI inputs |
| Button | Every action, including the ones that are really links |
| IconButton | The save heart on each listing card |
| Card | Listings, agents, the search card, the price and EMI panels |
| Grid | Every results and agent grid, reflowing with no breakpoint props |
| Rating | Locality and agent ratings, read-only |
| AnimatedCounter | Homepage stats and the live EMI figure |
| Stats | The four headline figures on the homepage |
| Stepper | “How it works”, four steps |
| Avatar | Agent portraits on the homepage, /agents and each listing |
| Testimonials | Reviews section on the homepage |
| FAQ | Homepage FAQ — native <details>, no JavaScript |
| CTA | “List your property” at the foot of the homepage |
| Footer | Site footer on every page |
| Checkbox | Amenity filters in the /listings rail |
| TagInput | Keyword filter in the /listings rail |
| Switch | “Ready to move” toggle in the /listings rail |
| Tabs | Grid / Compare on /listings; the four tabs on a listing page |
| DataTable | The Compare view — sortable, paginated, stacks on narrow screens |
| Pagination | Below the results grid |
| EmptyState | When the filters match nothing |
| Carousel | Photo gallery at the top of each listing |
| LineChart chart | Locality price trend — ₹/sq ft over five years |
| PieChart chart | Principal-versus-interest split in the EMI calculator |
| MapEmbed | Location tab — OpenStreetMap, no consent gate needed |
| Modal | Contact-agent dialog on listings and /agents |
| Field | Label, hint and error wiring on every form control |
| Input | Name and email in the contact form |
| Textarea | Message body in the contact form |
| Alert | “Estimate only” notice under the EMI calculator |
| Toast | Saved-listing and enquiry-sent confirmations |
| Breadcrumb | Trail on /listings, each listing and /agents |
| Table | The section-to-component map on this very page |
| Prose | Listing description copy in the Overview tab |
| Section | Every page band, with its own heading block |
| Container | Width cap on the closing note |
| Stack | Nearly every vertical and horizontal rhythm on the site |
| Heading | Every heading, with level and visual size set separately |
| Text | Body copy throughout |
| Divider | Rules inside listing and agent cards |
| Code | The install command in the footer and on this page |
| CopyButton | Beside every install command |
@the_viveksingh/vivek-ui/charts with one extra CSS import, so an app with no charts pays nothing for them. Pure inline SVG, no charting dependency, and each renders a visually hidden table of the real numbers underneath for screen readers.What using one package actually bought
One install, one import
npm install, then a single CSS import in app/layout.tsx. No config file, no CLI, no code generation, no PostCSS plugin.
Server components by default
49 of the 91 components carry no "use client". The listing gallery, the price chart and the whole footer render on the server.
Accessibility that came with it
IconButton refuses to compile without an aria-label, the FAQ is native <details>, and the charts publish a real data table for screen readers.
Restyled from one file
Every library selector is wrapped in :where(), so a flat class of ours wins with no !important. The blue accent and the blueprint grid are token overrides in globals.css.
Fork it, replace data/listings.ts, change the copy, deploy. MIT licensed — the credit in the footer is removable.