Style Your React Apps (Beta)

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.

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.

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

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.

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.

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.

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.

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.

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.

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

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.

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.

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.