Skip to content
UI
Star31
Ready for Salesforce Multi-Framework

Build React apps styled in
Salesforce's theme

Wisty UI is a shadcn/ui registry of 87 Salesforce-styled components and blocks.
Add them with the shadcn CLI, or have your coding agent add them over MCP.

Browse components
Connect your agent

An account page, in Salesforce's themes

Account

Edge Communications

Type
Customer - Direct
Phone
(512) 757-6000
Website
www.edgecomm.example
Account Owner
Ellen Hart
Industry
Electronics
Opportunities (4)
Edge Emergency Generator
Stage:
Id. Decision Makers
Amount:
$75,000.00
Close Date:
Nov 20, 2026
Edge Installation
Stage:
Closed Won
Amount:
$50,000.00
Close Date:
May 28, 2026
Edge SLA
Stage:
Closed Won
Amount:
$60,000.00
Close Date:
Mar 12, 2026
Edge Standby Generator
Stage:
Closed Lost
Amount:
$40,000.00
Close Date:
Feb 20, 2026
View All Opportunities
Cases and satisfaction by month
This year
Account health
Usage, cases and renewal
72At risk
Health score

Open pipeline

$75K

+25% vs last year

Closed won

$110K

+15.8% vs last year

Win rate

67%

+16.7 pts vs last year

Open cases

2

−33.3% vs last year

Activity

Charts that look like Salesforce

Bar, line, donut, funnel and waterfall in SLDS colors and number formats.

All 12 chart types
Sales performance
Q3 FY2027 against Q2, by week
Open pipeline, This quarter and Last quarter
This quarterOpen pipelineLast quarter
Week of Jul 7$9.8M$9.4M, Week of Apr 7
Week of Jul 14$10.1M$9.6M, Week of Apr 14
Week of Jul 21$10.4M$9.5M, Week of Apr 21
Week of Jul 28$10.2M$9.9M, Week of Apr 28
Week of Aug 4$10.9M$10.2M, Week of May 5
Week of Aug 11$11.3M$10M, Week of May 12
Week of Aug 18$11.1M$10.4M, Week of May 19
Week of Aug 25$11.6M$10.6M, Week of May 26
Week of Sep 1$11.9M$10.5M, Week of Jun 2
Week of Sep 8$12.2M$10.8M, Week of Jun 9
Week of Sep 15$12M$11M, Week of Jun 16
Week of Sep 22$12.3M$10.9M, Week of Jun 23
Week of Sep 29$12.5M$11M, Week of Jun 30
Campaigns by source
This year
Opportunities by stage
This quarter

Opportunities: 325

Stage
  • Prospecting: 120 (37%)
  • Qualification: 90 (28%)
  • Proposal/Price Quote: 60 (18%)
  • Negotiation/Review: 35 (11%)
  • Closed Won: 20 (6%)
Cash flow
This quarter, USD
Running total of closed won by week
Last quarter, USD
Sales and open opportunities by month
This year
49shadcn componentsEvery shadcn component, restyled. Same names, props and variants.12Chart typesColumn, combo, funnel and donut, all from the one chart component.27New componentsWhat Salesforce has and shadcn lacks: lookup, path, data table, gauge.11BlocksRecord pages and list views, over sample data.

One command copies the component into your project.

After that it's an ordinary file in your repo, and Wisty UI isn't a dependency.

How installation works

  1. Pick a component

    Like the path, which shows where a record stands.

  2. your-app

    npx shadcn@latest add @wisty/path

    • Checking registry.
    • Created components/wisty/path.tsx

    Install it

    The CLI writes components/wisty/path.tsx.

  3. components/wisty/path.tsx+2−2
    <span data-slot="path-stage" …>−  <CheckIcon+  <TrophyIcon    className="inline-flex size-4"    aria-hidden="true"  />

    Edit the file

    Swap the check for your own icon.

Let your agent search and install components

Add ui.wisty.ai/mcp to your agent

  1. You ask

    “Create a sortable table of open opportunities”

  2. It searches

    Search by component description and docs to pick the right one

  3. It installs

    The CLI copies the component as editable source code to your project

Connect your agent

Before you install

For Salesforce developers moving to React, and React developers building Salesforce-looking apps.

Read the docs
I'm used to Lightning Web Components. What's this?

Wisty UI is a collection of React components that looks like the Salesforce Lightning Design System. You can use them to quickly build native-looking Salesforce Multi-Framework apps, or other React apps.

How is it different from Lightning base components?

Lightning base component is Salesforce's code that you can use but not modify. A Wisty UI component is a fully editable file in your project that you (or your agent) can change as you like.

Do I need to know shadcn/ui or Tailwind CSS?

Not really. shadcn/ui is the open-source framework and CLI that copies each component into your app as a plain React file with Tailwind classes. Your agent can run it for you. Your project needs Tailwind.

My app already uses shadcn components. Will it break?

Probably not. File names, exports, props and variant names match stock shadcn. Most changes are styling. Some components add variants, and some carry small behavior fixes or patches to more closely match SLDS behaviour. It works with Radix or Base UI.

How can my coding agent use it?

Connect it to ui.wisty.ai/mcp. It can search the components, read when to use each one, and install what fits. It's free, with no login or API key.

Which themes are there? Is there dark mode?

Wisty UI ships Cosmos, the SLDS 2 theme, in light and dark mode, the original SLDS Lightning Blue theme, and Neutral, shadcn's default look. Set your own brand colors with CSS variables.

Is it free?

Yes. Wisty UI is free for personal and commercial use under the MIT license.

Is Wisty UI made by Salesforce?

No. Wisty UI is made by Magnus at Wisty Labs. It follows Salesforce's design system, but Salesforce doesn't make, sponsor or endorse it.

Browse components