# UI components

{% hint style="info" %}
UI components can be used in several ways:

* For components which **will only ever need one version for the entire app** (e.g. the signup/login popup, or the logo component), you can keep the reusable as it is and just drop it wherever you need it in the app. 
* For components which you want to use as a **starting point for a new interface but may wish to use again**, you can create a new reusable which is a clone of the original. Then use the new reusable within the app, keeping a clean untouched copy of the original.
* For **small components which will form part of a larger UI and need to be editable**, you can drop them onto a page and detached from their parent reusable so they become a normal element on the page. Then you can edit them without affecting the original reusable.
  {% endhint %}

## ✅ Admin - Charts

Charts for the admin dashboard.

<figure><img src="/files/Zl5Hf6qjOtTWlDzI3Y0V" alt=""><figcaption></figcaption></figure>

## ✅ Admin: Section - App settings

A section dedicated to app settings within the admin panel, for configuring and managing app-wide settings.

<figure><img src="/files/zuo6sloSWjqVSi4kVHOb" alt=""><figcaption></figcaption></figure>

## ✅ Admin - Mini Menu - Users

A compact administrative menu specific to user management tasks like add, edit, or delete users.

<figure><img src="/files/7yyYwjzSosANYoQockpo" alt=""><figcaption></figcaption></figure>

## ✅ Admin: Table - Users

A detailed table layout within the admin section for displaying and managing user accounts.

<figure><img src="/files/xouyLiCth6DkwbuIIQUB" alt=""><figcaption></figcaption></figure>

## ✏️ Input: Dropdown

A dropdown input field for forms, allowing selection from a list of options.

<figure><img src="/files/YcMUMjcXdksrDZ0I1Vl9" alt=""><figcaption></figcaption></figure>

## ✏️ Input: Custom dropdown with add item <a href="#custom-dropdown" id="custom-dropdown"></a>

<figure><img src="/files/F8ll6qI1IiGWSTISvPEE" alt=""><figcaption></figcaption></figure>

Setup guide here: <https://www.loom.com/share/08edb0ad4eea4abf80f176061a021b23?sid=53a3500e-03b0-44c7-94f7-007ede3ec23b>

## ✏️ Input: Image uploader

A tool for users to upload images, commonly used in profile settings or content uploads.

<figure><img src="/files/gc2BFG0DJSublusIueaV" alt=""><figcaption></figcaption></figure>

## ✏️ Input: Multiline input

A text input field for longer, multiline text entries, such as descriptions or messages.

<figure><img src="/files/b8k2SWS2vPnYwjjjl7bR" alt=""><figcaption></figcaption></figure>

## ✏️ Input: Star rating

An interactive element for users to rate items or services using a star system.

<figure><img src="/files/eWnz5xPJpHv4AFgN2k65" alt=""><figcaption></figcaption></figure>

## ✏️ Input: File uploader

Allows users to upload files, typically for document storage, profile pictures, or attachment uploads.

<figure><img src="/files/2RsSfQ2lnlDIinuxvfyL" alt=""><figcaption></figcaption></figure>

## ✏️ Input: Multidropdown

A form element that lets users select multiple options from a dropdown list, useful for fields requiring multiple choices.

<figure><img src="/files/FKk8q1BHc8z8n9gH9zZ2" alt=""><figcaption></figcaption></figure>

## ✏️ Input: Search input

A search bar that allows users to input text to query and filter through data or content in the app.

<figure><img src="/files/L9Gdf7kZwgzF0WDG0Ic1" alt=""><figcaption></figcaption></figure>

## ✏️ Input: Text input

A basic text field for user input, applicable for forms, search bars, and data entry.

<figure><img src="/files/a9hBrf69I3ZgAvbxKOJz" alt=""><figcaption></figcaption></figure>

## 🎨 Styles: Inputs

Design styles that define the appearance of various input fields across the app.

<figure><img src="/files/BHYFbVYAr8xmyqGyUzBU" alt=""><figcaption></figcaption></figure>

## 🎨 Styles: Text

A set of predefined text styles to ensure consistent typography throughout the app.

<figure><img src="/files/kjMhj6tElHKAK2qpbbt5" alt=""><figcaption></figcaption></figure>

