# What UI Integrations Does Formily Support? Complete Guide to Component Library Adapters

> Discover Formily UI integrations including Ant Design, Element UI, and Fusion. Learn how Formily seamlessly connects with React and Vue component libraries for flexible form building.

- Repository: [Alibaba/formily](https://github.com/alibaba/formily)
- Tags: complete-guide
- Published: 2026-02-24

---

**Formily supports Ant Design (React), Element UI (Vue), and Alibaba Fusion (Next) through dedicated adapter packages, plus framework-agnostic React and Vue bindings that enable integration with any custom component library.**

Formily is a powerful form solution from Alibaba that separates form state management from UI rendering. Understanding what UI integrations Formily supports is essential for developers choosing component libraries for their projects. The repository provides first-class adapters for the most popular React and Vue design systems, alongside flexible mapping utilities for custom integrations.

## Supported UI Libraries and Framework Adapters

### Ant Design (React)

The `@formily/antd` package provides complete bindings for Ant Design components. It exports `FormProvider`, `Field`, `ArrayField`, `ObjectField`, and `VoidField` components that wrap Ant Design controls.

Key implementation details from [`packages/antd/package.json`](https://github.com/alibaba/formily/blob/main/packages/antd/package.json) show dependencies on both `@formily/core` and `antd`, confirming this is a bridge layer between Formily's state management and Ant Design's visual components.

```tsx
import { createForm } from '@formily/core';
import { FormProvider, Field } from '@formily/react';
import { Input, Select } from 'antd';
import { mapProps } from '@formily/react';

const AntInput = (props) => <Input {...props} />;
const AntSelect = (props) => <Select {...props} />;

const form = createForm({ validateFirst: true });

export default function AntdForm() {
  return (
    <FormProvider form={form}>
      <Field
        name="username"
        component={AntInput}
        required
        decorator={[mapProps({ placeholder: 'Enter username' })]}
      />
      <Field
        name="role"
        component={AntSelect}
        decorator={[mapProps({ placeholder: 'Select role' })]}
        dataSource={[
          { label: 'Admin', value: 'admin' },
          { label: 'User', value: 'user' },