GA UI Components

0.0.77-alpha verified Mon Apr 27 auth: no javascript

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.

Common errors

error Module not found: Error: Can't resolve 'ga-ui-components' ↓

cause Package not installed or not added to dependencies.

fix

Run npm install ga-ui-components

error Cannot use import statement outside a module ↓

cause Using ESM import in a CommonJS environment.

fix

Add "type": "module" in package.json or use .mjs extension.

Warnings

breaking The library is in alpha (0.0.x) and exports may change without notice. ↓

fix Pin exact version and test upgrades.

gotcha All components require Tailwind CSS to be configured; no standard CSS is emitted. ↓

fix Ensure Tailwind and tailwindcss-animate are installed and configured.

gotcha ESM-only package; does not provide CommonJS bundles. ↓

fix Use a bundler that supports ESM (e.g., Vite, Next.js, Webpack with ESM).

gotcha Many components are wrappers around @radix-ui primitives; refer to Radix documentation for props. ↓

fix Install missing Radix packages listed in peer dependencies.

Install

npm install ga-ui-components

yarn add ga-ui-components

pnpm add ga-ui-components

Imports

Button

wrong

const Button = require('ga-ui-components').Button

correct

import { Button } from 'ga-ui-components'

ESM only; CommonJS require not supported. Single entry point.

Dialog
```
import { Dialog } from 'ga-ui-components'
```
All components are named exports from the main index.
FormField
```
import { FormField } from 'ga-ui-components'
```
React Hook Form integration; use with useFormContext.
DataTable
```
import { DataTable } from 'ga-ui-components'
```
Wraps @tanstack/react-table; columns and data props required.

Quickstart

Renders a simple button component to verify the library is installed and working.

import { Button } from 'ga-ui-components';

export default function App() {
  return (
    <div className="p-4">
      <h1>Hello GA UI</h1>
      <Button onClick={() => alert('Clicked')}>Click me</Button>
    </div>
  );
}