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 Bootstrap — one install, one CSS import, and the 47 components listed below.
npm i @the_viveksingh/vivek-uiClone this template
git clone https://github.com/intellectwithvivek/MediCare-Plus.gitMIT licensed. Free for commercial use, no attribution required.
Scheduler, Stepper, OTPInput and all three charts ship in the same zero-dependency package as the Button and the Card. There is no separate charts install, no pro tier and no peer dependency beyond React itself — which matters most for the Scheduler, the one component shadcn/ui, Mantine and Radix simply do not have, and that MUI puts behind a paid licence.
91 components6 SVG charts0 runtime dependenciesMIT licensedReact 18 & 19
The map
Every section, and the component behind it
Each component name links straight to its documentation page.
| Section | Component | What it does here |
|---|---|---|
| Every page — template banner | Code | The `git clone` command in the open-source strip at the very top. |
| Every page — template banner | CopyButton | Copies the clone command, and the install command in the footer. |
| Every page — open-source notice | Badge | "Free & open source" and "MIT licensed" chips above the footer. |
| Every page — open-source notice | Button | Star on GitHub, Use this template, How it is built. |
| Every page — theming | ThemeProvider | Light default, dark supported, choice persisted to localStorage. |
| Every page — theming | ThemeToggle | The sun/moon switch in the navbar. |
| Every page — emergency bar | Alert | The thin 24 × 7 emergency strip above the navigation. |
| Every page — navigation | Navbar | Brand, links, actions and the mobile disclosure with its focus trap. |
| Every page — navigation | Badge | The "⚡ Built with VivekUI" chip, and every specialty and condition tag. |
| Every page — footer | Footer | The footer landmark, container and muted background. |
| Every page — footer | Clock | Live local time in Bengaluru, beside the opening hours. |
| Every page — footer | MapEmbed | The OpenStreetMap frame showing the Indiranagar address. |
| Every page — footer | Code | The install command block. |
| Every page — footer | CopyButton | Copies the install command, with its own copied/error announcement. |
| Every page — footer | Divider | Rule above the copyright and disclaimer. |
| Homepage — hero | Hero | Split layout: headline and actions on the left, booking card on the right. |
| Homepage — hero | Card | The floating "book in under a minute" panel. |
| Homepage — hero | Combobox | Type-ahead department picker that seeds the booking flow. |
| Homepage — hero | Button | Every call to action on the site, including `asChild` around next/link. |
| Homepage — stats | Stats | Four-up figure grid rendered as a description list. |
| Homepage — stats | AnimatedCounter | Counts each figure up when it scrolls into view. |
| Homepage — departments | FeatureGrid | The eight specialties, four across on desktop. |
| Homepage — doctors | Grid | Responsive card grids on the homepage, /doctors and /departments. |
| Homepage — doctors | Rating | Read-only half-star patient rating on every doctor card and profile. |
| Homepage — care in numbers | BarChart | Appointments completed per month, last twelve months. |
| Homepage — care in numbers | PieChart | Share of appointments across the six busiest departments. |
| Homepage — care in numbers | ProgressRing | Two rings: 98% patient satisfaction and 96% on-time consultations. |
| Homepage — testimonials | Testimonials | Six patient quotes with avatars. |
| Homepage — testimonials | Avatar | Patient portraits, and the head-of-department photo on /departments. |
| Homepage — FAQ | FAQ | Four accordion answers, mirrored into FAQPage structured data. |
| Homepage — closing CTA | CTA | The closing band on the homepage, /departments and each doctor profile. |
| Layout — every route | Section | Page rhythm: padding, background and the contained header block. |
| Layout — every route | Container | Max-width gutter, applied by Section on every page. |
| Layout — every route | Stack | Horizontal action rows inside Hero and CTA. |
| Layout — every route | Heading | Section titles, kept at one h1 per page. |
| Layout — every route | Text | Body copy, muted captions and clamped card summaries. |
| Layout — inner routes | Breadcrumb | Trail on /doctors, /departments, /book and each profile. |
| /book — the flow | Stepper | Four steps, clickable backwards only, with aria-current="step". |
| /book — step 2 | DatePicker | Typed or picked date, with everything before today blocked. |
| /book — step 2 | Scheduler | The "why are some slots gone?" timeline of the day’s existing bookings. |
| /book — step 2 | Skeleton | Placeholder grid while the day’s availability loads. |
| /book — step 2 | EmptyState | Before a date is chosen, and when a doctor filter matches nothing. |
| /book — step 3 | Field | Label, help text and error wiring for every control in the form. |
| /book — step 3 | Input | Name, phone and email. |
| /book — step 3 | Select | Age band. |
| /book — step 3 | Textarea | Symptoms and reason for the visit. |
| /book — step 3 | Checkbox | Consent, with its own description and error state. |
| /book — step 4 | OTPInput | Six-box code entry with paste, autofill and auto-submit on complete. |
| /book — confirmation | Timeline | "What happens next", and the qualifications trail on doctor profiles. |
| /book — confirmation | Toast | Booking confirmed, code resent, and "added to calendar". |
| /built-with | Table | This very table — scrollable, with a visually-hidden caption. |
Charts are imported from @the_viveksingh/vivek-ui/charts — the same install, a separate entry point so the SVG code never lands in a bundle that does not draw a chart.
For balance
What is not a component
So you know exactly where the library stops and the template starts.