--- schema_version: "1" id: 006e8407465944db7d93b0a1401eb2dd0accf55e64d50b5ee219686a12cbb3eb title: Component Differences with PWA Kit collection: developer version: current locale: en-us portal_url: https://docs.salesforce.com/developer/current/en-us/commerce-cloud/sfnext/guides/sfnext-pwa-components.md canonical_url: https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/sfnext-pwa-components.html source_site: developer.salesforce.com content_type: documentation content_hash: 58eab052a765b93599a241d94c06632f73975ccfd64723ad566b78e5a4e24d8e products: - Composable Storefront - Salesforce APIs --- # Component Differences with PWA Kit PWA Kit components are typically JavaScript + PropTypes with Chakra primitives and style props. Storefront Next components are TypeScript-first and generally composed from Radix/shadcn patterns with utility-class styling and CVA-based variants. The main shift is from runtime styling and theme objects to compile-time class composition and typed component contracts. ## Component Architecture | Aspect | PWA Kit | Storefront Next | | ----------------- | ---------------------- | -------------------------- | | Language | JavaScript + PropTypes | TypeScript | | Type Checking | Runtime (PropTypes) | Compile-time (TypeScript) | | Component Library | Chakra UI (runtime) | shadcn/ui (copied source) | | Styling Approach | CSS-in-JS (Emotion) | Utility classes (Tailwind) | | Variant System | Theme config | Class Variance Authority | | Primitives | Chakra components | Radix UI headless | ## Styling Comparison | Aspect | PWA Kit (Chakra) | Storefront Next (Tailwind) | | ---------------- | --------------------------------------- | --------------------------------------- | | Inline styles | `` | `
` | | Responsive | `display={{base: 'none', lg: 'block'}}` | `className="hidden lg:block"` | | Hover states | `_hover={{bg: 'blue.600'}}` | `className="hover:bg-blue-600"` | | Theme tokens | `color="gray.500"` | `className="text-gray-500"` | | Component styles | `useMultiStyleConfig('Button')` | `buttonVariants({ variant, size })` | | Style override | Props spread: `{...styles.container}` | Class merge: `cn(baseClass, className)` | ## Responsive Design Patterns PWA Kit: ```jsx // Object syntax for breakpoints // Array syntax (base, sm, md, lg, xl) // Hook-based const [isDesktop] = useMediaQuery('(min-width: 992px)') ``` Storefront Next: ```tsx // Breakpoint prefixes (mobile-first)
// Responsive grid
// JavaScript detection const isDesktop = typeof window !== 'undefined' && window.matchMedia('(min-width: 1024px)').matches; ``` ## Component Variants PWA Kit (Theme-based): ```jsx // In theme/components/button.js export default { baseStyle: {...}, variants: { solid: {...}, outline: {...}, }, sizes: { sm: {...}, md: {...}, } } // Usage ``` Storefront Next (CVA): ```tsx // In component file const buttonVariants = cva("base-classes", { variants: { variant: { solid: "...", outline: "..." }, size: { sm: "...", md: "..." }, }, }); // Usage ; ``` ## Key Similarities - Composition over inheritance: Both use functional components composed from primitives - Props passthrough: Both spread `...rest` props to underlying elements - Responsive-first: Both prioritize mobile-first responsive design - Variant systems: Both support component variants for consistent styling - Accessibility: Both build on accessible component foundations (Chakra/Radix) - HOC patterns: Both use HOCs for cross-cutting concerns (auth, suspense) ## Conversion Considerations Here are some tips for moving from Chakra to Tailwind. - Style props vs. Utility classes: Convert `padding="4"` to `className="p-4"`. - Theme tokens vs. Tailwind config: Map color/spacing scales. - useMultiStyleConfig vs. CVA: Convert component style objects to variant functions. - Responsive objects vs. breakpoint prefixes: Replace `{{base: 'x', lg: 'y'}}` with `"x lg:y"`. ## Component Library Conversion | Chakra Component | Storefront Next Equivalent | Notes | | ---------------------------- | ---------------------------------------------------- | ------------------------------------------------------------------- | | _Layout Primitives_ | | | | `Box` | `
` with Tailwind | Use `className="..."` for styling | | `Flex` | `
` | Add `flex-row`, `flex-col`, `gap-*` as needed | | `HStack` | `
` | Horizontal stack | | `VStack` | `
` | Vertical stack | | `Stack` | `
` | Use `flex-row` or `flex-col` | | `StackDivider` | `` (ui/separator) | Or use `divide-y`/`divide-x` classes | | `Center` | `
` | | | `Container` | `
` | | | `Grid` | `
` | Add `grid-cols-*`, `gap-*` | | `GridItem` | `
` | Use `col-span-*`, `row-span-*` | | `SimpleGrid` | `
` | | | `Wrap` | `
` | | | `WrapItem` | `
` | Direct child of flex-wrap | | `Spacer` | `
` | Or use `gap-*` on parent | | `AspectRatio` | `` (ui/aspect-ratio) | Radix-based | | `Divider` | `` (ui/separator) | Radix-based | | **Typography** | | | | `Text` | `

`, `` with Tailwind | Use `text-*`, `font-*` classes | | `Heading` | `

`-`

` with Tailwind | Use `text-*`, `font-bold` | | **Buttons & Links** | | | | `Button` | `