sgcHTML Components Gallery — Browse all 93 UI components | eSeGeCe

sgcHTML Components Gallery

Browse all 93 sgcHTML UI components in one place, grouped into nine families. Every component renders to Bootstrap 5 markup and works the same in Delphi, C++ Builder and .NET, with the same Tsgc* class name in each. 28 of the 93 components are data-aware and bind straight to a TDataSet / DataSource (or an equivalent .NET source); those carry a Data-aware badge. Click any card for its component page, or open the docs.

Every component below ships as a runnable sample. The 08.Components project in the 60.HTML demo set renders this entire catalog as a live, click-through gallery you can drive in the browser. It is included with the free trial, so you can run the whole gallery locally against your own data.

Download the free trial Open the feature matrix

The trial ships the 60.HTML demo projects (including 08.Components). A hosted, always-on version of the interactive gallery is a separate deploy.

Nine families

93 UI components, nine families

Jump straight to a family, or scroll the whole catalog below.

14 components

Data & Tables

11 components

Charts & Visualization

10 components

Forms & Inputs

21 components

Content & Layout

10 components

Overlays & Feedback

12 components

Chat & AI

4 components

Authentication

7 components

Infrastructure

7 classes

Data & Tables

Data & Tables

Grids, calendars and boards that render your datasets directly.

Grid

Data-aware
  • Delphi / C++TsgcHTMLComponent_Grid
  • .NETTsgcHTMLComponent_Grid

Feature-rich table: sort, filter, CSV/PDF export, inline edit, grouping, virtual scroll and AI query.

Component page · Docs

DataTable

Data-aware
  • Delphi / C++TsgcHTMLComponent_DataTable
  • .NETTsgcHTMLComponent_DataTable

Higher-level data table wrapping Grid + Pagination with a toolbar, search and row count.

Component page · Docs

Calendar

Data-aware
  • Delphi / C++TsgcHTMLComponent_Calendar
  • .NETTsgcHTMLComponent_Calendar

Month-grid calendar with event dots and previous/next navigation.

Component page · Docs

Scheduler

Data-aware
  • Delphi / C++TsgcHTMLComponent_Scheduler
  • .NETTsgcHTMLComponent_Scheduler

Calendar scheduler (month / week views) rendering events by date.

Component page · Docs

Timeline

Data-aware
  • Delphi / C++TsgcHTMLComponent_Timeline
  • .NETTsgcHTMLComponent_Timeline

Vertical timeline of dated events, loadable from a dataset.

Component page · Docs

KanbanBoard

Data-aware
  • Delphi / C++TsgcHTMLComponent_KanbanBoard
  • .NETTsgcHTMLComponent_KanbanBoard

Kanban board of columns and draggable cards.

Component page · Docs

Gantt

Data-aware
  • Delphi / C++TsgcHTMLComponent_Gantt
  • .NETTsgcHTMLComponent_Gantt

Gantt project-timeline chart with task progress bars.

Component page · Docs

TreeGrid

Data-aware
  • Delphi / C++TsgcHTMLComponent_TreeGrid
  • .NETTsgcHTMLComponent_TreeGrid

Bootstrap table with collapsible, hierarchical rows built from Id/ParentId node pairs.

Component page · Docs

PivotTable

Data-aware
  • Delphi / C++TsgcHTMLComponent_PivotTable
  • .NETTsgcHTMLComponent_PivotTable

Bootstrap pivot table that groups rows and columns and aggregates measures with row, column and grand totals.

Component page · Docs

ActivityFeed

  • Delphi / C++TsgcHTMLComponent_ActivityFeed
  • .NETTsgcHTMLComponent_ActivityFeed

Live, newest-first activity feed with relative timestamps and out-of-band WebSocket push.

Component page · Docs

AuditTrail

Data-aware
  • Delphi / C++TsgcHTMLComponent_AuditTrail
  • .NETTsgcHTMLComponent_AuditTrail

Chronological audit-log feed of user and system actions with actor, action, target and timestamp.

See in feature matrix · Docs
Charts & Visualization

Charts & Visualization

Data-driven visuals built from your own numbers.

Chart

Data-aware
  • Delphi / C++TsgcHTMLComponent_Chart
  • .NETTsgcHTMLComponent_Chart

Chart.js chart: line, bar, pie, doughnut, radar, polar, bubble and scatter.

Component page · Docs

Gauge

  • Delphi / C++TsgcHTMLComponent_Gauge
  • .NETTsgcHTMLComponent_Gauge

Semicircular SVG gauge with low / mid / high colour thresholds.

Component page · Docs