## 🖼️ Layout: Header - Marketing Site

The header component for marketing or landing pages, including navigation and branding elements.

<figure><img src="/files/yvCPZI3AoK403bc1xQVq" alt=""><figcaption></figcaption></figure>

## 🖼️ Layout: Footer

The footer component of the app, containing links, credits, and other info typically found at the bottom of a page.

<figure><img src="/files/iL8DdMELvrR4Yi7FxRGE" alt=""><figcaption></figcaption></figure>

## 🧩 Audio player

A reusable element for playing audio files within the app.

<figure><img src="/files/ria2XpWmAXd8kZ7XUNKq" alt=""><figcaption></figcaption></figure>

## 📢 UI: Callout - Upgrade

A special alert or banner used to promote upgrades or special offers to users.

<figure><img src="/files/9ih78wQi1UWLBTnA5iuO" alt=""><figcaption></figcaption></figure>

## 🧩 UI: Comments section

A section for users to read and post comments, often used in blogs, product pages, or social feeds.

<figure><img src="/files/azwZiWWOxd36o6J5tipF" alt=""><figcaption></figcaption></figure>

## 🧩📝 UI: Form - Multi-Step Form

An interactive form component that guides users through a multi-step data entry process.

<figure><img src="/files/PlpjwgXrDHJ4NoVzaMg7" alt=""><figcaption></figcaption></figure>

## 🧩 UI: Group - Signup/Login

A group element that contains the signup and login forms.

<figure><img src="/files/axCUhpN6M4nvKonXxXJJ" alt=""><figcaption></figcaption></figure>

## 🧩❌ UI: Icon - Close Popup

A clickable icon for closing popups or modal windows within the app.

<figure><img src="/files/BlgpAIbx9qHNyWJMZ6kg" alt=""><figcaption></figcaption></figure>

## 🧩 UI: Item + comments

A component displaying an item and its associated comments or discussions.

<figure><img src="/files/ToewoA0F1MmIDZNT6jgP" alt=""><figcaption></figcaption></figure>

## 🧩🌐 UI: Logo

The app's logo element, reusable across various parts of the app for consistent branding.

<figure><img src="/files/GYW14HZScSv79BrU1wcr" alt=""><figcaption></figcaption></figure>

## 🧩 UI: Marketing - Pricing Table

A table that clearly lays out the pricing tiers and features for marketing purposes.

<figure><img src="/files/ptjGJrAjiiNmncbMXMMS" alt=""><figcaption></figcaption></figure>

## 🧩📋 UI: Mini Menu - Generic

A general-purpose mini menu for common actions or navigation that can be used throughout the app.

<figure><img src="/files/UudXaBjU7vkZ62Wxhu9V" alt=""><figcaption></figcaption></figure>

## 🧩 UI: Mini Menu - Users

A compact menu for user-specific actions, like account settings or logout options.

<figure><img src="/files/BXrRcPvn48MugIIDMMks" alt=""><figcaption></figcaption></figure>

## 🧩🚀 UI: Onboarding form

A form designed to collect necessary information from users during the onboarding process.

#### ![](/files/4L0IRAzgu8gK4dznlPko)

## 🧩 UI: Section - Create Content

An interface for users to create and submit content within the app, such as posts or listings.

<figure><img src="/files/QRZiONQqjgHFYU4JpqWR" alt=""><figcaption></figcaption></figure>

## 🧩👤 UI: User Avatar

A placeholder or container for displaying a user's profile picture or avatar.

<figure><img src="/files/qElAOf7fUqTcIWFaot3v" alt=""><figcaption></figcaption></figure>

## 🧩 UI: Dashboard header

The top section of a dashboard, usually containing navigation, user info, and key data points.

<figure><img src="/files/nIJus1injgllGQjyAbeh" alt=""><figcaption></figcaption></figure>

## 🧩 UI: Empty state

A visual indication for empty content areas.

<figure><img src="/files/yQFBceMvG1QG3k5a2jfu" alt=""><figcaption></figcaption></figure>

## 🧩 UI: Icon - Coloured

Icons enhance the visual interface and user experience of the app. BL mainly uses Heroicons.

<figure><img src="/files/2QYDtm9vs7clzRnccvbv" alt=""><figcaption></figcaption></figure>

