> **Meta**: UI component library for OneCoach. React/React Native compatible using Radix UI, Tailwind CSS, and design tokens.
Sign in to like and favorite skills
Meta: UI component library for OneCoach. React/React Native compatible using Radix UI, Tailwind CSS, and design tokens.
| Attribute | Value |
|---|---|
| Monorepo | |
| Styling | Tailwind CSS v4 |
| Components | Radix UI primitives |
| Icons | Lucide React |
| Animations | Framer Motion |
submodules/onecoach-ui/ ├── packages/ │ ├── ui/ # @onecoach/ui - Component library │ ├── hooks/ # @onecoach/hooks - Shared React hooks │ ├── design-system/ # Design system integration │ └── lib-design-system/ # @onecoach/lib-design-system - Tokens ├── package.json └── pnpm-workspace.yaml
@onecoach/uipackages/uiMain component library:
src/components/src/index.ts@onecoach/hookspackages/hooksShared React hooks:
@onecoach/lib-design-systempackages/lib-design-systemDesign tokens & theme:
// ✅ Use design tokens className = 'bg-primary text-primary-foreground'; // ❌ Never hardcode values className = 'bg-[#1a1a1a]';
@onecoach/lib-design-systemdark:packages/ui/src/components/import { cva } from 'class-variance-authority'; const buttonVariants = cva('inline-flex items-center justify-center rounded-md', { variants: { variant: { default: 'bg-primary text-primary-foreground', outline: 'border border-input bg-background', }, size: { default: 'h-10 px-4 py-2', sm: 'h-9 px-3', lg: 'h-11 px-8', }, }, defaultVariants: { variant: 'default', size: 'default', }, });
| Task | Location |
|---|---|
| Add component | |
| Add hook | |
| Modify tokens | |
| Check exports | |
| Layer | Technology |
|---|---|
| Framework | React 19 / React Native |
| Language | TypeScript |
| Styling | Tailwind CSS v4 |
| Icons | Lucide React |
| Motion | Framer Motion |
| Build | Turborepo / pnpm workspaces |