> ## Documentation Index
> Fetch the complete documentation index at: https://docs.makeswift.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Concepts
> To best understand Makeswift, there are a few core concepts for which to establish common vocabulary.
## Props
Props are the primary way to pass data into a React component. They are one of the two types of data that control a component. The other type of data is state, which is used to control data within the component.
Props are passed into the render function of a component as an object in the first argument position. The object contains all the props passed into the component.
```jsx theme={null}
function MyComponent(props) {
return {props.name}
}
```
You can read more about props in the [React documentation](https://react.dev/learn/passing-props-to-a-component).
## Controls
Controls describe the way users can pass data to your components' props. Each control maps a [prop](#props) on your component to user interface elements such as panels and overlays. Controls are defined when [registering components](/developer/reference/runtime/register-component).
There are two types of controls: [basic](#basic-controls) and [composable](#composable-controls) controls.
### Basic controls
Basic controls cannot contain other controls. Multiple basic controls can provide the same type of data, but with different user interfaces. For example, you can provide a `string` to your component with a [`TextInput`](/developer/reference/controls/text-input), [`TextArea`](/developer/reference/controls/text-area), [`Select`](/developer/reference/controls/select), or [`Combobox`](/developer/reference/controls/combobox) control. Here are all of the basic controls:
There are three special basic controls that are designed for specific types of props such as `className` and `children`:
* The [`RichText`](/developer/reference/controls/rich-text) control provides a `ReactNode` to your component and then renders an inline rich text editor overlay wherever the builder renders the `ReactNode`.
* The [`Slot`](/developer/reference/controls/slot) control provides a `ReactNode` to your component and places a drop zone overlay wherever the builder renders the prop. Users can then add components visually to that drop zone.
* The [`Style`](/developer/reference/controls/style) control provides multiple panels and overlays that modify various CSS properties. This data is then passed to your component as a `string` value.
### Composable controls
Composable controls provide an `array` or `object` to a prop of your component. Composable controls have a `type` property that can recursively contain any control. The [`List`](/developer/reference/controls/list) control is used to modify props that expect an `array`, and the [`Shape`](/developer/reference/controls/shape) control is used to modify props that expect an `object`.