Style Your React Apps

React apps don’t currently support Lightning base components and lightning/* modules, so they don’t provide built-in Salesforce Lightning Design System (SLDS) styling. With React apps, there are several ways to match the Salesforce look-and-feel.

Apply SLDS blueprints
Import SLDS for React from @salesforce/design-system-react

Alternatively, use shadcn to create building blocks that you can customize via Tailwind CSS based on your requirements.

The styling examples in the Multi-framework recipes repo demonstrate how to use SLDS blueprints, SLDS for React, and shadcn components.

Tip

Apply SLDS Blueprints

To create UI components that match the Salesforce look-and-feel, use the SLDS blueprint for the component. For example, if you’re creating a button, apply the SLDS button blueprint in your app. Unlike Lightning base components, you control the markup for your UI components but don’t get the latest SLDS updates automatically.

1<section>
2  <div className="flex flex-wrap gap-2">
3    <button className="slds-button slds-button_neutral">Neutral</button>
4    <button className="slds-button slds-button_brand">Brand</button>
5  </div>
6</section>

Import SLDS for React

To apply SLDS styling to your UI components automatically, import SLDS for React in your app.

1import { Button } from "@salesforce/design-system-react";
2export default function ButtonDSR() {
3  return (
4    <section>
5      <h3 className="slds-text-heading_small slds-m-bottom_small">Disabled</h3>
6      <div className="flex flex-wrap gap-2">
7        <Button label="Neutral" variant="neutral" />
8        <Button label="Brand" variant="brand" />
9      </div>
10    </section>
11  );
12}

SLDS for React comes with icons that you get via the lightning-icon LWC component. With shadcn, wrap your icon using IconSettings to configure the sprite base path.

1import { Icon, IconSettings } from "@salesforce/design-system-react";
2export default function MyReactIcon() {
3  return (
4    <IconSettings iconPath="/assets/icons">
5      <Icon assistiveText={{ label: name }} category="utility" name="edit" size="small" />
6    </IconSettings>
7  );
8}

Use shadcn Components

In LWC, styles are implemented in the base components and you apply SLDS design tokens to customize the styling. In a React app with shadcn, styling is applied globally. When you install a shadcn component, the source code is added to your project. You can then change the Tailwind classes directly in that file to alter the branding globally. For example, you can install the shadcn Button and Card components like this.

1import React from "react";
2import { Card } from "@/components/ui/card";
3import { Button } from "@/components/ui/button";

A React app uses a global CSS file to define styles that apply across the entire app. Use a global.css file as your design system entry point where you can define tokens and map them into Tailwind utilities. With this pattern, you can swap token values to rebrand without rewriting components.

Import Tailwind and any shared styles

To create your global file, start with the Tailwind import and apply base defaults using @layer. Use @layer base to set app-wide defaults, such as for min-h-screen, antialiasing, default borders, focus outlines, base bg/text.

1/* global.css */
2@import "tailwindcss";
3@layer base {
4  html,
5  body,
6  #root {
7    @apply min-h-screen;
8  }
9
10  body {
11    @apply antialiased bg-white;
12  }
13}
14@import "tw-animate-css";
15@import "shadcn/tailwind.css";

Define semantic design tokens in :root

Brand your app by overriding tokens. The global CSS file is where you can define the app-level tokens. For example, you can add a .dark block for dark-mode token overrides, which cascades automatically.

1:root {
2  --radius: 0.625rem;
3  --background: oklch(1 0 0);
4  --foreground: oklch(0.145 0 0);
5  --primary: oklch(0.205 0 0);
6  --border: oklch(0.922 0 0);
7}
8
9.dark {
10  --background: oklch(0.145 0 0);
11  --foreground: oklch(0.985 0 0);
12}

Map tokens into Tailwind theme variables

Use @theme inline to map semantic tokens to utility-facing names, such as --color-primary and --color-background. This lets you write classes like bg-background, text-foreground, border-border in components. For more information, see the shadcn theming documentation.

1@theme inline {
2  --color-background: var(--background);
3  --color-foreground: var(--foreground);
4}

The global.css example in the Multi-framework recipes repo demonstrates how to configure Tailwind CSS with custom theme variables by using CSS custom properties.

Tip

Example Conversion

Here’s an example of a lightning-card component for LWC that we want to convert to a shadcn Card component.

1<template>
2  <lightning-card title="Account Details" icon-name="standard:account">
3    <lightning-button label="Edit" slot="actions"></lightning-button>
4    <div class="slds-p-horizontal_small">
5      <p>Account Name: Acme Corp</p>
6      <p>Industry: Technology</p>
7    </div>
8    <p slot="footer">Last Updated: March 2026</p>
9  </lightning-card>
10</template>

Converting a lightning-card to a shadcn Card is a move from a template-driven approach to a composition-driven approach. In LWC, the structure is defined by slots (title, actions, footer). In React with shadcn, you explicitly render every piece of the card by using sub-components: Card, CardHeader, CardTitle, CardDescription, CardContent, and CardFooter.

1// MyComponent.tsx
2import {
3  Card,
4  CardContent,
5  CardDescription,
6  CardFooter,
7  CardHeader,
8  CardTitle,
9} from "@/components/ui/card";
10import { Button } from "@/components/ui/button";
11import { Building2 } from "lucide-react"; // Equivalent to standard:account
12
13export default function AccountCard() {
14  return (
15    <Card className="w-[400px]">
16      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
17        <div className="flex items-center gap-2">
18          <Building2 className="h-5 w-5 text-blue-600" />
19          <div>
20            <CardTitle className="text-lg font-bold">Account Details</CardTitle>
21            <CardDescription>Customer Tier: Gold</CardDescription>
22          </div>
23        </div>
24        {/* Replacing slot="actions" */}
25        <Button variant="outline" size="sm">
26          Edit
27        </Button>
28      </CardHeader>
29
30      <CardContent>
31        <div className="space-y-1">
32          <p className="text-sm">Account Name: Acme Corp</p>
33          <p className="text-sm">Industry: Technology</p>
34        </div>
35      </CardContent>
36
37      <CardFooter className="border-t pt-4">
38        <p className="text-xs text-muted-foreground">Last Updated: March 2026</p>
39      </CardFooter>
40    </Card>
41  );
42}

Consider several styling differences between SLDS and shadcn components.

Radius: SLDS 1 uses a small border-radius (4px/0.25rem) for buttons and cards, while SLDS 2 uses a border-radius of 15rem. The default shadcn radius is 0.5rem.
The “ring” focus indicator color: With SLDS, focus states are often the brand blue or similar to #0176d3 so your shadcn inputs feel native to the Lightning experience.
Secondary colors: SLDS uses light grays (#f3f3f3) for secondary backgrounds. shadcn’s default secondary is often a darker gray. For more information, see the SLDS Color Overview documentation.

Utility Classes

To style your components, use Tailwind CSS utility classes. For example, you can use the flexbox and grid utility classes instead of the SLDS utility classes.

1<Card className="p-4 mb-3">
2  <div className="flex items-start justify-between gap-4">
3    <div className="flex items-start gap-3 flex-1">
4      <span className="text-yellow-500 text-xl">🟡</span>
5      <div className="flex-1 min-w-0">
6        <h4 className="font-semibold text-gray-900 truncate">
7          {application.applicantName} - {application.propertyAddress}
8        </h4>
9        <p className="text-sm text-gray-600 mt-1">Submitted: {application.submittedDate}</p>
10      </div>
11    </div>
12  </div>
13</Card>