> For the complete documentation index, see [llms.txt](https://doc.thebadge.xyz/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://doc.thebadge.xyz/integration-guide/how-to-render-badges/using-the-thebadge-ui-library.md).

# Using the TheBadge-UI-Library

#### Available components

* The UI-Lib contains a lot of components and different formats for displaying the badges, you can check them and access to the docs in [Storybook](https://main--638b62c10e52ebb22bd55c21.chromatic.com/?path=/docs/).
* Please note that the library it's still **under development.**
* The library repository can be found [here](https://github.com/thebadge/thebadge-ui-library).

#### 1) First you have to install the library:

```
yarn add thebadge-ui-library
```

#### 2) Then import CSS files with styles in your \_app.tx file:

```
import 'node_modules/thebadge-ui-library/dist/index.css'
```

#### 3) Now you can use the component by providing to it the badge metadata

#### Example with BadgePreviewV2:

```
{
    "badge": {
      "id": "0x51fd663a6b85383c96e229ec12c0882eaa9886fe-8",
      "evidenceMetadataUrl": "ipfs://QmYVn1MGonZ6n1VKN8M7fEeGtfLeyjGSztFDEaTHqERcgD", -> contains the imageUrl
      "reviewDueDate": "1680277596",
      "status": "InReview",
      "isChallenged": false,
      "receiver": {
        "id": "0x51fd663a6b85383c96e229ec12c0882eaa9886fe"
      },
      "badgeType": {
        "id": "8",
        "metadataURL": "ipfs://QmaMdeyvZbgo2v5rKxopdZ6CFuJd95V2Lp3hmoWYYer4jJ", -> contains the badgeTypeMetadata
        "validFor": "0",
        "badgesMintedAmount": "0"
      }
    }
  }
```

<pre><code><strong>imageUrl: "https://gateway.pinata.cloud/ipfs/QmZnKDwa7rkJEraPKVuDHSeQGCKuamG8WyxpNfZ9jm9qye"
</strong></code></pre>

```
const badgeTypeMetadata = {
    "description": "Proof of ownership of a Mercado Libre Sellers account",
    "image":"ipfs://QmW3hVcLJ1a5fD9yeKCLuoKB3WbZGY7kfxg66Hx53Wkk3n",
    "name":"Proof of Merchant Account in MercadoLibre"
}
```

```
<BadgePreviewV2
  imageUrl={badgeTypeMetadata.imageUrl} -> it should be an url, ipfs not supported at the moment
  size="medium" -> Large / Medium / Small
  title={badgeTypeMetadata.name}
  description={badgeTypeMetadata.description}
  badgeUrl={`staging-app.thebadge.xyz/${badgeType.id}/${ownerAddress}`}

  {/** NON-EDITABLE VALUES (under development) **/}
  animationEffects={['wobble', 'grow', 'glare']}
  animationOnHover
  badgeBackgroundUrl="https://images.unsplash.com/photo-1512998844734-cd2cca565822?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTIyfHxhYnN0cmFjdHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60"
  textContrast="light-withTextBackground"
/>
```

It will look like this:<br>

<figure><img src="/files/XE90sk0tPTs6BvZAq0nL" alt=""><figcaption><p>Badge example</p></figcaption></figure>