# Using UI extensions

Learn more about how to use both Field and Sidebar UI extensions.

## Field extensions

[Video](https://www.loom.com/embed/de3f38de8c8c4a1a911b9333f1d65bf5)

To use a field UI extension in the content editor, add it to a content model like you would with default Hygraph fields. In schema editor, pick your custom field from the list. It will be grouped with other fields according to the `fieldType` value specified in the declaration.

![Available Fields with UI extension](https://hygraph.com/images/classic-docs/ui-extensions/getting-started/field-list-with-ui-extension.png)

Just like any other field, it will need a display name and an API ID. Default validation and configuration options are available to custom fields as well.

![Add UI Extension](https://hygraph.com/images/classic-docs/ui-extensions/getting-started/add-ui-extension.png)

Once your custom field is ready, go to content editing and add a new entry. You should now see your custom UI extension rendered:

![UI Extension Field Renderer](https://hygraph.com/images/classic-docs/ui-extensions/getting-started/ui-extension-field-renderer.png)

## Sidebar extensions

To use a Sidebar Extension in the content editor sidebar, do the following steps:

### Customizing sidebar widgets

[Video](https://www.loom.com/embed/1e2ed10c004b4f4c86ef59b9c20c9bad)

1. Go to **Schema** editor
1. Click on the model you would like to edit
1. Below model's name, click on **Sidebar** tab
1. Under **Sidebar Widgets**, click on the widget you would like to add
1. Click on **Create** to finish

**Note:**

**Tip:** click and hold the drag handle to reorder the widgets.

### Previewing your customized sidebar

[Video](https://www.loom.com/embed/2d24be4f10794fd49e82162c10b034c7)

1. Go to **Content** or click on **Go to content editing** link at the top right corner
1. Click on the model you've edited in the previous step
1. Click on **Add New Item** or edit an existing one

Now, you should see your customized sidebar and can use your [sidebar extensions](https://hygraph.com/classic-docs/ui-extensions/field-extension/quickstart).

## Next steps

- [Quickstart](https://hygraph.com/classic-docs/ui-extensions/field-extension/quickstart) building Field Extensions
- [Quickstart](https://hygraph.com/classic-docs/ui-extensions/sidebar-extension/quickstart) building Sidebar Extensions