# Components

The components are documented individually on a separate website.

{% embed url="<https://components.react-dsfr.codegouv.studio/>" %}

### Customization

What to do if you want to customize the components beyond what the props allow.

#### The `classes` property

Every component of react-dsfr accepts an optional `classes` property that enables you to customize their look at a fine grained level.

<figure><img src="https://312678300-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcccd1rMVr8ooPvsgugcw%2Fuploads%2FQc6V4U4owmhIQVPua3Ww%2Fimage.png?alt=media&#x26;token=9bcdda29-49eb-4451-a2c3-b18c334cfa3e" alt=""><figcaption><p>Available classes on the Alert components</p></figcaption></figure>

<figure><img src="https://312678300-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcccd1rMVr8ooPvsgugcw%2Fuploads%2FXHL5Ek8mYEbRr0eS3nOZ%2Fimage.png?alt=media&#x26;token=37215e69-3643-48dd-b2a9-eb43da97a51e" alt=""><figcaption><p>We add a 5v margin-top to the close button</p></figcaption></figure>

<figure><img src="https://312678300-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcccd1rMVr8ooPvsgugcw%2Fuploads%2FNOoQhoTjOgzKddw8scwk%2Fimage.png?alt=media&#x26;token=cbec1f8d-ea45-4f6e-8a02-1e19f28d3e4a" alt=""><figcaption><p>Before</p></figcaption></figure>

<figure><img src="https://312678300-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcccd1rMVr8ooPvsgugcw%2Fuploads%2FydkLOo042UY2no1BbzxX%2Fimage.png?alt=media&#x26;token=6e901a7b-e3ee-4017-9805-9cc00bf9b4a1" alt=""><figcaption><p>After</p></figcaption></figure>

### Creating a custom component

{% embed url="<https://youtu.be/9uaPv-Q9fe4>" %}
Cusomizing a component - NOTE: theme.decisions... is now fr.colors.decisions...
{% endembed %}