# How to Use [Phlex](https://www.phlex.fun/) Components in Avo

Avo uses [ViewComponent](https://viewcomponent.org/) to render fields, resources, and other parts of the UI. However, that doesn't mean you can't use [Phlex](https://www.phlex.fun/) components in your Avo views.

The initialization process between the two is quite similar allowing a smooth transition between them. You just need to configure the component you want to use for a given field or resource on a specific view, and Avo will take care of the rest.

This guide walks you through how to use [Phlex](https://www.phlex.fun/) components inside your Avo views.

> _Note: This guide assumes you already have Phlex installed in your app._

## Step 1: Create a [Phlex](https://www.phlex.fun/) component

Let's start with a simple [Phlex](https://www.phlex.fun/) component for a field. This component uses the same Tailwind CSS classes as the default Avo field component, and includes an additional message about the field.

You can make your components as simple or as complex as you'd like, this is just an example.

:::warning
All Tailwind CSS classes used in this guide are already included in Avo's design system and available in its pre-purged assets. If you plan to customize the appearance beyond what's shown here, consider setting up the TailwindCSS integration.
:::

```ruby