# 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.
## ✅ Admin: Section - App settings
A section dedicated to app settings within the admin panel, for configuring and managing app-wide settings.
## ✅ Admin - Mini Menu - Users
A compact administrative menu specific to user management tasks like add, edit, or delete users.
## ✅ Admin: Table - Users
A detailed table layout within the admin section for displaying and managing user accounts.
## ✏️ Input: Dropdown
A dropdown input field for forms, allowing selection from a list of options.
## ✏️ Input: Custom dropdown with add item
Setup guide here:
## ✏️ Input: Image uploader
A tool for users to upload images, commonly used in profile settings or content uploads.
## ✏️ Input: Multiline input
A text input field for longer, multiline text entries, such as descriptions or messages.
## ✏️ Input: Star rating
An interactive element for users to rate items or services using a star system.
## ✏️ Input: File uploader
Allows users to upload files, typically for document storage, profile pictures, or attachment uploads.
## ✏️ Input: Multidropdown
A form element that lets users select multiple options from a dropdown list, useful for fields requiring multiple choices.
## ✏️ Input: Search input
A search bar that allows users to input text to query and filter through data or content in the app.
## ✏️ Input: Text input
A basic text field for user input, applicable for forms, search bars, and data entry.
## 🎨 Styles: Inputs
Design styles that define the appearance of various input fields across the app.
## 🎨 Styles: Text
A set of predefined text styles to ensure consistent typography throughout the app.
## 🖼️ Layout: Header - Marketing Site
The header component for marketing or landing pages, including navigation and branding elements.
## 🖼️ Layout: Footer
The footer component of the app, containing links, credits, and other info typically found at the bottom of a page.
## 🧩 Audio player
A reusable element for playing audio files within the app.
## 📢 UI: Callout - Upgrade
A special alert or banner used to promote upgrades or special offers to users.
## 🧩 UI: Comments section
A section for users to read and post comments, often used in blogs, product pages, or social feeds.
## 🧩📝 UI: Form - Multi-Step Form
An interactive form component that guides users through a multi-step data entry process.
## 🧩 UI: Group - Signup/Login
A group element that contains the signup and login forms.
## 🧩❌ UI: Icon - Close Popup
A clickable icon for closing popups or modal windows within the app.
## 🧩 UI: Item + comments
A component displaying an item and its associated comments or discussions.
## 🧩🌐 UI: Logo
The app's logo element, reusable across various parts of the app for consistent branding.
## 🧩 UI: Marketing - Pricing Table
A table that clearly lays out the pricing tiers and features for marketing purposes.
## 🧩📋 UI: Mini Menu - Generic
A general-purpose mini menu for common actions or navigation that can be used throughout the app.
## 🧩 UI: Mini Menu - Users
A compact menu for user-specific actions, like account settings or logout options.
## 🧩🚀 UI: Onboarding form
A form designed to collect necessary information from users during the onboarding process.
#### 
## 🧩 UI: Section - Create Content
An interface for users to create and submit content within the app, such as posts or listings.
## 🧩👤 UI: User Avatar
A placeholder or container for displaying a user's profile picture or avatar.
## 🧩 UI: Dashboard header
The top section of a dashboard, usually containing navigation, user info, and key data points.
## 🧩 UI: Empty state
A visual indication for empty content areas.
## 🧩 UI: Icon - Coloured
Icons enhance the visual interface and user experience of the app. BL mainly uses Heroicons.
## 🧩⚙️ UI: Section - Account + Settings
A user interface section dedicated to account information and user-specific settings.
## 🧩 UI: Upgrade CTA w Popup
A Call To Action (CTA) for upgrading the service, which triggers a popup with more information.
## 🧩🍿 UI: Popup - Create
A popup window designed for creating new records or entries, like posts or contacts.
## 🧩🍿 UI: Popup - Delete
A confirmation popup for deleting items, to prevent accidental deletions by users.
## 🧩🍿 UI: Popup - Signup/Login
A modal window that facilitates the signup or login process for users.
## 🧩🍿 UI: Popup - Tour
An informative popup that gives a guided tour of the app’s features or new updates.
## 🧩🍿 UI: Popup - Upgrade
A popup used to encourage and facilitate users to upgrade their account or service level.
## 🧩🍿 UI: Popup - View Item
A popup for viewing detailed information about an item, often used in catalogs or inventories.
## 🧩🍿 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.
## 🧩💬 UI: Chat - Individual Chat
An interface for one-on-one chat conversations between users.
## 🧩📊 UI: Charts
Reusable charts for displaying data, accessible throughout various parts of the app.
## 🧩📖 UI: Table - Calendar
A table format specifically designed to represent calendar views, for events or scheduling.
## 🧩📖 UI: Table - Classic Rows
A traditional row layout for tables, suitable for displaying structured data like spreadsheets.
## 🧩📖 UI: Table - Coloured Grid
A visually distinct grid with color coding, useful for categorizing or highlighting information.
## 🧩📖 UI: Table - Image grid
A grid layout specifically designed for displaying images, such as galleries or product photos.
## 🧩📖 UI: Table - Narrow
A more compact table design for displaying data where less width is needed or for mobile responsiveness.
## 🧩🛟 UI: Section - Support + FAQs
A dedicated section for support and frequently asked questions to help users navigate common issues or inquiries.
