tamagui-component

Create Tamagui components by importing from @hounii/ui wrappers, organizing them across atoms, molecules, and organisms following Atomic Design. Apply design tokens for colors and spacing, ensure theme compatibility for light/dark modes, and use built-in media queries for cross-platform responsiveness.

Atomic Design structures components from atoms (basic building blocks) through molecules and organisms to templates. This hierarchy promotes reusability, maintainability, and consistency—especially important when building theme-aware components that must scale across multiple platforms.

Yes. Tamagui design tokens enforce theme compatibility automatically. Apply tokens for all styling—colors, spacing, typography—and they adapt across light/dark modes without manual conditional logic, ensuring consistent branding across web and native platforms.

Import exclusively from @hounii/ui internal wrappers rather than Tamagui directly. These wrappers enforce design token usage, Atomic Design rules, and theme configuration consistency across atoms, molecules, organisms, and templates in packages/ui.

Skipping design tokens breaks theme compatibility, prevents light/dark mode switching, and creates maintenance friction across web and React Native targets. Design tokens ensure components stay in sync with the Hounii design system and respond to global theme changes.

Yes. Tamagui components using design tokens and responsive media queries adapt seamlessly across web, iOS, and Android. The Atomic Design structure and token system ensure consistent rendering and styling across all platforms.