In stock
Daily Greens30 servings
$49.001
136 components, 41 styles. MIT, no paywall.Build a store the way you build a page.
Import the sections, drop them in order, ship. Every block is production ecommerce: product pages, carts, bundles, subscriptions, trust proof. 136 components for shadcn, one command each.
$
npx shadcn@latest add @storekit/page-store- AnnouncementBar
- Nav
- Hero
- TrustStats
- Collection
- Footer
app/page.tsx0 / 6 blocks
yourstore.com
The store frame renders the real components, live. Hover to pause.
Built the way a store is built.
Not by widget type. By where it sits in the funnel, from the announcement bar to the footer. Every section has its own page with every variant live.
Change three tokens. Nothing else moves.
Every block reads the same variables for color, radius and surface. A brand is a token file, not a fork.
Accent
Radius
Mode
tokens.css
:root {
--sk-accent: 47 111 208;
--sk-accent-ink: 255 255 255;
--sk-sale: 47 111 208;
--sk-radius-card: 12px;
--sk-radius-btn: 8px;
--sk-radius-chip: 999px;
}Daily GreensDeliver every
- 15% off every delivery
- Free shipping on every order
- Skip, swap or pause from your account
- Fresh batch each shipment, third-party tested
Cancel anytime. No fees, no minimum term.
The mechanics that move revenue, as named blocks.
cart-shipping-barBaymard, Cartly
A visible threshold raises average order value. Vendors report 7 to 20 percent lifts; test yours.
upsell-subscribeNik Sharma, SKIO
Subscribe and save shown as a choice, not a trap. Per-delivery price and cancel-anytime in view.
pdp-bundle-tiersHormozi, Baymard
Price anchoring with honest math. The middle tier is pre-selected because that is what sells.
pdp-variant-cardsBaymard
Variant cards with a per-unit price turn a dropdown into a decision. The best-value badge moves the median order up.
reviews-summarySpiegel Research Center
Reviews near the button raise purchase likelihood by 270 percent in Spiegel's research.
trust-coa-proofStoreKit field data
For anything people swallow, lab proof is the conversion event. Make the test report a designed object.
Your agent ships it.
StoreKit is a shadcn registry, so Claude Code, Cursor and v0 already know how to install it. Every item ships as source with its dependencies resolved, and the whole catalog is readable at llms.txt.
- Registry first. npx shadcn add @storekit/<item> works with zero StoreKit tooling.
- Source, not a package. The code lands in components/storekit. Edit anything. No runtime dependency on us.
- Instrumented. Every block carries data-sk-section and data-sk-variant and reports view, interact and convert.
your-store
$
Running in production at
One store. 41 looks.
Every card is the same store and the same components. Only the style file changes: palette, type, buttons, borders, elevation and art direction.
What you get.
136 components
Every section of the funnel, each one live and installable.
Production ready
States for sold out, low stock, loading, empty and error.
One token contract
Thirteen variables, three radii, three fonts. A brand is a file.
Light and dark
Dark is a brand choice, not a mode toggle. Both are first class.
TypeScript
Typed props with sensible defaults. Renders complete with no props.
Accessible
Real buttons, focus rings, focus traps, arrow keys on radiogroups.
Instrumented
data-sk attributes and view, interact, convert events on every block.
Agent ready
A shadcn registry plus llms.txt. Claude Code and Cursor install it today.
MIT
No pro tier, no scarcity. Install the source, not a dependency.
Questions.
Yes. StoreKit is a plain shadcn registry. Register the @storekit namespace in components.json, add the sk token block to your Tailwind config, and install items by name. Your existing shadcn components are untouched.
Install the whole store.
Free and MIT licensed. Start with one section, or scaffold the full example store in one command.
$
npx shadcn@latest add @storekit/page-store$
npx shadcn@latest add @storekit/cart-drawer
