> ## Documentation Index > Fetch the complete documentation index at: https://docs.ollie.shop/llms.txt > Use this file to discover all available pages before exploring further. # Managing Components in the Admin > The Components area of the Admin: the list and its statuses, creating a component record, and the four tabs of a component (General, Props, Code Management, Builds) Every custom component your checkout renders is a record in a store [Version](/ollie-shop/concepts/version.md): a name, a [slot](/ollie-shop/concepts/slots.md), an active flag, optional props, and the build that holds its code. [Studio](/ollie-shop/studio.md) and the [CLI](/ollie-shop/cli/installation.md) create and update these records for you; the **Components** area of the Admin is where you see and manage all of them. ## The components list ![Components list](https://mintcdn.com/ollie/ZKpSeyUd64Smy50J/images/admin-components-list.png?fit=max\&auto=format\&n=ZKpSeyUd64Smy50J\&q=85\&s=2c63f6589bca20c3f6d041eb83a1eead) Components: filter by version, search, and switch between grid and table Open **Components** in the store sidebar. You can filter by version, search by name, slot or id, and switch between the grid (default up to 20 components) and the table. Each component carries one status: | Status | Meaning | | - | - | | **Active** | Active, has a slot, and has a deployed build. Shoppers see it. | | **Requires Code** | Active with a slot, but no build has been deployed yet. | | **Not Allocated** | Active with a build, but no slot. It is built and not placed anywhere. | | **Disabled** | The active toggle is off. | | **Draft** | Anything else, typically a record with neither slot nor code. | | **Imported** | A synced copy brought in from another store (see [Import components](/ollie-shop/customization/import-components.md)). | Two actions sit at the top: **Import components**, covered in its [own page](/ollie-shop/customization/import-components.md), and **Create Component**. ## Creating a component record ![Create Component form](https://mintcdn.com/ollie/ZKpSeyUd64Smy50J/images/admin-component-new.png?fit=max\&auto=format\&n=ZKpSeyUd64Smy50J\&q=85\&s=6bd8b1d828af7caec39ce33de99d4d77) New Component: the record is created first, the code can follow in the same form or later | Field | Notes | | - | - | | **Name** | The display name. It does not have to match your folder name. | | **Active** | On by default. | | **Version** | Pick the version first; the slot list depends on it. | | **Slot** | Grouped by checkout area. Slots already taken in that version are struck through and marked "(already in use)". Tick **Custom value** to type a slot id that is not in the list, for example a [payment slot](/ollie-shop/customization/payment-slots.md) built from a payment method id. | | Code dropzone | Optional. If you drop a zip here it is uploaded right after the record is created. | After creation, copy the **ID** shown next to the component name. That is the id you link in your project's `ollie.json` and pass to `ollieshop deploy --component-id` (see [Build Your First Component](/ollie-shop/components/your-first-component.md)). If you work from Studio instead, **Publish** creates the record and deploys in one step, so you rarely need this form. ## The component page A component has four tabs. ### General Configuration ![Component General Configuration tab](https://mintcdn.com/ollie/ZKpSeyUd64Smy50J/images/admin-component-general.png?fit=max\&auto=format\&n=ZKpSeyUd64Smy50J\&q=85\&s=e991afb2f7f496ec06f49952be198dcc) Name, **Active**, **Slot** (with the same **Custom value** option) and **Version**. Changing the version moves the component to another version of the store. The **Danger Zone** deletes the component and its builds; the action cannot be undone. ### Props Configuration ![Component Props Configuration tab](https://mintcdn.com/ollie/ZKpSeyUd64Smy50J/images/admin-component-props.png?fit=max\&auto=format\&n=ZKpSeyUd64Smy50J\&q=85\&s=15ccae23c2ea11147792137c28c4a9c9) Key/value props the component receives at runtime. **Add Property** opens a drawer where you give the key, pick a type (String, Number, Boolean or JSON) and a value; object and array props get an edit button, and every prop can be deleted. **Save** is enabled once something changed, and the checkout reads the new values on its next load, with no rebuild. How a component declares and reads its props is covered in [Props](/ollie-shop/customization/props.md). Studio offers the same editor with a form or raw JSON view. ### Code Management ![Component Code Management tab](https://mintcdn.com/ollie/ZKpSeyUd64Smy50J/images/admin-component-code.png?fit=max\&auto=format\&n=ZKpSeyUd64Smy50J\&q=85\&s=a35dac299c3552b263c4d04f3ed413fe) Upload a zip of the component's source to start a build. The zip must contain a `package.json` and an `index.tsx` at its root, and can be at most 10 MB. The build status updates every few seconds (Building, Built, or Build failed) with a collapsible build log. Most projects never use this tab directly: `ollieshop deploy` and Studio bundle the folder and upload it for you. It is the right place when someone hands you a zip. An imported component shows a **Synced copy** notice here instead of the upload box first. Use **Re-sync** to pull the source's latest build; deploying your own build replaces the synced copy. ### Builds ![Component Builds tab](https://mintcdn.com/ollie/ZKpSeyUd64Smy50J/images/admin-component-builds.png?fit=max\&auto=format\&n=ZKpSeyUd64Smy50J\&q=85\&s=9ecca6a0296b93c224779315d163f783) Every build of the component, newest first, with its status (**Current**, **Failed**, or **Archived**), build id, who started it and when, and its log. Any build other than the current one offers **Roll back**, which repoints the storefront at that build without rebuilding anything. See [Roll Back a Component](/ollie-shop/customization/roll-back-a-component.md). ## Related * [Ollie Studio](/ollie-shop/studio.md): preview, publish and deploy without leaving the dashboard * [Build Your First Component](/ollie-shop/components/your-first-component.md): the CLI route, from folder to deploy * [Import components](/ollie-shop/customization/import-components.md): reuse a component from another store * [Roll Back a Component](/ollie-shop/customization/roll-back-a-component.md): recover from a bad deploy in one dialog This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.