# Gray UI CRM

> Open-source CRM data grid and interface template built with Next.js and shadcn/ui

An open-source CRM frontend showcase built using Next.js App Router, Tailwind CSS, and shadcn/ui primitives. It provides a preconfigured data grid architecture with inline editing, slide-over detail drawers, and task management using local mock data. It is designed as a practical reference implementation for developers building complex SaaS table interfaces.

Website: https://github.com/Jason-uxui/gray-ui-crm

## What it is for

- Bootstrap a custom CRM or B2B SaaS dashboard interface
- Implement complex data tables with column toggling, sorting, and inline editing
- Study modular component architecture combining shadcn/ui and Next.js App Router

## Features

- Configurable data grid with sorting, filtering, and summary totals
- Inline editable table cells with keyboard shortcuts
- Slide-over record drawer with entity details and tab navigation
- Task board integration with drag-and-drop interactions via dnd-kit
- Column visibility controls via dedicated options dropdown
- Built-in mock data for offline local development out of the box
- TypeScript-first codebase on Next.js 16 and React 19

## Pricing

Open source. Free and open source (MIT license)

## Details

- Type: GitHub repo
- Category: [Development](https://xiry.app/topics/development.md)
- Topic: [UI Components](https://xiry.app/topics/development/ui-components.md)
- Open source: yes
- Platforms: Web, Self-hosted
- For: Frontend developers and UI/UX designers building B2B dashboards and CRM tools.
- Alternative to: Attio, HubSpot CRM
- Tags: nextjs, shadcn ui, crm, datagrid, tailwind, react, typescript

## Why it was saved

- [@JasonUXUI, 4 March 2026](https://x.com/JasonUXUI/status/2029195163835449631): A full, polished CRM table implementation to inspect, reuse or install: data table interactions, record slide-over panel, tasks tab, inline editing — from a product design engineer's studio.

## Related

- [shadcn/ui](https://xiry.app/resources/shadcn-ui-1902): Copy-paste React UI components built with Tailwind CSS and Radix primitives. (Website, Open source)
- [Efferd](https://xiry.app/resources/efferd): Pre-built, responsive shadcn/ui blocks and layouts for React applications (Web app, Freemium)
- [Motion](https://xiry.app/resources/motion): Open-source animation library for React, Vue, and vanilla JavaScript (Website, Freemium)
- [React Bits](https://xiry.app/resources/react-bits): Open-source animated and interactive React UI components and backgrounds (Website, Freemium)
- [21st.dev](https://xiry.app/resources/21st-dev): Curated directory of crafted React, Tailwind, and shadcn UI components. (Website, Freemium)
- [lucide-animated](https://xiry.app/resources/lucide-animated): Open-source animated React icons built with Lucide and Motion (Web app, Open source)

Updated 10 October 2026. Page: https://xiry.app/resources/gray-ui-crm

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.