Production-ready · React 18 + TypeScript

Build e-commerce UIs
in minutes, not weeks

Cartlify ships 4 polished components, 3 hooks, 11 icons, and a full design token system — with dark mode, WCAG 2.1 a11y, and 141 tests included. Drop it into any React 18 project and start shipping.

✓ 4 main components ✓ 141 Jest tests ✓ WCAG 2.1 accessible ✓ Full dark mode ✓ TypeScript-first ✓ Storybook docs ✓ Zero CSS-in-JS
React 18+ TypeScript 5.5 Tailwind CSS 3.4 Storybook 8 Jest + RTL ESM + CJS

4 production-ready components

Every component ships with variants, accessibility, dark mode, and thorough tests. Zero glue code needed.

ProductCard

Product Display Card

-20%
  • 3 layout variants — default, horizontal, compact
  • Image gallery with thumbnail strip + navigation
  • Wishlist toggle, rating stars, discount badge, skeleton
CartDrawer

Slide-in Cart Panel

Cart (2)
1
+
2
+
Checkout →
  • Left / right position, animated backdrop overlay
  • Focus trap, Escape key + backdrop-click dismiss
  • Quantity controls, remove items, subtotal display
CheckoutStepper

Multi-step Progress

Cart
2
Shipping
3
Payment
4
Done
  • Horizontal & vertical orientations
  • Animated connector fill, custom step icons
  • Arrow key keyboard navigation, click-to-go-back
PageLoader

Loading Indicator

spinner
dots
bars
pulse
  • 4 variants: spinner, dots, bars, pulse
  • 3 positions: fullscreen, overlay, inline
  • 4 size presets, custom colour, loading message

Everything you need, nothing you don't

Beyond the four main components, Cartlify ships a complete set of building blocks.

3 Utility Hooks

  • useCart — add, remove, update, totals
  • useDisclosure — open / close state
  • useMediaQuery — SSR-safe breakpoints

11 SVG Icons

Tree-shakeable icon components: Cart, Heart (filled), Star, Trash, Spinner, Chevrons ×2, Close, Check, Plus, Minus. All accept className and color props.

40+ Design Tokens

CSS custom properties covering colors, spacing, border-radius, shadows, motion duration, and touch targets — with full light + dark variants.

3 Primitive Components

  • Button — 4 variants, 3 sizes, loading state
  • Badge — sale, new, out-of-stock
  • IconButton — toggle, aria-pressed

3 Utility Functions

  • cn() — Tailwind class merger
  • formatPrice() — currency formatter
  • calculateDiscount() — % off helper

Interactive Storybook

60+ stories with live controls, a11y checks, code snippets, and MDX docs. Your team's living component reference.

Up and running in under 5 minutes

Install from the included package file. No npm publish account needed.

terminal
# 1. Install the package
$ npm install ./cartlify-0.1.0.tgz
# 2. Add to your CSS entry point
@import 'cartlify/styles';
# 3. Add to tailwind.config.js content array
content: ['./node_modules/cartlify/dist/**/*.js']
# 4. Import and use
import { ProductCard, CartDrawer, useCart }
from 'cartlify';

Full setup guide is inside README.md. Browser support: Chrome 90+, Firefox 90+, Safari 14+, Edge 90+.

Production quality, out of the box

No hidden gotchas. No TODO comments. No missing edge cases.

Dark Mode

data-theme="dark" on root — zero extra code

WCAG 2.1

aria-labels, focus traps, keyboard navigation throughout

TypeScript

Full type inference, no any, strict mode on

141 Tests

Jest + React Testing Library, all passing

Tree-shakeable

Dual ESM / CJS — import only what you use

Zero CSS-in-JS

Pure Tailwind + CSS tokens — no runtime overhead

Any Bundler

Vite, Next.js, CRA, Remix — all work out of the box

Fully Themeable

40+ CSS tokens + per-slot className overrides

Simple, one-time pricing

No subscriptions. Pay once, yours forever.

$29+
one-time · single-site commercial license
  • 4 production-ready components
  • 3 utility hooks + 11 icons
  • 40+ CSS design tokens
  • Full TypeScript definitions
  • Interactive Storybook docs
  • 141 Jest tests included
  • Full dark mode support
  • Email support
Get Cartlify — $29

30-day money-back guarantee

Common questions

What React version is required?

React 18+ is required. TypeScript 4.7–5.5 is supported. It works with Vite, Next.js 13+, Create React App, Remix, and any bundler that supports ESM or CJS.

Do I need Tailwind CSS already installed?

Yes — Tailwind CSS 3.4+ is a peer dependency. Add Cartlify's dist/** path to your Tailwind content config and import cartlify/styles in your CSS entry point. The README covers the full setup in one page.

What does the license allow?

A single-site commercial license: build one end product — for yourself or a client — and ship it. You can't redistribute the source or sub-license it. Building multiple projects? Purchase a license per project.

Can I get a refund?

Yes — 30-day money-back guarantee. If Cartlify doesn't work for your project, email karthikgs.softengg@gmail.com and I'll refund you, no questions asked.

Ready to ship faster?

Stop rebuilding the same components. Get Cartlify and focus on what makes your store unique.

Get Cartlify — $29

30-day money-back guarantee · Instant download · Email support included