\n );\n}\n```\n\n**Composable** (primitives for custom layouts):\n\n```tsx\nimport * as ProductCardPrimitive from 'storefront-kit/product-card';\n\nfunction MyProductCard() {\n return (\n \n \n \n \n \n \n \n \n \n Product Name\n \n \n \n \n );\n}\n```\n\nAdditional primitives are available for more advanced layouts: `Subtitle`, `Rating`, `Badge`, `Skeleton`, `Actions`, `Form`, `Input`, `CartButton`, `CartLink`, and `Compare`.\n\n## Web Components\n\nStorefront Kit also ships framework-free web components. They need no React and no\nTailwind — install the package and import the component's subpath:\n\n```bash\npnpm add storefront-kit\n```\n\n```ts\nimport 'storefront-kit/web/carousel';\n```\n\n```html\n\n \n \n\n```\n\nThe import registers the `sfk-carousel*` custom elements. Components render with\nbuilt-in defaults; to theme them, define `--sfk-*` custom properties on the page\n(custom properties inherit into shadow roots), or import `storefront-kit/styles`\nfor the full token set — it's prebuilt CSS and needs no Tailwind.\n\nReact imports are also available as `storefront-kit/react` and\n`storefront-kit/react/`; the bare `storefront-kit` spelling continues\nto work.\n\n## Tailwind Utilities\n\nThe preset adds design system utilities you can use throughout your app:\n\n```tsx\n
![\"\"](\"/slide-1.jpg\")
\n ![\"\"](\"/slide-2.jpg\")
\n