Diagram

  • Delphi / C++TsgcHTMLComponent_Diagram
  • .NETTsgcHTMLComponent_Diagram

Node-and-arrow flow diagram rendered as inline SVG.

Component page · Docs

Map

  • Delphi / C++TsgcHTMLComponent_Map
  • .NETTsgcHTMLComponent_Map

Leaflet.js interactive map (OpenStreetMap / CartoDB tiles) with markers.

Component page · Docs

Heatmap

Data-aware
  • Delphi / C++TsgcHTMLComponent_Heatmap
  • .NETTsgcHTMLComponent_Heatmap

Colour-scaled SVG heatmap grid from cell values or a bound dataset, with legend and row/column labels.

Component page · Docs

Sparkline

Data-aware
  • Delphi / C++TsgcHTMLComponent_Sparkline
  • .NETTsgcHTMLComponent_Sparkline

Compact inline SVG line, bar or area sparkline from a value series or a bound dataset.

Component page · Docs

CandlestickChart

Data-aware
  • Delphi / C++TsgcHTMLComponent_CandlestickChart
  • .NETTsgcHTMLComponent_CandlestickChart

SVG OHLC candlestick chart with wicks, up/down colours and an optional volume strip.

Component page · Docs

QRCode

  • Delphi / C++TsgcHTMLComponent_QRCode
  • .NETTsgcHTMLComponent_QRCode

Pure-Pascal ISO/IEC 18004 SVG QR code from any text or URL, with selectable error correction level.

Component page · Docs

Barcode

  • Delphi / C++TsgcHTMLComponent_Barcode
  • .NETTsgcHTMLComponent_Barcode

Pure-Pascal Code 128 SVG barcode from any ASCII text, with optional human-readable caption.

Component page · Docs

TreeMap

Data-aware
  • Delphi / C++TsgcHTMLComponent_TreeMap
  • .NETTsgcHTMLComponent_TreeMap

Squarified treemap rendered as a self-contained, server-generated inline SVG, no charting library required.

Component page · Docs
Forms & Inputs

Forms & Inputs

Everything you need to capture data, with validation and dataset binding.

Form

Data-aware
  • Delphi / C++TsgcHTMLComponent_Form
  • .NETTsgcHTMLComponent_Form

Data-driven form builder with validation, layouts and AI form generation.

Component page · Docs

Edit

Data-aware
  • Delphi / C++TsgcHTMLComponent_Edit
  • .NETTsgcHTMLComponent_Edit

Single-line text input with label, help text and dataset binding.

Component page · Docs

Memo

Data-aware
  • Delphi / C++TsgcHTMLComponent_Memo
  • .NETTsgcHTMLComponent_Memo

Multi-line text-area input with label and help text.

Component page · Docs

CheckBox

Data-aware
  • Delphi / C++TsgcHTMLComponent_CheckBox
  • .NETTsgcHTMLComponent_CheckBox

Checkbox input with label and checked state.

Component page · Docs

RadioGroup

  • Delphi / C++TsgcHTMLComponent_RadioGroup
  • .NETTsgcHTMLComponent_RadioGroup

Group of mutually exclusive radio options.

Component page · Docs

Select

Data-aware
  • Delphi / C++TsgcHTMLComponent_Select
  • .NETTsgcHTMLComponent_Select

Select dropdown with option groups, multiple select and dataset binding.

Component page · Docs

InputGroup

  • Delphi / C++TsgcHTMLComponent_InputGroup
  • .NETTsgcHTMLComponent_InputGroup

Input with prepend / append addon text.

Component page · Docs

AutoComplete

Data-aware
  • Delphi / C++TsgcHTMLComponent_AutoComplete
  • .NETTsgcHTMLComponent_AutoComplete

Text input backed by an HTML5 datalist of suggestions.

Component page · Docs

DatePicker

  • Delphi / C++TsgcHTMLComponent_DatePicker
  • .NETTsgcHTMLComponent_DatePicker

Native date / time / datetime input field.

Component page · Docs

FileUpload

  • Delphi / C++TsgcHTMLComponent_FileUpload
  • .NETTsgcHTMLComponent_FileUpload

Drag-and-drop file upload zone with multipart form post.

Component page · Docs

RichEditor

  • Delphi / C++TsgcHTMLComponent_RichEditor
  • .NETTsgcHTMLComponent_RichEditor

Quill-based WYSIWYG rich-text editor with hidden form field.

Component page · Docs

Rating

  • Delphi / C++TsgcHTMLComponent_Rating
  • .NETTsgcHTMLComponent_Rating

Star (symbol) rating display or input.

