{"id":21368,"library":"ga-ui-components","title":"GA UI Components","description":"A React component library at version 0.0.77-alpha, built on Radix UI primitives and Tailwind CSS. Provides accessible, unstyled UI building blocks including dialogs, dropdowns, forms, tables, and tooltips. Integrates with react-hook-form and @tanstack/react-table. Currently in early alpha with frequent releases; no stable API guarantees. Differentiated by deep integration with react-hook-form and Radix accessibility.","status":"active","version":"0.0.77-alpha","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","typescript"],"install":[{"cmd":"npm install ga-ui-components","lang":"bash","label":"npm"},{"cmd":"yarn add ga-ui-components","lang":"bash","label":"yarn"},{"cmd":"pnpm add ga-ui-components","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for form validation with react-hook-form","package":"@hookform/resolvers","optional":true},{"reason":"Peer dependency for Avatar component","package":"@radix-ui/react-avatar","optional":false},{"reason":"Peer dependency for Checkbox component","package":"@radix-ui/react-checkbox","optional":false},{"reason":"Peer dependency for Collapsible component","package":"@radix-ui/react-collapsible","optional":false},{"reason":"Peer dependency for Dialog component","package":"@radix-ui/react-dialog","optional":false},{"reason":"Peer dependency for DropdownMenu component","package":"@radix-ui/react-dropdown-menu","optional":false},{"reason":"Peer dependency for icon usage","package":"@radix-ui/react-icons","optional":false},{"reason":"Peer dependency for Label component","package":"@radix-ui/react-label","optional":false},{"reason":"Peer dependency for Popover component","package":"@radix-ui/react-popover","optional":false},{"reason":"Peer dependency for RadioGroup component","package":"@radix-ui/react-radio-group","optional":false},{"reason":"Peer dependency for Select component","package":"@radix-ui/react-select","optional":false},{"reason":"Peer dependency for Separator component","package":"@radix-ui/react-separator","optional":false},{"reason":"Peer dependency for Slot component","package":"@radix-ui/react-slot","optional":false},{"reason":"Peer dependency for Tabs component","package":"@radix-ui/react-tabs","optional":false},{"reason":"Peer dependency for Tooltip component","package":"@radix-ui/react-tooltip","optional":false},{"reason":"Peer dependency for Table component","package":"@tanstack/react-table","optional":true},{"reason":"Required for CSS variant management","package":"class-variance-authority","optional":false},{"reason":"Utility for conditional classNames","package":"clsx","optional":false},{"reason":"Peer dependency for Command component","package":"cmdk","optional":true},{"reason":"Peer dependency for icons","package":"lucide-react","optional":false},{"reason":"Peer dependency","package":"react","optional":false},{"reason":"Peer dependency for DatePicker component","package":"react-day-picker","optional":true},{"reason":"Peer dependency","package":"react-dom","optional":false},{"reason":"Peer dependency for form components","package":"react-hook-form","optional":false},{"reason":"Peer dependency for routing components","package":"react-router-dom","optional":true},{"reason":"Utility for merging Tailwind classes","package":"tailwind-merge","optional":false},{"reason":"Peer dependency for animation utilities","package":"tailwindcss-animate","optional":false}],"imports":[{"note":"ESM only; CommonJS require not supported. Single entry point.","wrong":"const Button = require('ga-ui-components').Button","symbol":"Button","correct":"import { Button } from 'ga-ui-components'"},{"note":"All components are named exports from the main index.","symbol":"Dialog","correct":"import { Dialog } from 'ga-ui-components'"},{"note":"React Hook Form integration; use with useFormContext.","symbol":"FormField","correct":"import { FormField } from 'ga-ui-components'"},{"note":"Wraps @tanstack/react-table; columns and data props required.","symbol":"DataTable","correct":"import { DataTable } from 'ga-ui-components'"}],"quickstart":{"code":"import { Button } from 'ga-ui-components';\n\nexport default function App() {\n  return (\n    <div className=\"p-4\">\n      <h1>Hello GA UI</h1>\n      <Button onClick={() => alert('Clicked')}>Click me</Button>\n    </div>\n  );\n}","lang":"typescript","description":"Renders a simple button component to verify the library is installed and working."},"warnings":[{"fix":"Pin exact version and test upgrades.","message":"The library is in alpha (0.0.x) and exports may change without notice.","severity":"breaking","affected_versions":">=0.0.0"},{"fix":"Ensure Tailwind and tailwindcss-animate are installed and configured.","message":"All components require Tailwind CSS to be configured; no standard CSS is emitted.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Use a bundler that supports ESM (e.g., Vite, Next.js, Webpack with ESM).","message":"ESM-only package; does not provide CommonJS bundles.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Install missing Radix packages listed in peer dependencies.","message":"Many components are wrappers around @radix-ui primitives; refer to Radix documentation for props.","severity":"gotcha","affected_versions":">=0.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Run npm install ga-ui-components","cause":"Package not installed or not added to dependencies.","error":"Module not found: Error: Can't resolve 'ga-ui-components'"},{"fix":"Add \"type\": \"module\" in package.json or use .mjs extension.","cause":"Using ESM import in a CommonJS environment.","error":"Cannot use import statement outside a module"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}