npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

@glideapps/glide-ui

v2.8.0

Published

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 ser

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Maintainers

jassmith87jassmith87sr-glidesr-glidemark.probstmark.probstdvdsgldvdsgldjp_glidedjp_glidegurmen-glidegurmen-glidetimwellswatimwellswaebinaboebinabochristian.giordano.glidechristian.giordano.glidebenipsenbenipsenedgarlr-glideedgarlr-glidemaurimura7maurimura7ivoelbertivoelbertmarcel-at-glidemarcel-at-glidetristanlabbetristanlabberdaiglerdaiglesimonfl3tch3rsimonfl3tch3ralvaroatglidealvaroatglidebradletbradletsecondfretsecondfretshayfrendtshayfrendtcaitlevincaitlevinlasaglidelasaglidejustburnsjustburnsatc-serviceatc-servicekarldreher-glidekarldreher-glidefcostantinifcostantiniterrenceglideterrenceglidegdelucagdelucafmcurtifmcurtimatthewnaikmatthewnaikgbarngbarnanggriawanmranggriawanmrspereztorrealbaspereztorrealba

Keywords

Readme

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

Installation

npm install @glide/glide-ui

CDN Usage

You can load glide-ui directly via <script> and <link> tags from the Fling CDN without npm.

Quick Start

Copy-paste this HTML file to get started:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Glide UI CDN Example</title>
    <link
      rel="stylesheet"
      href="https://glide-ui.flingit.run/latest/index.css"
    />
    <!-- Optional: apply a theme -->
    <!-- <link rel="stylesheet" href="https://glide-ui.flingit.run/latest/industrial.css" /> -->
    <script type="importmap">
      {
        "imports": {
          "react": "https://esm.sh/react@19",
          "react-dom": "https://esm.sh/react-dom@19",
          "react-dom/client": "https://esm.sh/react-dom@19/client",
          "react/jsx-runtime": "https://esm.sh/react@19/jsx-runtime",
          "react-router": "https://esm.sh/react-router@7",
          "maplibre-gl": "https://esm.sh/maplibre-gl@5?bundle",
          "@glide/glide-ui/": "https://glide-ui.flingit.run/latest/"
        }
      }
    </script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script>
      Babel.registerPreset("tsx", {
        presets: [
          [
            Babel.availablePresets.typescript,
            { isTSX: true, allExtensions: true },
          ],
          [Babel.availablePresets.react, {}],
        ],
      });
    </script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel" data-type="module" data-presets="tsx">
      import React, { useState } from "react";
      import { createRoot } from "react-dom/client";
      import { Button } from "@glide/glide-ui/button";

      // Full TypeScript supported — interfaces, generics, import type all work
      interface CounterProps {
        initial?: number;
      }

      function Counter({ initial = 0 }: CounterProps) {
        const [count, setCount] = useState<number>(initial);
        return (
          <Button onClick={() => setCount((c) => c + 1)}>
            Clicked {count} times
          </Button>
        );
      }

      createRoot(document.getElementById("root")).render(<Counter />);
    </script>
  </body>
</html>

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 <link> tag after the base CSS:

<link rel="stylesheet" href="https://glide-ui.flingit.run/latest/index.css" />
<link
  rel="stylesheet"
  href="https://glide-ui.flingit.run/latest/industrial.css"
/>

External Dependencies

The CDN bundle externalizes React, React DOM, React Router, and MapLibre GL. Load them via 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.

Getting Started

Import the CSS

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

// 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

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

Build

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

Testing

./scripts/test                    # Run tests via script (auto-installs Playwright browsers if needed)
./scripts/test <pattern>          # Run tests matching a specific pattern (e.g., "./scripts/test button" to run button tests)
./scripts/test <args...>         # 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

// 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

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 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 <script>/<link> tag usage

Both channels publish in parallel. Pull requests also publish canary builds to both GAR and the CDN.