> For clean Markdown of any page, append .md to the page URL. > For a complete documentation index, see https://www.glideapps.com/docs/essentials/components/llms.txt. > For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://www.glideapps.com/_mcp/server. # Introduction to Components > Learn what components can do and how you can work with them. When you're designing in Glide, your data is displayed on a [Screen](/docs/getting-started/intro-to-layout/screen-types) with Components on it. Components display and let your users interact with your data in powerful ways. Some components like [Collections](/docs/essentials/components/collections) show data from multiple rows, while others like Action Row display only a single value. You can always see which components are visible on a screen in the **Components** panel on the left in the [Layout Editor](/docs/getting-started/intro-to-layout). Some screens may limit you from adding new components, but most screens let you add components wherever you like. You can edit components from the Layout Editor. Click the component you'd like to edit on the left, and configure its settings on the right. ## Configuring Components Some components are very simple, while others are much more complex. Regardless, most components have one or more of the following areas in their settings. * **Data** * **Design** * **Action** * **Options** ### Data #### Component Data Video Data (sometimes called 'Content' or 'Items Data') is where you configure what the component is displaying. Some components can only display a single value from your data, and others let you show multiple properties. ![The configuration for the Collection Component (on the left) can show four columns from your table (right).](/docs/_fern-img/366f359b1376b68e7e7764abf1ffe6b0c988df95f6d54fa3227097e0921ea944.webp) ### Design #### Component Design Video Design lets you tweak a component to style it how you like. With components such lists and collections, the settings can be quite extensive. But with simple components like the [Text Component](/docs/essentials/components/text), the settings are minimal. ![Configuring the design options in the Container Component.](/docs/_fern-img/44c35d3cdb0218a32d4d1f90e7b881a3bcae09cef18f6d4bfed065800818eb27.webp) ### Action Many Components have the option to add [Actions](/docs/automation/actions). Sometimes you can add only a single action and sometimes you can add multiple. ![The Action settings in the Button Component's configuration panel.](/docs/_fern-img/5b7d51c629d7163a61278a5d7c76bcd9010b40bd084fb07ed856ff560136340d.webp) ### Options Most components have only two sections: The General tab and the Options tab. Most Components have only Visibility settings in the Options tab, but **Collections** have many other options. ![The Options tab within a component's configuration.](/docs/_fern-img/42555922dc27ec8ba367695a113288a316381b95f0545feab2bab2bb4b07b1bd.webp) ## Editing Components ### Deleting When you delete Components, they don't affect the data in your table. If you accidentally delete a Component, you can hit Command Z (Mac) or Control Z (PC) to bring it back. This also works for many other steps you take as you build your app. Alternatively, you can click the Undo or Redo buttons in the bottom left of your screen. To delete a Component: In the Components section of the Layout Editor (bottom left), right-click an existing component to open a menu that allows you to Move, Cut, Copy, Duplicate, or Delete a component. Right-click anywhere else in the **Components** section to see a menu allowing you to **Delete All** components. #### Components - Arcade 1 ### Copying and Pasting Components can be copy/pasted from one screen to another, as well as from one app to another. To do this, you must stay in the same tab in your web browser. In the Components section of the Layout Editor (bottom left), right-click an existing component to open a menu that allows you to Move, Cut, Copy, Duplicate, or Delete a component. Right-click anywhere else in the **Components** section to see a menu allowing you to **Copy All** components. Navigate to the destination screen in the app. In the Components area of the new screen, right-click in the open area and select **Paste**. #### Components - Arcade 2 > Learn what components can do and how you can work with them. ## Docs - [Action Row](https://www.glideapps.com/docs/essentials/components/action-row.md): Perform any action with context. - [AI Custom](https://www.glideapps.com/docs/essentials/components/ai-custom.md): Design new components through prompts. - [Audio](https://www.glideapps.com/docs/essentials/components/audio.md): Play and record audio files - [Big Numbers](https://www.glideapps.com/docs/essentials/components/big-numbers.md): Prominently display a single value in a block. - [Breadcrumbs](https://www.glideapps.com/docs/essentials/components/breadcrumbs.md): Display users' location within the app. - [Button](https://www.glideapps.com/docs/essentials/components/button.md): Use buttons to trigger actions in your apps. - [Charts](https://www.glideapps.com/docs/essentials/components/charts.md): Visualize data in colorful charts. - [Checkbox and Switch](https://www.glideapps.com/docs/essentials/components/checkbox-and-switches.md): Change true-false values. - [Choice](https://www.glideapps.com/docs/essentials/components/choice.md): Pick options from a list. - [Collections](https://www.glideapps.com/docs/essentials/components/collections.md): Show lists of items from your tables in different layouts. - [Calendar](https://www.glideapps.com/docs/essentials/components/collections/calendar.md): Display items on a calendar based on a specified date and time. - [Card](https://www.glideapps.com/docs/essentials/components/collections/card.md): Display a list of items in a card layout - [Chat](https://www.glideapps.com/docs/essentials/components/collections/chat.md): Allow users to chat with each other directly in your app. - [Checklist](https://www.glideapps.com/docs/essentials/components/collections/checklist.md): Display a list of items as an interactive checklist. - [Comments](https://www.glideapps.com/docs/essentials/components/collections/comments.md): Allow users to comment directly in your app. - [Custom Collection](https://www.glideapps.com/docs/essentials/components/collections/custom-collection.md): Build dynamic, reusable collections of data with Custom Collections. - [Data Grid](https://www.glideapps.com/docs/essentials/components/collections/data-grid.md): Display data in a layout that resembles a spreadsheet. - [Kanban Collection](https://www.glideapps.com/docs/essentials/components/collections/kanban.md): Kanban Collection - [List](https://www.glideapps.com/docs/essentials/components/collections/list.md): Display a group of items in a list layout. - [Table](https://www.glideapps.com/docs/essentials/components/collections/table.md): Display a list of items in a table layout. - [Contact Form](https://www.glideapps.com/docs/essentials/components/contact-form.md): A preconfigured contact form for your page. - [Container](https://www.glideapps.com/docs/essentials/components/container.md): Group components together in a custom container. - [Date Pickers](https://www.glideapps.com/docs/essentials/components/date-pickers.md): Pick a date or date and time. - [Dynamic Content](https://www.glideapps.com/docs/essentials/components/dynamic-content.md): Render UI components dynamically from JSON data stored in a column. - [Entry](https://www.glideapps.com/docs/essentials/components/entry.md): Enter text, numbers, email addresses, or phone numbers. - [Fields](https://www.glideapps.com/docs/essentials/components/fields.md): Show multiple values side-by-side. - [File and Image Pickers](https://www.glideapps.com/docs/essentials/components/file-and-image-pickers.md): Let users upload files and images to your apps. - [Form Container](https://www.glideapps.com/docs/essentials/components/form-container.md): Collect data from your users in customizable forms. - [Hint](https://www.glideapps.com/docs/essentials/components/hint.md): Emphasize important text. - [Image](https://www.glideapps.com/docs/essentials/components/image.md): Display images in your app. - [Link](https://www.glideapps.com/docs/essentials/components/link.md): Display a clickable link. - [Location](https://www.glideapps.com/docs/essentials/components/location.md): Log the device's current location. - [Map](https://www.glideapps.com/docs/essentials/components/map.md): Display multiple addresses as an interactive map. - [Notes](https://www.glideapps.com/docs/essentials/components/notes.md): Create, edit, and format text with rich text capabilities. - [Progress Bar](https://www.glideapps.com/docs/essentials/components/progress-bar.md): Display the progress of a value between two limits. - [Rating](https://www.glideapps.com/docs/essentials/components/rating.md): Submit rating values for items. - [Rich Text](https://www.glideapps.com/docs/essentials/components/rich-text.md): Display data as styled content. - [Scanner](https://www.glideapps.com/docs/essentials/components/scanner.md): Scan barcodes and QR codes with your Glide app. - [Separator](https://www.glideapps.com/docs/essentials/components/separator.md): Add padding above, beneath, or between components. - [Signature](https://www.glideapps.com/docs/essentials/components/signature.md): Let users add signatures to your app. - [Spinner](https://www.glideapps.com/docs/essentials/components/spinner.md): Display a loading indicator while data is being processed. - [Stopwatch](https://www.glideapps.com/docs/essentials/components/stopwatch.md): Track elapsed time in seconds within your app. - [Tabs Container](https://www.glideapps.com/docs/essentials/components/tabs-container.md): Group components into custom tabbed views. - [Text](https://www.glideapps.com/docs/essentials/components/text.md): Add text to your app. - [Title](https://www.glideapps.com/docs/essentials/components/title.md): Display properties in dynamic ways. - [Video](https://www.glideapps.com/docs/essentials/components/video.md): Display videos from YouTube, Vimeo, Twitch, and more. - [Voice Transcription](https://www.glideapps.com/docs/essentials/components/voice-transcription.md): Record and convert spoken words to text automatically. - [Web Embed](https://www.glideapps.com/docs/essentials/components/web-embed.md): Embed web pages directly into your apps.