> ## Documentation Index
> Fetch the complete documentation index at: https://docs.flowx.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Root Components in UI Design

> Root components serve as the foundation for structuring user interfaces, providing the framework for arranging and configuring different types of components.

![](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/release40/root_components_new.gif)

Root components play a crucial role in defining the layout and hierarchy of elements within an application. Here's an overview of key root components and their functionalities:

### Container

The Container component is a versatile element used to group and configure the layout for multiple components of any type. It provides a flexible structure for organizing content within a UI.

Learn more about [Container components](./container).

### Card

The Card component functions similarly to a Container component but also offers the capability to function as an accordion, providing additional flexibility in UI design.

Discover more about [Card components](./card).

### Custom

Custom components are Web components developed within the container application and dynamically passed to the SDK at runtime. These components are identified by their unique names and enable developers to extend the functionality of the UI.

Explore [Custom components](./custom) for advanced customization options.

A card or a container can hold a hierarchical component structure as this example:

<Frame>
  ![](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/release40/root_comp_str.png)
</Frame>

Available children for **Card** and **Container** are:

1. [**Form**](../form-elements/) - Used to group and align form field elements (inputs, radios, checkboxes, etc.).

<Info>
  For more information about the form elements, please refer to the [**Form elements**](../form-elements/) section.
</Info>

2. [**Image**](../image) - Allows you to configure an image in the document.
3. **Text** - A simple text can be configured via this component; basic configuration is available.
4. **Link** - Used to configure a hyperlink that opens in a new tab.
5. [**Button**](../buttons) - Multiple options are available for configuration, with the most important part being the possibility to add actions.
6. [**File Upload**](../buttons) - A specific type of button that allows you to select a file.
7. [**Custom**](./custom) - Custom components.
8. [**Indicators**](../indicators) - Message UI elements to display different types of messages.

Learn more:

<CardGroup cols={3}>
  <Card title="Card" href="./card" icon="file" />

  <Card title="Container" href="./container" icon="file" />

  <Card title="Custom" href="./custom" icon="file" />
</CardGroup>