Skip to content

Add color palettes docs to React SDK #529

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
notgiorgi merged 2 commits into from
Apr 3, 2026
Merged

Add color palettes docs to React SDK #529

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ff61dd4
Add color palettes documentation to React SDK reference
mintlify[bot] Apr 3, 2026
a308b67
Revise color palette setup instructions
notgiorgi Apr 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 26 additions & 0 deletions references/react-sdk.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,7 @@ type DashboardProps = {
fontFamily?: string; // Font family for all text
};
filters?: SdkFilter[]; // Apply filters programmatically
paletteUuid?: string; // Color palette UUID for custom theming
contentOverrides?: LanguageMap; // Localization/translation overrides
onExplore?: (options: {
chart: SavedChart
Expand Down Expand Up @@ -464,6 +465,31 @@ Sets the background for the embedded content. Can be any color value or `'transp
/>
```

## Color palettes

You can customize the appearance of embedded dashboards using color palettes. Define multiple color palettes in your organization settings, then apply them to embedded dashboards using the `paletteUuid` prop.

For more on customizing appearance, see [customizing the appearance of your project](/references/workspace/customizing-the-appearance-of-your-project).

### Setting up color palettes

1. Go to **Organization settings > Appearance** in Lightdash
2. Define one or more color palettes
3. Copy the palette UUID for the palette you want to use (or fetch from API `GET /api/v1/org/color-palettes`)

### Applying a palette

Pass the `paletteUuid` prop to the `Lightdash.Dashboard` component:

```tsx
<Lightdash.Dashboard
instanceUrl="https://app.lightdash.cloud"
token={token}
paletteUuid="your-palette-uuid"
/>
```


## Filtering data

Filters can be passed to `<Lightdash.Dashboard/>` to filter dimensions by values. Filters are applied as AND operations, each further restricting results.
Expand Down
Loading