@revova/hydrogen 1.0.2 → 1.1.0

package/README.md

@@ -72,6 +72,7 @@ const creds = {
 
 ```tsx
 // app/routes/products.$handle.tsx
+import '@revova/hydrogen/styles.css'; // import once in app/root.tsx instead
 import { ReviewWidget, FloatingReviewButton } from '@revova/hydrogen';
 
 export async function loader({ context, params }: LoaderArgs) {
@@ -408,9 +409,15 @@ const { vote, loading, voted } = useHelpfulVote(creds);
 
 ## Styling
 
-All components are **unstyled by default** — they render semantic HTML with inline structural styles only (layout, positioning). Pass a `className` prop and override with Tailwind, CSS Modules, or any CSS-in-JS solution.
+The package ships a bundled CSS file. Import it **once** in your app root (e.g. `app/root.tsx`):
 
-The `starColor` prop is available on every component that displays stars and defaults to `#f59e0b` (amber).
+```ts
+import '@revova/hydrogen/styles.css';
+```
+
+This applies the full `rv-*` design system — cards, stars, modal, form, ticker animation, popup, gallery lightbox, and all widget layouts. All class names are prefixed `rv-` so they won't conflict with your theme styles.
+
+To customise, pass a `className` prop on any component and override the relevant `rv-*` classes in your own CSS. The `starColor` prop (default `#f59e0b`) is available on every component that renders stars.
 
 ---