Component page · Docs

MultiSelect

Data-aware
  • Delphi / C++TsgcHTMLComponent_MultiSelect
  • .NETTsgcHTMLComponent_MultiSelect

A searchable Bootstrap multi-select dropdown with chips, grouped options and dataset binding.

Component page · Docs

ColorPicker

  • Delphi / C++TsgcHTMLComponent_ColorPicker
  • .NETTsgcHTMLComponent_ColorPicker

A native HTML5 color input with an optional hex text field and swatch presets.

Component page · Docs

Slider

  • Delphi / C++TsgcHTMLComponent_Slider
  • .NETTsgcHTMLComponent_Slider

A Bootstrap range slider with a live value badge, min/max labels and color styling.

Component page · Docs

TimePicker

  • Delphi / C++TsgcHTMLComponent_TimePicker
  • .NETTsgcHTMLComponent_TimePicker

A native HTML5 time input with min/max bounds and second-level granularity.

Component page · Docs

SignaturePad

  • Delphi / C++TsgcHTMLComponent_SignaturePad
  • .NETTsgcHTMLComponent_SignaturePad

A pointer-events canvas signature pad with Clear, Undo and Save actions.

Component page · Docs

Transfer

Data-aware
  • Delphi / C++TsgcHTMLComponent_Transfer
  • .NETTsgcHTMLComponent_Transfer

Dual-listbox widget to move items between an available and an assigned panel, with filtering and dataset binding.

Component page · Docs

DateTimePicker

  • Delphi / C++TsgcHTMLComponent_DateTimePicker
  • .NETTsgcHTMLComponent_DateTimePicker

Native HTML5 date-and-time picker combining calendar and clock in a single field.

See in feature matrix · Docs

DateRangePicker

  • Delphi / C++TsgcHTMLComponent_DateRangePicker
  • .NETTsgcHTMLComponent_DateRangePicker

Paired start and end date inputs for choosing a date range, with min/max bounds.

See in feature matrix · Docs

RangeSlider

  • Delphi / C++TsgcHTMLComponent_RangeSlider
  • .NETTsgcHTMLComponent_RangeSlider

Dual-handle slider selecting a low/high value pair, with live value badges.

See in feature matrix · Docs

CameraScanner

  • Delphi / C++TsgcHTMLComponent_CameraScanner
  • .NETTsgcHTMLComponent_CameraScanner

Live camera panel that scans barcodes and QR codes with the browser's native BarcodeDetector, no third-party library, with photo capture and manual entry fallback.

Component page · Docs

NumPad

  • Delphi / C++TsgcHTMLComponent_NumPad
  • .NETTsgcHTMLComponent_NumPad

Touch numeric and currency keypad for point-of-sale entry, with quick amount buttons and locale-independent number formatting.

Component page · Docs
Content & Layout

Content & Layout

Cards, media and KPI tiles to lay out a page.

Panel

  • Delphi / C++TsgcHTMLComponent_Panel
  • .NETTsgcHTMLComponent_Panel

Bootstrap card panel with header / body / footer, collapsible and scrollable.

Component page · Docs

StatCard

  • Delphi / C++TsgcHTMLComponent_StatCard
  • .NETTsgcHTMLComponent_StatCard

Dashboard KPI / stat card with icon, trend arrow and optional gradient.

Component page · Docs

Accordion

  • Delphi / C++TsgcHTMLComponent_Accordion
  • .NETTsgcHTMLComponent_Accordion

Vertically collapsing accordion of stacked expandable panels.

Component page · Docs
  • Delphi / C++TsgcHTMLComponent_Carousel
  • .NETTsgcHTMLComponent_Carousel

Image slideshow / carousel with indicators, controls and autoplay.

Component page · Docs

Image

  • Delphi / C++TsgcHTMLComponent_Image
  • .NETTsgcHTMLComponent_Image

Image with shape, responsive / lazy-load, lightbox link and caption.

Component page · Docs

Avatar

  • Delphi / C++TsgcHTMLComponent_Avatar
  • .NETTsgcHTMLComponent_Avatar

User avatar (image or initials) with size, shape and presence-status dot.

Component page · Docs

Video

  • Delphi / C++TsgcHTMLComponent_Video
  • .NETTsgcHTMLComponent_Video

HTML5 video / audio player plus a YouTube embed helper.

Component page · Docs

Badge

  • Delphi / C++TsgcHTMLComponent_Badge
  • .NETTsgcHTMLComponent_Badge

Single Bootstrap badge with color, pill shape, an inline icon and a positioned notification-dot mode.

Component page · Docs

