# Glide UI Components

A modern, **SSR-ready** React component library built with TypeScript, Tailwind CSS, and Radix UI primitives. Features fully accessible, mobile-responsive components for building professional web applications. Compatible with Next.js, Remix, and other server-side rendering frameworks.

## Documentation

- 📚 **[Component Catalog](src/components/ALL_COMPONENTS.md)** - Complete list of all available components
- 🛠️ **[Development Guide](src/components/COMPONENT_DEVELOPMENT_GUIDE.md)** - Guidelines for creating new components

## Installation

```bash
npm install @glide/glide-ui
```

## Getting Started

### Import the CSS

To use the Glide UI components, you need to import the CSS file in your application's entry point:

```tsx
// In your main app file (e.g., App.tsx, main.tsx, or index.tsx)
import "@glide/glide-ui/index.css";
```

This CSS file includes:

- All Tailwind CSS utilities
- Custom theme variables and colors
- Typography styles
- Component-specific animations
- Light/dark mode support

### Development

```bash
npm install
npm run dev        # Start development server
npm run storybook  # View component documentation
```

### Build

```bash
npm run build     # Build the library
npm run preview   # Preview the build
npm run lint      # Run linting
```

## Quick Example

```tsx
// Import the CSS (typically in your app's entry point)
import "@glide/glide-ui/index.css";

// Import components as needed
import { Button } from "@glide/glide-ui/button";
import { Input } from "@glide/glide-ui/input";
import { Form } from "@glide/glide-ui/form";

function MyForm() {
  return (
    <Form onSubmit={handleSubmit}>
      <Input label="Email" type="email" required />
      <Button type="submit">Submit</Button>
    </Form>
  );
}
```

## Playground

Try out the Glide UI components and AI screen generation in our interactive playground:

🌐 **[Live Playground](https://glide-ui-785571128567.us-central1.run.app/)**

The playground allows you to:

- Generate complete React screens using natural language prompts
- See real-time code generation with Claude AI
- Explore component usage in a Remix environment
- Copy generated code for your own projects

See the [sandbox README](sandbox/README.md) for more details on running the playground locally.

## Stack

- **React 19** + **TypeScript** - Type-safe components
- **Tailwind CSS v4** - Utility-first styling
- **Radix UI** - Accessible component primitives
- **Vite** - Lightning-fast build tooling
- **Storybook** - Component documentation and testing

## Features

- ✅ **Fully Accessible** - WCAG 2.1 AA compliant
- 📱 **Mobile Responsive** - Touch-friendly with mobile-first design
- 🎨 **Customizable** - Tailwind-based theming with accent colors
- 🚀 **Tree-shakeable** - Import only what you need
- 📖 **Well Documented** - Comprehensive docs and examples
- 🧪 **Thoroughly Tested** - Unit tests with Vitest
- 🌐 **SSR Ready** - Full server-side rendering support for Next.js, Remix, and other SSR frameworks
- 🧭 **Accessible Page Headers** - `ScreenTitle` requires an explicit `title` prop for clear page context

## Publishing

This library is automatically published to NPM when the version in `package.json` is updated and merged to the `main` branch. The CI/CD pipeline handles the release process automatically.
