> ## Documentation Index
> Fetch the complete documentation index at: https://docs.withclasp.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Component Styling

> Clasp gives you complete control over the look and feel of the components your embedding

# Theme Object

```ts theme={null}
export interface ColorConfig {
    [string]: string[] // 10 different shades of the color specified in the key 
}

export interface ClaspTheme {
    fontFamily?: string
    colors?: ColorConfig
    primaryShade?: string
    primaryColor?: string
    radius?: {
        xs: string
        sm: string
        md: string
        lg: string
        xl: string
    }
    fontSizes?: {
        xs: string
        sm: string
        md: string
        lg: string
        xl: string
    }
    lineHeights?: {
        xs: string
        sm: string
        md: string
        lg: string
        xl: string
    }
    shadows?: {
        xs: string
        sm: string
        md: string
        lg: string
        xl: string
    }
}
```

you can provide a `Partial<ClaspTheme>` to any `ClaspView`. This is the easiest and most consistent way of changing the styling of a clasp component

the most important styles to change are

1. `ClaspTheme.fontFamily` : to align the font family with your application's

# CSS File

```jsx theme={null}
import 'clasp-components/dist/style.css'
import './ClaspStyleOverride.css'
```

if you need more granular management of styles you can create your own css file and override the styles found in the `clasp-components/dist/styles.css`

The best way of finding the style you want to override is to inspect the element in the browser to find the appropriate class name or id

## ClaspStyleOverride.css

```css theme={null}
._button_1a1ab_1{
    color: white;
}
```

# Font Family

you can pass any font family to the clasp-components as long as it has been previously imported or is web safe font

# Positioning

the clasp-components views attempt to be unopinionated about positioning, so there is no padding / alignment attached to the views.

As such, wherever you implement a Clasp view you should position it as you want

Here's an example using flex to position the SDK in the middle with a padding of 24px

```css theme={null}
.wrapper {
    height: 52px;
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 24px;
    box-sizing: border-box;
}
```

```jsx theme={null}
import { ClaspEmployerView } from 'clasp-components'
...

export const BenefitsPage = () => {
    return (
        <div id={styles.benefits}>
            <ClaspEmployerView
                config={...}
                theme={...}
            />
        </div>
    )
}
```