PDFViewer

  • Delphi / C++TsgcHTMLComponent_PDFViewer
  • .NETTsgcHTMLComponent_PDFViewer

In-page PDF viewer backed by pdf.js, with page navigation, zoom, search, download and print.

Component page · Docs

Chip

  • Delphi / C++TsgcHTMLComponent_Chip
  • .NETTsgcHTMLComponent_Chip

Compact chip / tag with an optional icon, colour and a removable close button.

See in feature matrix · Docs
Overlays & Feedback

Overlays & Feedback

Dialogs, status surfaces and loading states.

  • Delphi / C++TsgcHTMLComponent_Modal
  • .NETTsgcHTMLComponent_Modal

Modal dialog with title / body / footer, sizes, centered and static backdrop.

Component page · Docs

Offcanvas

  • Delphi / C++TsgcHTMLComponent_Offcanvas
  • .NETTsgcHTMLComponent_Offcanvas

Off-canvas slide-in panel from the left, right, top or bottom.

Component page · Docs

Popover

  • Delphi / C++TsgcHTMLComponent_Popover
  • .NETTsgcHTMLComponent_Popover

Popover bubble on a trigger element (click / hover / focus).

Component page · Docs

Toast

  • Delphi / C++TsgcHTMLComponent_Toast
  • .NETTsgcHTMLComponent_Toast

Toast notification with header, body, timestamp and auto-hide.

Component page · Docs

Snackbar

  • Delphi / C++TsgcHTMLComponent_Snackbar
  • .NETTsgcHTMLComponent_Snackbar

Material-style transient snackbar with an optional action.

Component page · Docs

Notification

  • Delphi / C++TsgcHTMLComponent_Notification
  • .NETTsgcHTMLComponent_Notification

Bell-icon dropdown notification centre with an unread badge.

Component page · Docs

Spinner

  • Delphi / C++TsgcHTMLComponent_Spinner
  • .NETTsgcHTMLComponent_Spinner

Loading spinner (border / grow), sized and coloured.

Component page · Docs

Placeholder

  • Delphi / C++TsgcHTMLComponent_Placeholder
  • .NETTsgcHTMLComponent_Placeholder

Skeleton / placeholder loading card with an animated shimmer.

Component page · Docs

ContextMenu

  • Delphi / C++TsgcHTMLComponent_ContextMenu
  • .NETTsgcHTMLComponent_ContextMenu

Right-click dropdown menu scoped to a CSS selector, with icons, dividers, headers and server-routed actions.

Component page · Docs

JobProgress

  • Delphi / C++TsgcHTMLComponent_JobProgress
  • .NETTsgcHTMLComponent_JobProgress

Live list of background job progress bars with status badges, cancel buttons and out-of-band fragment updates.

Component page · Docs

LogViewer

  • Delphi / C++TsgcHTMLComponent_LogViewer
  • .NETTsgcHTMLComponent_LogViewer

Streaming log / terminal viewer with level filter, search and auto-scroll.

Component page · Docs

ProgressBar

  • Delphi / C++TsgcHTMLComponent_ProgressBar
  • .NETTsgcHTMLComponent_ProgressBar

Bootstrap progress bar, striped and animated, single or stacked multi-segment.

Component page · Docs

CommandPalette

  • Delphi / C++TsgcHTMLComponent_CommandPalette
  • .NETTsgcHTMLComponent_CommandPalette

Ctrl+K / Cmd+K quick-action launcher with substring-then-fuzzy filtering, categories and server-routed actions.

Component page · Docs

EmptyState

  • Delphi / C++TsgcHTMLComponent_EmptyState
  • .NETTsgcHTMLComponent_EmptyState

The panel a grid, a list or a search result shows when it has no rows: icon or image, title, description and up to two call-to-action buttons.

Component page · Docs
Chat & AI

Chat & AI

Conversational UI, from simple bubbles to a streaming AI assistant.

ChatBox

  • Delphi / C++TsgcHTMLComponent_ChatBox
  • .NETTsgcHTMLComponent_ChatBox

Card-style chat bubble box with an input bar and typing indicator.

Component page · Docs

Chat

  • Delphi / C++TsgcHTMLComponent_Chat
  • .NETTsgcHTMLComponent_Chat

WhatsApp-style chat with text / image / file / audio / video messages, read receipts and replies.

Component page · Docs

AIChat

  • Delphi / C++TsgcHTMLComponent_AIChat
  • .NETTsgcHTMLComponent_AIChat

AI assistant chat with provider / model selector, token streaming and RAG source citations.

Component page · Docs

