> For the complete documentation index, see [llms.txt](https://docs.bulletlaunch.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.bulletlaunch.com/template-contents/ui-components.md).

# 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>