# Components

Gravity comes packaged with a library of pre-built components to build your own user interface at warp speed without any design skills. Shadcn utilised Radix UI so it's fully accessible to WAGC2 standards.

{% hint style="success" %}
Gravity 12 now uses Shadcn components. 
{% endhint %}

[Check out the live demo](https://demo.usegravity.app) to see the components in action.

Most of the components from Shadcn are available by default in Gravity. If not, you can install it easily:

```
npx shadcn-ui@latest add component-name
```

### Importing Components

You can import components from a global barrel file rather than having to remember where each component is stored.

```javascript
import { Form, Card } from 'components/lib';
```

{% hint style="warning" %}
Using the barrel file will decrease performance by loading all the components into the bundle.  If you want to avoid this, you can import directly from the component file.
{% endhint %}

Please refer to the following sections for individual instructions on how to use each component. 

### Figma UI Kit

For prototyping, you can [`download the Shadcn UI kit for Figma`](https://www.figma.com/community/file/1203061493325953101/shadcn-ui-design-system).


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.usegravity.app/gravity-web/components.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.