🚀
Bullet Launch Docs
Get Bullet Launch
  • 👋Welcome from Kieran
  • 🏗️Getting started
    • ‼️READ ME FIRST
    • 🆙Changelog
    • 🏎️Quick start guide
    • 🗺️Bullet Launch walkthrough
    • 🛬Updating the landing page
    • 🔑User roles
    • 💽Designing your database
    • 🔏Privacy rules (don't skip this)
    • 🏂The onboarding page
    • 🖥️How the dashboard nav menu works
    • 💻How the main header menu works
    • 💾Create a new data type with UI
    • 🤸‍♀️Using the Kanban UIs
    • 🤖Using the Chatbot UI
    • 🚶‍♂️Using the Multi-Step Form
    • 📪Setting up Postmark (emails)
    • 📮Setting up Loops.so (emails)
    • 💳Setting up Stripe (payments)
    • 💰Setting up Lemon Squeezy (payments)
    • 🪄Example build: Content Magic
      • 1. Create a new app
      • 2. Set up the database structure
      • 3. Create a UI for prompts
      • 4. Editing the dashboard and adding the first UI
      • 5. Create a UI for inspirations
      • 6. Create a UI for content creation
      • 7. Create a calendar UI for content pipeline
    • 🍿Live build of a CRM tool
  • 📚Template contents
    • 💾Data types
    • 📒Option sets
    • 🔏Privacy rules
    • 🧩UI components
    • 📰Pages
    • 📧Emails
    • ✨AI integrations
    • 💳Payments
    • 🔌Plugins
    • 🎨Styles
  • 🧑‍🏫Resources
    • 🛟Get support
Powered by GitBook
On this page
  • ✅ Admin - Charts
  • ✅ Admin: Section - App settings
  • ✅ Admin - Mini Menu - Users
  • ✅ Admin: Table - Users
  • ✏️ Input: Dropdown
  • ✏️ Input: Custom dropdown with add item
  • ✏️ Input: Image uploader
  • ✏️ Input: Multiline input
  • ✏️ Input: Star rating
  • ✏️ Input: File uploader
  • ✏️ Input: Multidropdown
  • ✏️ Input: Search input
  • ✏️ Input: Text input
  • 🎨 Styles: Inputs
  • 🎨 Styles: Text
  • 🖼️ Layout: Header - Marketing Site
  • 🖼️ Layout: Footer
  • 🧩 Audio player
  • 📢 UI: Callout - Upgrade
  • 🧩 UI: Comments section
  • 🧩📝 UI: Form - Multi-Step Form
  • 🧩 UI: Group - Signup/Login
  • 🧩❌ UI: Icon - Close Popup
  • 🧩 UI: Item + comments
  • 🧩🌐 UI: Logo
  • 🧩 UI: Marketing - Pricing Table
  • 🧩📋 UI: Mini Menu - Generic
  • 🧩 UI: Mini Menu - Users
  • 🧩🚀 UI: Onboarding form
  • 🧩 UI: Section - Create Content
  • 🧩👤 UI: User Avatar
  • 🧩 UI: Dashboard header
  • 🧩 UI: Empty state
  • 🧩 UI: Icon - Coloured
  • 🧩⚙️ UI: Section - Account + Settings
  • 🧩 UI: Upgrade CTA w Popup
  • 🧩🍿 UI: Popup - Create
  • 🧩🍿 UI: Popup - Delete
  • 🧩🍿 UI: Popup - Signup/Login
  • 🧩🍿 UI: Popup - Tour
  • 🧩🍿 UI: Popup - Upgrade
  • 🧩🍿 UI: Popup - View Item
  • 🧩🍿 UI: Popup - View w/ image
  • 🧩💬 UI: Chat - Inbox
  • 🧩💬 UI: Chat - Individual Chat
  • 🧩📊 UI: Charts
  • 🧩📖 UI: Table - Calendar
  • 🧩📖 UI: Table - Classic Rows
  • 🧩📖 UI: Table - Coloured Grid
  • 🧩📖 UI: Table - Image grid
  • 🧩📖 UI: Table - Narrow
  • 🧩🛟 UI: Section - Support + FAQs
  1. Template contents

UI components

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

PreviousPrivacy rulesNextPages

Last updated 2 months ago

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.

✅ 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

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

Setup guide here:

📚
🧩
https://www.loom.com/share/08edb0ad4eea4abf80f176061a021b23?sid=53a3500e-03b0-44c7-94f7-007ede3ec23b