Lightning Design System

https://www.lightningdesignsystem.com

Admin

Lightning Design System is a comprehensive design system and component library providing UI...

Tokens:89,575

Snippets:1,035

Trust Score:9.8

Update:4 hours ago

Show doc for...

Tokens:

Raw

### Install dependencies

Source: https://www.lightningdesignsystem.com/2e1ef8501/p/057d3b-slds-2-ai-starter-kit

Run this command in the project root to install all required npm packages for the starter kit.

```bash
npm install
```

--------------------------------

### Start development server

Source: https://www.lightningdesignsystem.com/2e1ef8501/p/057d3b-slds-2-ai-starter-kit

Run this command to start the local development server with fast reload for iterating on your prototype.

```bash
npm run dev
```

--------------------------------

### Install SLDS 2 npm package with yarn

Source: https://www.lightningdesignsystem.com/2e1ef8501/p/547b38-develop

Alternative installation command using yarn for the @salesforce-ux/design-system-2 package.

```shell
yarn add @salesforce-ux/design-system-2
```

--------------------------------

### CSS Example: Using Global Styling Hook

Source: https://www.lightningdesignsystem.com/2e1ef8501/p/547b38-develop

Example of applying a global styling hook with a fallback value. Note: Do not assign direct values to global styling hooks; that is reserved for theming tools.

```CSS
.my-custom-class {
padding: var(--slds-g-sizing-1, 0.25rem);
}
```

Tokens:

Raw