# 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 ``` ## CDN Usage You can load glide-ui directly via `

``` ### CDN URLs **Latest version (always points to the most recent release):** ``` https://glide-ui.flingit.run/latest/glide-ui.js # JS bundle (ES module) https://glide-ui.flingit.run/latest/index.css # Base CSS https://glide-ui.flingit.run/latest/industrial.css # Industrial theme https://glide-ui.flingit.run/latest/smooth.css # Smooth theme ``` **Pinned version (recommended for production):** ``` https://glide-ui.flingit.run/v0.0.372/glide-ui.js https://glide-ui.flingit.run/v0.0.372/index.css https://glide-ui.flingit.run/v0.0.372/industrial.css https://glide-ui.flingit.run/v0.0.372/smooth.css ``` ### Themes Load a theme by adding a `` tag after the base CSS: ```html ``` ### External Dependencies The CDN bundle externalizes React, React DOM, React Router, and MapLibre GL. Load them via [esm.sh](https://esm.sh) import maps as shown in the quick start example above. ### Canary Versions Every pull request publishes a canary build to the CDN. The canary version format is `v{version}-canary.{sha7}` (e.g., `v0.0.372-canary.abc1234`). Check the PR comments for exact URLs. ### Dashboard View published versions at the [Fling CDN dashboard](https://glide-ui.flingit.run). ## 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 ``` ### Testing ```bash ./scripts/test # Run tests via script (auto-installs Playwright browsers if needed) ./scripts/test # Run tests matching a specific pattern (e.g., "./scripts/test button" to run button tests) ./scripts/test # Pass any arguments through to vitest (e.g., "./scripts/test --reporter=verbose button") npm run test:ui # Run tests with UI npm run test:coverage # Run tests with coverage npm run test:ssr # Run SSR-specific tests ``` Tests are configured to run in parallel across all available CPU cores for maximum performance. The test suite includes: - **Unit tests** - Component tests running in jsdom environment - **SSR tests** - Server-side rendering tests in Node environment - **Storybook tests** - Browser-based visual regression tests ## 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 ( ); } ``` ## 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 when the version in `package.json` is updated and merged to the `main` branch: - **Google Artifact Registry (GAR)** — npm package for `@glide/glide-ui` - **Fling CDN** — JS + CSS bundles at `glide-ui.flingit.run` for `