Presence

  • Delphi / C++TsgcHTMLComponent_Presence
  • .NETTsgcHTMLComponent_Presence

Who-is-online roster as an avatar stack or list, with live status updates.

Component page · Docs
Authentication

Authentication

Ready-made sign-in flows, from passwords to passkeys.

Login

  • Delphi / C++TsgcHTMLComponent_Login
  • .NETTsgcHTMLComponent_Login

Ready-made login form / page (card, centered or full-page) with remember-me and alerts.

Component page · Docs

SocialLogin

  • Delphi / C++TsgcHTMLComponent_SocialLogin
  • .NETTsgcHTMLComponent_SocialLogin

OAuth social-login button panel (Google, Facebook, Apple, GitHub, Microsoft and more).

Component page · Docs

OAuthCallback

  • Delphi / C++TsgcHTMLComponent_OAuthCallback
  • .NETTsgcHTMLComponent_OAuthCallback

OAuth callback / landing page in success, error or loading state with auto-redirect.

Component page · Docs

WebAuthnLogin

  • Delphi / C++TsgcHTMLComponent_WebAuthnLogin
  • .NETTsgcHTMLComponent_WebAuthnLogin

Passwordless passkey / WebAuthn login and register widget.

Component page · Docs

RolesPermissions

Data-aware
  • Delphi / C++TsgcHTMLComponent_RolesPermissions
  • .NETTsgcHTMLComponent_RolesPermissions

Role / permission matrix with a checkbox per cell and live WebSocket grant updates.

Component page · Docs

UserManagement

Data-aware
  • Delphi / C++TsgcHTMLComponent_UserManagement
  • .NETTsgcHTMLComponent_UserManagement

User administration table with roles, status, search and a per-row actions dropdown.

Component page · Docs

ImpersonateBanner

  • Delphi / C++TsgcHTMLComponent_ImpersonateBanner
  • .NETTsgcHTMLComponent_ImpersonateBanner

Admin impersonation banner shown while acting as another user, with a one-click exit.

See in feature matrix · Docs
Infrastructure

Engine, Server & Theming

The non-visual pieces that serve the pages and keep them live.

EngineServer

  • Delphi / C++TsgcHTMLEngine_Server
  • .NETTsgcHTMLEngine_Server

HTML engine bound to a TsgcWebSocketHTTPServer that serves rendered pages and embedded assets.

Component page · Docs

HTMXEngine

  • Delphi / C++TsgcHTMX_Engine_Server
  • .NETTsgcHTMX_Engine_Server

htmx engine wired to the same server; hooks the HTTP and WebSocket handlers, dispatches inbound requests and messages, and pushes or broadcasts HTML fragments to connected browsers in real time.

Component page · Docs

PageBuilder

  • Delphi / C++TsgcHTMLPageBuilder
  • .NETTsgcHTMLPageBuilder

Assembles registered components into a complete responsive page, with a design-time visual editor.

Component page · Docs

ThemeController

  • Delphi / C++TsgcHTMLThemeController
  • .NETTsgcHTMLThemeController

Runtime theme switcher whose Theme property (ptDefault, ptDark, ptDarkPro) applies the selected theme and shared stylesheet to the page.

Component page · Docs

ThemeBuilder

  • Delphi / C++TsgcHTMLThemeBuilder
  • .NETTsgcHTMLThemeBuilder

CSS generator whose Mode (tmLight, tmDark, tmSystem) writes Bootstrap CSS variables from property values, with an optional OS-preference sync script for tmSystem.

Component page · Docs

HTMXFragment

  • Delphi / C++TsgcHTMX_Fragment
  • .NETTsgcHTMX_Fragment

Out-of-band htmx fragment for pushing a partial-page update from the server to the browser.

Component page · Docs

HTMXRouter

  • Delphi / C++TsgcHTMX_Router
  • .NETTsgcHTMX_Router

Routing table of Routes that matches an incoming request path and dispatches it (via HandleRequest) to that route's OnRoute handler.

Component page · Docs
SEE IT RUNNING

Every Component, Working in a Real Application

The components on this page are not mockups. Each one is running right now inside these Delphi applications.

Charts, gauges and tree maps: a Delphi web application built with sgcHTML, shown running in a browser.

Charts, gauges and tree maps

Chart.js series, an SVG gauge, a sparkline and a tree map, all emitted from Pascal.

Open the live demo →

See all nine live demos →

Best value: All-AccessEvery eSeGeCe product, Premium Support included, from €1,059/year.
See All-Access pricing

Build with sgcHTML

Download the free trial and start composing web UIs in Delphi, C++ Builder or .NET.

Download Free Trial View Pricing