Gray UI CRM
gray-ui-crm.vercel.app- Category
- Productivity
- Rank
- No. 1515Tools index
- Pricing
- Open Source
- Platform
- web
- Type
- APP
- Builder
- @Jason-uxui
- GitHub
- 89 stars
- Date
About
A customer relationship management system with a clean gray interface for managing companies, contacts, and business opportunities. Built as a UI showcase demonstrating modern CRM functionality with shadcn/ui components.
What it does
A runnable front-end reference for account work. Users browse company records, edit table cells, inspect linked people and opportunities, follow activity, and move generated account tasks through workflow states. Mock records supply the experience immediately, while browser session storage preserves task changes during a session.
Why it's ranked here
Worth studying for its focused interaction model and reusable table architecture. It covers list management, record detail, activity context, and task progression in one coherent demonstration. Its value is primarily instructional because the supplied data and persistence remain local.
What's good
The configurable grid supports sorting, filtering, column control, and inline editing. Detail workspaces connect companies with owners, contacts, opportunities, timelines, notes, files, email, calendar items, and tasks. Task states cover active work, review, blockers, planned work, and completion.
Tradeoffs
This is not a production CRM backend. Company, contact, opportunity, and workspace content comes from fixed mock records. Task edits live only in browser session storage. The repository text shows no authentication, shared database, external service synchronization, or durable multi-user persistence.
How to use it well
Use it as a reference implementation, interaction prototype, or starting point for a TypeScript CRM front end. It suits teams evaluating table and account-workspace patterns. Add a real data layer, authorization, validation, integrations, and durable persistence before treating it as an operational system of record.
Technical notes+
app/page.tsx redirects the root route to /companies. package.json defines a private Next.js 16 and React 19 application, managed with pnpm, with development, build, start, lint, and TypeScript checking scripts. lib/company-tasks.ts derives task cards from company, person, and opportunity mock records. lib/company-task-session-store.ts validates serialized task payloads and stores per-company changes in window.sessionStorage. lib/company-detail-workspace-data.ts supplies typed tabs and fixed timeline, note, file, email, and calendar content. next.config.ts permits remote images only from images.unsplash.com.
Observed
- License
- MIT License
- Primary language
- TypeScript
- Packaging
- Private pnpm package
- Install surface
- Requires Node.js 20+ and pnpm 10+
- Interface
- Next.js App Router web application
- Persistence
- Mock in-memory records plus browser session storage for company tasks
- UI stack
- React 19, Tailwind CSS 4, shadcn/ui, Base UI, and dnd-kit
Read from README.md, package.json, lib/utils.ts, lib/people.ts, lib/companies.ts, lib/company-tasks.ts, lib/opportunities.ts, lib/company-task-session-store.ts, lib/company-detail-workspace-data.ts, next.config.ts, eslint.config.mjs, postcss.config.mjs, app/page.tsx, app/layout.tsx, components/example.tsx.
What it can do
Manage company profiles
Company information (name, address, industry, etc.) → Organized company database records
Store and organize contact information
Contact details (names, emails, phone numbers, roles) → Searchable contact database
Track business opportunities
Deal information (value, stage, probability, timeline) → Opportunity pipeline with status tracking
Link contacts to companies
Contact and company selection → Associated contact-company relationships
Monitor deal progress
Opportunity status updates → Visual pipeline stages and progress indicators
Search and filter records
Search queries and filter criteria → Filtered lists of companies, contacts, or opportunities
Tags
Tech Stack
Media
Comments (0)
No comments yet
Editorially curated, with community endorsements as a secondary signal. Corrections welcome.