> For the complete documentation index, see [llms.txt](https://bloomtechlabs.gitbook.io/labs-spa-starter/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bloomtechlabs.gitbook.io/labs-spa-starter/styling-with-ant-design.md).

# Styling with Ant Design

{% hint style="info" %}
Ant Design is only available from the [@lambdalabs/labs](https://docs.labs.lambdaschool.com/guides/labs-cli/create-labs-react-spa) generator when `program=Labs`
{% endhint %}

In order to provide an experience for you to dive right into a code base and have everything you need to successfully style and craft your UI Components we'd like for you to gain some practice using the [`ANT Design Library`](https://ant.design/).

* Instructions on how to use components can be found in the `notes` portion in the [project storybook](https://lambda-school-labs.github.io/labs-spa-starter/?path=/info/form--example-form).
* It is recommended that you use the [AntD components](https://ant.design/components/overview/) as your common components.

#### Theme-ing your app

* Even though you're using Ant Design and the global stylesheet that comes with it, you can control the theme of your application by changing things like font-family, sizes, border-radius', primary/accent colors etc.
* To do this, simply go to the `theme-overrides.js` file and use the[ following properties to override the styles](https://ant.design/docs/react/customize-theme)
* **You will need to restart your app completely restart your dev server when making changes to this JS file**

{% embed url="<https://youtu.be/n38ZfAcpXck>" %}