Salesforce Lightning
SLDS2 UI Kit
8 screens ยท Tailwind CSS ยท React ยท SLDS2

CRM Admin Pages

High-fidelity interactive pages built on the Salesforce Lightning Design System 2. Each page is standalone and fully navigable. Click any card to open it.

๐Ÿ“Š
Dashboard
Home Dashboard 01

KPI tiles, pipeline funnel, opportunities, activity feed, tasks, team quota

KPIs Charts Activity
{[...Array(4)].map((_,i)=>`
`).join("")}
๐Ÿข
Accounts
Accounts List 02

Sortable data table with search, filters, multi-select, list & kanban views

Table Kanban Filters
๐Ÿ“‹
Account Record
Account Record 03

Full record detail: page header, tabs, inline edit, related lists, activity

Record Tabs Edit
๐Ÿ‘ฅ
Contacts
Contacts List 04

Contact table with avatars, department badges, status, bulk actions

Avatars Table Bulk
๐Ÿ“ˆ
Opportunities
Opportunities List 05

Pipeline table + kanban board, stage filters, probability bars, totals

Pipeline Kanban Stages
๐ŸŽฏ
Opp. Record
Opportunity Record 06

Stage path progress bar, contact roles, activity timeline, inline edit

Stage Path Timeline Roles
๐ŸŽง
Cases
Cases Queue 07

Service case queue with priority badges, age indicator, status filters

Queue Priority SLA
๐Ÿ“Š
Reports
Reports & Analytics 08

Dashboards with bar/donut charts, rep leaderboard, report browser

Charts Donut Leaderboard

Design Tokens

Brand

Blue 60 โ€” Brand
Blue 50 โ€” Hover
Navy โ€” Dark
Indigo โ€” AI

Status

Success #2e844a
Error #ea001e
Warning #dd7a01
Info #107cad

Neutrals

f3โ†’e5โ†’c9โ†’75โ†’5cโ†’2e

Radius

Button 5px
Card 20px
Badge pill

Typography

Display
Heading
Body text
Label / small
EYEBROW
Salesforce Lightning Design System 2 ยท Community Figma ยท SLDS2
Built with Tailwind CSS ยท React 18 ยท SLDS2 tokens