All templates
Pro
Relay
A complete CRM workspace with a companies table, company records, contacts, a drag and drop deals pipeline and a linked inbox, all on one shared state model.
- Template
- Arc CRM
- Screens
- 5
- Themes
- Light and dark
- Layout
- Responsive to 320 px
Relay
Screens
Pick a screen to open it in the live preview.
Brand
The colours and type Relay is set in. Swap them for your own.
- Palette
- Relay blue
#2F5FEA - Ink
#1B1D22 - Slate
#5E626B - Sidebar
#F8F9FA - Paper
#FFFFFF
- Relay blue
- Type
- Inter
What you get
- A companies table with real logos, a sticky first column, sorting, filter chips, saved views, inline stage and owner edits, and bulk actions on selected rows
- Company records with editable attributes, an activity timeline grouped by day, and a note composer that slides new notes into the timeline
- A deals board with pointer drag and drop, a lifted card and drop placeholder, totals that count as cards move, and a weighted forecast strip
- A three pane inbox where threads link to companies and replies are logged on the record
- One shared state model, so a stage change on a record moves its deal on the board
- A command palette on Command K, new company and new deal dialogs, keyboard shortcuts, toasts, and tuned light and dark themes
Built with
- Next.js 16
- React 19
- TypeScript
- CSS Modules
- Motion
- Radix UI
Install Arc CRM
The source comes with Arc Pro, yearly or lifetime. Install it through the Pro registry and it lands in your project as plain files you own.
Create a Pro token
With Arc Pro, create a token on your account page and set it as
ARC_PRO_TOKENin.env.local.Add the Pro registry
Add
@uiarc-proto the registries incomponents.json.{ "registries": { "@uiarc-pro": { "url": "https://uiarc.dev/r/pro/{name}.json", "headers": { "Authorization": "Bearer ${ARC_PRO_TOKEN}" } } } }Install the template
The CLI adds the template, the Arc components and blocks it uses, and their dependencies.
npx shadcn@latest add @uiarc-pro/arc-crm