⚡ Built with VivekUI
Built with VivekUI
This entire website is built with VivekUI, a free React component library with zero runtime dependencies.
No Tailwind, no shadcn, no component CLI, no config file. 46 distinct components and one chart type, from a single install and a single CSS import. Everything below is a live part of this store, not a screenshot.
Install VivekUI
npm i @the_viveksingh/vivek-uiThen one import in your root layout: import '@the_viveksingh/vivek-ui/styles.css'
Or take this whole store
git clone https://github.com/intellectwithvivek/shopkit.gitMIT licensed. Starting a real project? Press Use this template for a fresh repository instead of cloning this one.
One package, not twelve
The cart Drawer, the ⌘K CommandPalette and both Sparkline charts all come from the same package — no drawer library, no combobox library, no charting library. That is the whole reason this store has zero runtime dependencies of its own.
Site chrome
Present on every page, from the root layout.
| Component | Where it appears | Docs |
|---|---|---|
Navbar | Header, with the collapsing mobile sheet | navbar documentation, opens in a new tab |
CommandPalette | ⌘K search across all 16 products and every page | command-palette documentation, opens in a new tab |
Kbd | The ⌘K hint in the search button and palette footer | kbd documentation, opens in a new tab |
Drawer | The cart, sliding in from the inline end | drawer documentation, opens in a new tab |
IconButton | Cart button, quantity steppers | icon-button documentation, opens in a new tab |
Badge | Cart count, sale flags, “Built with VivekUI” | badge documentation, opens in a new tab |
ThemeProvider | Light / dark / system, persisted | theme-provider documentation, opens in a new tab |
ThemeToggle | The theme switch in the navbar | theme-toggle documentation, opens in a new tab |
Toast | “Added to cart”, with a View cart action | toast documentation, opens in a new tab |
Footer | Link columns and the credit block below | footer documentation, opens in a new tab |
Code | The install command, here and in the footer | code documentation, opens in a new tab |
CopyButton | Copying that install command | copy-button documentation, opens in a new tab |
Homepage
The storefront, rendered almost entirely on the server.
| Component | Where it appears | Docs |
|---|---|---|
Countdown | “Sale ends in…”, hydration-safe via a server clock | countdown documentation, opens in a new tab |
Sparkline | 14-day sales velocity in the Trending row | sparkline documentation, opens in a new tab |
Rating | Stars on every product card | rating documentation, opens in a new tab |
LogoCloud | The “As seen in” strip | logo-cloud documentation, opens in a new tab |
Testimonials | Three customer quotes | testimonials documentation, opens in a new tab |
Newsletter | The signup form | newsletter documentation, opens in a new tab |
FAQ | Shipping, returns and licence questions | faq documentation, opens in a new tab |
Grid | Category tiles and every product grid | grid documentation, opens in a new tab |
Section | Page bands, including the primary-surface CTA | section documentation, opens in a new tab |
Container | Max-width gutters | container documentation, opens in a new tab |
Button | Every call to action, via asChild + next/link | button documentation, opens in a new tab |
Text | Body copy, muted captions, line clamping | text documentation, opens in a new tab |
Shop
The filter rail runs entirely in the browser.
| Component | Where it appears | Docs |
|---|---|---|
Checkbox | Category facets, with counts | checkbox documentation, opens in a new tab |
Slider | Price range — two thumbs, each separately labelled | slider documentation, opens in a new tab |
Switch | “In stock only” | switch documentation, opens in a new tab |
Select | The sort control | select documentation, opens in a new tab |
Pagination | Eight products per page | pagination documentation, opens in a new tab |
Skeleton | The placeholder shown while filtering | skeleton documentation, opens in a new tab |
EmptyState | When no product matches the filters | empty-state documentation, opens in a new tab |
Breadcrumb | Home → Shop | breadcrumb documentation, opens in a new tab |
Product page
Sixteen statically prerendered pages.
| Component | Where it appears | Docs |
|---|---|---|
Carousel | The image gallery, driven also by the thumbnail strip | carousel documentation, opens in a new tab |
Sparkline | “Price history — last 30 days”, with min/max labels | sparkline documentation, opens in a new tab |
ButtonGroup | The attached quantity stepper | button-group documentation, opens in a new tab |
Accordion | Shipping / Returns / Warranty | accordion documentation, opens in a new tab |
Tabs | Description, Specs and Reviews | tabs documentation, opens in a new tab |
Prose | The description copy | prose documentation, opens in a new tab |
Table | The specification rows | table documentation, opens in a new tab |
Avatar | Reviewer portraits | avatar documentation, opens in a new tab |
RelativeTime | “3 weeks ago” on each review | relative-time documentation, opens in a new tab |
Alert | The low-stock notice | alert documentation, opens in a new tab |
Checkout
Four steps, fully mocked.
| Component | Where it appears | Docs |
|---|---|---|
Stepper | Address → Shipping → Payment → Review | stepper documentation, opens in a new tab |
Field | Labels, hints and error text wiring | field documentation, opens in a new tab |
Input | The address form | input documentation, opens in a new tab |
RadioGroup | Shipping methods and payment methods | radio-group documentation, opens in a new tab |
Timeline | Order status on the confirmation screen | timeline documentation, opens in a new tab |
Table | The review-your-order summary | table documentation, opens in a new tab |
Start from this store
ShopKit is MIT licensed. Clone it, swap data/products.ts for your own catalog, and you have a storefront. The credit in the footer is removable — a star on the repository is appreciated instead.