# Features

<figure><img src="https://3985976695-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT3t4pDs63s3Soj1JetJw%2Fuploads%2FMd1ca8pMtZ9p6sNtHJL6%2Fimage.png?alt=media&#x26;token=b859131f-bff4-482e-ac8f-159a01a2c470" alt=""><figcaption></figcaption></figure>

The file contains an array of features and renders them all.

```typescript
const featuresList: Omit<FeatureProps, "showCta">[] = [
  {
    category: "Productivity",
    title: "Feature 1",
    description:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, diam sit amet dictum ultrices, nunc magna ullamcorper elit, vitae tincidunt nisl nunc sit amet nunc. ",
    imageUrl: "https://placehold.co/600x400",
  },
  {
    category: "Leads generation",
    title: "Feature 2",
    description:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, diam sit amet dictum ultrices, nunc magna ullamcorper elit, vitae tincidunt nisl nunc sit amet nunc. ",
    imageUrl: "https://placehold.co/600x400",
  },
];
```

Component: `<Features />`

File: `src/components/Features/Features.tsx`

{% code title="page.tsx" %}

```typescript
import { Features } from "@/components/Features/Features";
```

{% endcode %}

### Props

| Prop    | Type    | Description                       |
| ------- | ------- | --------------------------------- |
| showCta | boolean | Shows or hides the call to action |

Examples

<figure><img src="https://3985976695-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT3t4pDs63s3Soj1JetJw%2Fuploads%2FWoqoKsA71Z22ZOvrfF3Q%2Fimage.png?alt=media&#x26;token=e9e3e6c0-d543-4bc7-9779-800b8a1ca299" alt=""><figcaption><p>userdesk.io</p></figcaption></figure>

***

{% hint style="info" %}
If you need basic components like buttons, inputs, etc, they are all available with [ChakraUI](https://chakra-ui.com/).
{% endhint %}