🧩UI components

Bullet Launch comes with a large number of UI components ready to use, including workflows, states, custom events and other functionality.

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.

✅ 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.

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.

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

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.

✏️ 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.

A group element that contains the signup and login forms.

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.

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

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.

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

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

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

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

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

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

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

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.

PreviousPrivacy rules NextPages

Last updated 3 months ago