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 Emotion, and no charting library. One install, one CSS import, no config file. Everything below is a link straight to the documentation for the component doing the work.
npm i @the_viveksingh/vivek-uiClone this template
git clone https://github.com/intellectwithvivek/Saffron-House.gitMIT licensed. Node 20.9+ (22 LTS recommended), then npm install and npm run dev.
| Section | Components | What it gives us |
|---|---|---|
| Header, on every page | NavbarThemeToggleClockBadgeButton | Navbar.Brand / Links / Link / Actions / Toggle, with the mobile sheet and aria-current handled for us. The open/closed badge sits beside a live Clock. |
| Homepage hero and story | ContainerSectionProseText | Section.Header supplies the eyebrow, title and description for every band on the site. The saffron-thread divider between them is our own CSS, not a component. |
| Signature dishes | CarouselCardBadge | A scroll-snap track that works before JavaScript loads; only the arrows and dots hydrate. Each slide is a role="group" announced as "Dish 3 of 6". |
| Menu preview and /menu | TabsAlertBadge | One MenuTabs component serves both pages — the homepage passes a limit of four. Manual activation, so arrowing across courses does not swap four panels. |
| Gallery and numbers | BentoGridStatsRatingTestimonials | Stats renders as a description list so a screen reader hears "Years on Lavelle Road, 16" rather than a bare number. Rating is a real radio group. |
| Questions and location | FAQMapEmbed | FAQ is native details/summary — it opens with zero JavaScript and answers are findable with Ctrl+F. MapEmbed defaults to OpenStreetMap, so no cookie banner. |
| /reserve — the form | DatePickerSelectFieldInputTextareaCheckbox | Field owns every label, hint and error wiring. Two dinner slots are disabled and labelled "Full"; choosing eight guests reveals an Alert about larger parties. |
| /reserve — confirming | ModalToastProvideruseToastTimeline | Modal implements the full APG dialog pattern — focus trap, restore, inert background. The success state is a Timeline of what happens next. |
| /reserve — popular times | BarChart | Pure SVG, rendered on the server, with a visually hidden data table of the real numbers underneath. No charting library is installed in this project. |
| This page and the footer | TableFooterCodeCopyButton | The table below is Table.Head / Body / Row / Cell with a caption. CopyButton falls back to execCommand outside a secure context and announces the result. |
| Theming, site-wide | ThemeProviderthemeScriptThemeToggle | A Rose accent set by re-pointing six CSS custom properties. No theme object, no Tailwind config, and themeScript in <head> stops the dark-mode flash. |
Scroll the table sideways to read the last column.
The popular-times panel on /reserve is a VivekUI BarChart — pure SVG, server-rendered, with a visually hidden data table of the real numbers for screen readers. Recharts, Chart.js and D3 are all absent from package.json. The whole chart module is under 12 kB.
36 distinct VivekUI exports are used across the four pages of this template — plus the flat TabsList / TabsTab / TabsPanels / TabsPanel aliases, which a Server Component needs in place of the dotted form: Alert, Badge, BarChart, BentoGrid, Button, Card, Carousel, Checkbox, Clock, Code, Container, CopyButton, DatePicker, FAQ, Field, Footer, Input, MapEmbed, Modal, Navbar, Prose, Rating, Section, Select, Stats, Table, Tabs, Testimonials, Text, Textarea, ThemeProvider, themeScript, ThemeToggle, Timeline, ToastProvider, useToast.
Use this for your own restaurant
MIT licensed. Clone it, change the words and the photographs, and ship it. The footer credit is removable — a star is appreciated.
Template repository: Saffron-House · Built by Vivek Kumar Singh