feat(docs): add data attribute in list of differences

Author: mrzachnugent

apps/docs/content/docs/index.mdx

@@ -20,13 +20,14 @@ Built with familiar tools and libraries, it follows consistent styling, structur
 
 ## Key differences from shadcn/ui
 
-- <a href='https://www.nativewind.dev' target='_blank' rel='noreferrer' className='font-medium underline underline-offset-4 decoration-fd-muted-foreground/0 hover:decoration-fd-muted-foreground'>Nativewind</a>: React Native Reusables integrates with Nativewind for utility-first styling on native, providing a Tailwind-like experience adapted for React Native.
-- <a href='https://rnprimitives.com' target='_blank' rel='noreferrer' className='font-medium underline underline-offset-4 decoration-fd-muted-foreground/0 hover:decoration-fd-muted-foreground'>RN Primitives</a>: A universal port of Radix UI primitives for React Native with an almost identical API, enabling consistent composition on native platforms.
-- <span className='font-medium'>Portals</span>: React Native doesn't support DOM portals. Components like modals, dropdowns, and toasts require a `PortalHost`.
-- <span className='font-medium'>No cascading styles</span>: Child elements like `Text` can't inherit styles from a parent class. Each element must be styled directly. (We use a small [workaround](/docs/components/text#inheritance-system) for `Text`.) 
-- <a href='https://docs.swmansion.com/react-native-reanimated' target='_blank' rel='noreferrer' className='font-medium underline underline-offset-4 decoration-fd-muted-foreground/0 hover:decoration-fd-muted-foreground'>Reanimated</a>: Uses `react-native-reanimated` for smooth, native performance.
-- <span className='font-medium'>Icons</span>: Uses a wrapper component in combination with a <a href='https://lucide.dev/guide/packages/lucide-react-native' target='_blank' rel='noreferrer' className='underline underline-offset-4 decoration-fd-muted-foreground/0 hover:decoration-fd-muted-foreground'>Lucide icon</a> to avoid wrapping every imported icon individually (e.g. `<Icon as={LeftArrowIcon} />`).
-- <span className='font-medium'>Programmatic control</span>: Some components, such as `DropdownMenu`, can't be controlled with `open` or `onOpenChange` props. Instead, you use a `ref` to manage open and close behavior after layout calculation.
+- <a href='https://www.nativewind.dev' target='_blank' rel='noreferrer' className='font-medium underline underline-offset-4 decoration-fd-muted-foreground/0 hover:decoration-fd-muted-foreground'>Nativewind:</a> React Native Reusables integrates with Nativewind for utility-first styling on native, providing a Tailwind-like experience adapted for React Native.
+- <a href='https://rnprimitives.com' target='_blank' rel='noreferrer' className='font-medium underline underline-offset-4 decoration-fd-muted-foreground/0 hover:decoration-fd-muted-foreground'>RN Primitives:</a> A universal port of Radix UI primitives for React Native with an almost identical API, enabling consistent composition on native platforms.
+- <span className='font-medium'>Portals:</span> React Native doesn't support DOM portals. Components like modals, dropdowns, and toasts require a `PortalHost`.
+- <span className='font-medium'>No cascading styles:</span> Child elements like `Text` can't inherit styles from a parent class. Each element must be styled directly. (We use a small [workaround](/docs/components/text#inheritance-system) for `Text`.) 
+- <span className='font-medium'>No data attributes:</span> React Native doesn't support data-* attributes, so variants rely on props or state. On the web, data-* attributes work when using HTML elements.
+- <a href='https://docs.swmansion.com/react-native-reanimated' target='_blank' rel='noreferrer' className='font-medium underline underline-offset-4 decoration-fd-muted-foreground/0 hover:decoration-fd-muted-foreground'>Reanimated:</a> Uses `react-native-reanimated` for smooth, native performance.
+- <span className='font-medium'>Icons:</span> Uses a wrapper component in combination with a <a href='https://lucide.dev/guide/packages/lucide-react-native' target='_blank' rel='noreferrer' className='underline underline-offset-4 decoration-fd-muted-foreground/0 hover:decoration-fd-muted-foreground'>Lucide icon</a> to avoid wrapping every imported icon individually (e.g. `<Icon as={LeftArrowIcon} />`).
+- <span className='font-medium'>Programmatic control:</span> Some components, such as `DropdownMenu`, can't be controlled with `open` or `onOpenChange` props. Instead, you use a `ref` to manage open and close behavior after layout calculation.
 
 <div className='h-2' />