## 🧩⚙️ UI: Section - Account + Settings

A user interface section dedicated to account information and user-specific settings.

<figure><img src="/files/osfpXCnPfrpoJvDFg9ir" alt=""><figcaption></figcaption></figure>

## 🧩 UI: Upgrade CTA w Popup

A Call To Action (CTA) for upgrading the service, which triggers a popup with more information.

<figure><img src="/files/60bqHc6KrD0lz2vK6E9P" alt=""><figcaption></figcaption></figure>

## 🧩🍿 UI: Popup - Create

A popup window designed for creating new records or entries, like posts or contacts.

<figure><img src="/files/pvZtuO7HScNrNY69Aq1K" alt=""><figcaption></figcaption></figure>

## 🧩🍿 UI: Popup - Delete

A confirmation popup for deleting items, to prevent accidental deletions by users.

<figure><img src="/files/HkOO2xyM3II9fhicfh2u" alt=""><figcaption></figcaption></figure>

## 🧩🍿 UI: Popup - Signup/Login

A modal window that facilitates the signup or login process for users.

<figure><img src="/files/WIKXlvYwlG14sCCtVTRX" alt=""><figcaption></figcaption></figure>

## 🧩🍿 UI: Popup - Tour

An informative popup that gives a guided tour of the app’s features or new updates.

<figure><img src="/files/1dWUWj6lKomHLbHredma" alt=""><figcaption></figcaption></figure>

## 🧩🍿 UI: Popup - Upgrade

A popup used to encourage and facilitate users to upgrade their account or service level.

<figure><img src="/files/Q8UX2dkbB97oeY1KAGOt" alt=""><figcaption></figcaption></figure>

## 🧩🍿 UI: Popup - View Item

A popup for viewing detailed information about an item, often used in catalogs or inventories.

<figure><img src="/files/26TBZyFNoYaT0dOesuqK" alt=""><figcaption></figcaption></figure>

## 🧩🍿 UI: Popup - View w/ image

A popup element that allows users to view detailed content, often accompanied by an image.

## 🧩💬 UI: Chat - Inbox

The main inbox component for a chat feature, where users can see their message threads.

<figure><img src="/files/CU3ZDc524v6ZSFcyTzBV" alt=""><figcaption></figcaption></figure>

## 🧩💬 UI: Chat - Individual Chat

An interface for one-on-one chat conversations between users.

<figure><img src="/files/MFJC0j9Wqbz1XvujV2nN" alt=""><figcaption></figcaption></figure>

## 🧩📊 UI: Charts

Reusable charts for displaying data, accessible throughout various parts of the app.

<figure><img src="/files/rPfdINQ4ejCBJnav8m0h" alt=""><figcaption></figcaption></figure>

## 🧩📖 UI: Table - Calendar

A table format specifically designed to represent calendar views, for events or scheduling.

<figure><img src="/files/a7P41NQe58chdOIGJlVa" alt=""><figcaption></figcaption></figure>

## 🧩📖 UI: Table - Classic Rows

A traditional row layout for tables, suitable for displaying structured data like spreadsheets.

<figure><img src="/files/uFYDkpLOthPJhMHTjTbZ" alt=""><figcaption></figcaption></figure>

## 🧩📖 UI: Table - Coloured Grid

A visually distinct grid with color coding, useful for categorizing or highlighting information.

<figure><img src="/files/fP8ueWghv8fc7sKzV7iw" alt=""><figcaption></figcaption></figure>

## 🧩📖 UI: Table - Image grid

A grid layout specifically designed for displaying images, such as galleries or product photos.

<figure><img src="/files/h3L7erEvlLFiuZ7gVowX" alt=""><figcaption></figcaption></figure>

## 🧩📖 UI: Table - Narrow

A more compact table design for displaying data where less width is needed or for mobile responsiveness.

<figure><img src="/files/9ifErSR8FNaeuYL17ZnG" alt=""><figcaption></figcaption></figure>

## 🧩🛟 UI: Section - Support + FAQs

A dedicated section for support and frequently asked questions to help users navigate common issues or inquiries.

<figure><img src="/files/k77XzzSx3MLG4mz7uvcu" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.bulletlaunch.com/template-contents/ui-components.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.