Introducing GridX: Classgrid's Official UI Component Library

Today, we are thrilled to announce a major leap forward in our frontend engineering architecture: the official release of GridX (@classgrid/gridx).

GridX UI

As our ecosystem continues to grow, maintaining a cohesive design system by manually copying and pasting component files was no longer a scalable solution. We needed a centralized, enterprise-grade architecture. So, we built one from the ground up.

GridX is our proprietary, fully decoupled, standalone React UI library, now published directly to the NPM registry. It encapsulates our entire design language, leveraging modern Radix primitives, gorgeous micro-animations, and strict TypeScript definitions.

What does this mean for our development speed?

• Instant Cross-Project Consistency: A button in one app now looks and behaves exactly like a button in another.
• Zero Configuration: No more messy local component folders. Just install and import.

️ Getting Started

Using GridX is as simple as installing any standard React package. In your terminal, run:

npm install @classgrid/gridx

Because GridX is pre-compiled, your repository stays perfectly clean. You can import any of our 100+ highly-styled components directly:

import { Button, ImageCropperModal } from "@classgrid/gridx";

export default function ProfileUpload() {
  return (
    <div className="p-8">
      <Button variant="default">Open Cropper</Button>
      <ImageCropperModal isOpen={true} />
    </div>
  );
}