E-commerce
Most shoppers are on a phone. Keep product information scannable, make the add-to-cart action obvious, and never lose the bag between pages.
npx shadcn@latest add https://ui.tealmac.com/r/media.json https://ui.tealmac.com/r/chart-bar-horizontal.json https://ui.tealmac.com/r/chart-line-default.jsonPro flagship
ProA whole store: catalogue, product pages, cart, checkout and order tracking, ready to connect to your backend.
Components
Free, MIT licensed, one install each.
Media
ComponentFreeA picture slot that reserves its space, lazy-loads, takes a URL, an image with alt text and a dark-mode file, or your own element, and falls back to artwork when there is no image or it fails.
Bar, horizontal
ChartFreeHorizontal bars with category labels on the left.
Line
ChartFreeA single smooth line without dots.
Blocks
Whole sections, composed from the components.
Two-tier pricing
BlockFreeA free and a paid plan side by side with included and missing features, the paid card traced by a moving border beam.
Call to action with email capture
BlockProA newsletter sign-up with an inline email form, a confirmation state and recent issues.
Inline newsletter signup band
BlockProA slim band with a one-line pitch, an email field and a quiet note on frequency.
Featured customer quote with result
BlockProOne long customer quote set large beside the measured result it led to.
Templates
Complete pages to start from.
Storefront
TemplateProAn e-commerce storefront with an animated hero, filterable category pills, and a product grid that adds items to a live cart.
Product
TemplateProA product detail page with swappable gallery panels, color and size pickers, a quantity stepper, and tabbed specs.
Cart
TemplateProA shopping cart with editable line items, promo codes, and an order summary that recalculates tax and total live.
Deals
TemplateProA flash-sale landing with a ticking countdown, discount badges, animated claimed-progress bars, and category filters.
Kiln & Co ceramics shop
TemplateFreeA five-page storefront for a ceramics studio: a home page with featured pieces, a filterable shop, a product page with glazes and reviews, a bag with a free-shipping meter and promo code, and a validated checkout, all sharing one bag.
Guidance
Big targets, short forms
Touch targets of at least 44 px, and ask only for what you need to ship the order.
Prices people can read
Format money with Intl.NumberFormat in the shopper's locale, and show totals before the last step.
Confirm without interrupting
When something is added to the bag, show a toast and update the count; don't pull people away from the product.





















