Tosa UI

Customizable React ecommerce components (32 total). Every component styles itself with props (colors, radius, layout, placement) and injects its own CSS — no extra import needed.

Run the demo locally

npm install
npm run dev        # demo + Playground of all new components
npm run build      # build the demo site (for deploy)

Use the package locally (before publishing)

npm run pack:local            # builds dist-lib and creates tosa-ui-0.2.1.tgz
# in your other project:
npm install ../tosa-frontend/tosa-ui-0.2.1.tgz

Or live-link while developing: npm run build:lib && npm link, then npm link tosa-ui in the other project.

import { Navbar, Hero, ImageSlider, Button, RangeSlider } from "tosa-ui";

React 18+ is a peer dependency. Override the font with --tosa-font on any parent element.

Publish

npm publish (runs build:lib automatically).

New components

Button, Badge, Rating, Tabs, Accordion, Toast, RangeSlider (dual price slider), ImageSlider (slide/fade, arrows, dots, thumbnails, content align/position), Testimonials, Newsletter, FeatureStrip, Countdown. See src/Playground.jsx for every prop in use.

Layout / spacing notes (0.2.1)

• All CSS classes are now prefixed with tosa-, so they can no longer clash with (or be broken by) the host app's .hero, .footer, .modal ... styles.
• base.css no longer relies on the host's global * { box-sizing: border-box }; the components bring their own reset, so they look identical in the demo and after npm install tosa-ui.
• Section roots reset inherited text-align / line-height, so a host #root { text-align: center } (Vite starter) cannot shift content.
• Navbar content now uses the same max width as the other sections. Change it everywhere with --tosa-container-width (default 1400px).

If you still see side gaps in your app

That space comes from the host page, not the package. In the app that installs tosa-ui, make sure its global CSS has:

body { margin: 0; }
#root { width: 100%; max-width: none; margin: 0; padding: 0; border: 0; text-align: initial; }

(The default Vite starter index.css / App.css sets #root { width: 1126px; margin: 0 auto; border-inline: 1px solid ... } and body { display: flex; place-items: center } - delete those.)