Skip to content

Component Pages

Use this catalog when you want a page dedicated to one BrickflowUI component.

Layout

  • Column: Stacks child components vertically with consistent spacing.
  • Row: Lays out child components horizontally with optional wrapping and alignment controls.
  • Card: Creates a surface container for sections, KPIs, or grouped controls.
  • Grid: Builds a responsive multi-column layout for cards, charts, or forms.
  • Divider: Separates related content blocks visually.
  • Spacer: Adds explicit breathing room between nearby components.

Typography

  • Text: Renders headings, body copy, captions, labels, and lightweight code text.
  • Code: Shows a syntax-friendly code block for docs, debug output, or examples.

Controls

  • Button: Triggers actions, navigation, or secondary workflows.
  • Input: Captures controlled text, search, numeric, date, URL, or textarea input.
  • Select: Lets the user choose one option from a list.
  • Checkbox: Toggles a boolean value with an explicit label.
  • Toggle: Switches a boolean state with a more app-like visual treatment.
  • Slider: Adjusts numeric values across a bounded range.
  • DateRangePicker: Captures a start and end date in one controlled component.
  • MultiSelect: Lets users activate multiple tags, scopes, or filters.
  • ChatInput: Collects assistant-style prompts with change and submit events.

Feedback

  • Badge: Highlights compact status labels such as environment, freshness, or risk.
  • Alert: Shows inline information, warnings, successes, or errors.
  • Spinner: Communicates local loading work for buttons, cards, and forms.
  • Progress: Displays completion, readiness, or processing percentages.
  • Stat: Shows KPI values with optional deltas and motion-friendly counters.
  • Toast: Shows dismissible, state-safe notifications in the corner of the app.
  • EmptyState: Explains why a view has no content and what to do next.
  • Timeline: Narrates chronological events such as incidents, approvals, or jobs.
  • Image: Renders local or remote images, logos, screenshots, and GIFs from Python.
  • Video: Renders local or remote videos directly from your BrickflowUI script.
  • SparklineStat: Combines a compact KPI value with a tiny embedded trend line.
  • Tabs: Switches between multiple content sections without leaving the page.
  • TabItem: Defines one tab label and its corresponding content tree.
  • Sidebar: Creates the left navigation shell for multi-page apps.
  • NavItem: Defines one route entry inside a sidebar navigation list.
  • Modal: Shows a centered blocking overlay for heavier workflows.
  • Drawer: Slides contextual detail in from the side without leaving the page.
  • Popup: Shows a lightweight confirmation or quick-look overlay.
  • Accordion: Groups expandable sections for FAQs, help, or dense detail.
  • AccordionItem: Defines one expandable section inside an accordion.
  • Breadcrumbs: Shows where the user is inside a multi-step or nested flow.

Workflow

  • Hero: Creates a premium top-of-page introduction for dashboards, portals, or landing pages.
  • SectionHeader: Adds a reusable title block with subtitle and actions.
  • StatusStrip: Displays a row or grid of operational health and freshness signals.
  • Stepper: Shows progress through onboarding, review, or release stages.
  • KanbanBoard: Visualizes work queues grouped by workflow stage.
  • ChatMessage: Renders one message inside an assistant or copilot transcript.

Data

  • Table: Shows rows of structured data with sorting, pagination, and export.
  • Plot: Embeds a native Plotly figure for advanced visualizations.
  • AreaChart: Displays filled trends over time or categories.
  • BarChart: Compares volumes or totals across categories.
  • LineChart: Highlights trends, latency, or rate movement across an x-axis.
  • DonutChart: Shows part-to-whole composition in a compact circular chart.
  • ScatterChart: Plots correlations, clusters, or anomaly candidates.
  • ComposedChart: Combines bars, lines, and areas in one chart.
  • GaugeChart: Shows readiness, freshness, reliability, or quality as a dial.
  • RadarChart: Compares several dimensions around a shared center.
  • Heatmap: Maps intensity across two dimensions such as week vs signal.
  • FunnelChart: Shows stage conversion or drop-off across a pipeline.
  • TreeMap: Displays weighted composition as nested rectangles.
  • PipelineGraph: Renders a pipeline or DAG-like structure inside the portal.

Forms

  • Form: Posts named child controls to a backend route as structured JSON.

Databricks

  • CatalogBrowser: Browses Unity Catalog catalogs, schemas, and tables.
  • WarehouseSelector: Selects a Databricks SQL warehouse from the current environment.
  • JobTrigger: Starts a Databricks job run from the UI.