Browse all 89 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. 27 of the 89 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.
The trial ships the 60.HTML demo projects (including 08.Components). A hosted, always-on version of the interactive gallery is a separate deploy.
Jump straight to a family, or scroll the whole catalog below.
14 components
11 components
10 components
21 components
10 components
12 components
4 components
7 components
7 classes
Grids, calendars and boards that render your datasets directly.
TsgcHTMLComponent_GridTsgcHTMLComponent_GridFeature-rich table: sort, filter, CSV/PDF export, inline edit, grouping, virtual scroll and AI query.
TsgcHTMLComponent_DataTableTsgcHTMLComponent_DataTableHigher-level data table wrapping Grid + Pagination with a toolbar, search and row count.
TsgcHTMLComponent_CalendarTsgcHTMLComponent_CalendarMonth-grid calendar with event dots and previous/next navigation.
TsgcHTMLComponent_SchedulerTsgcHTMLComponent_SchedulerCalendar scheduler (month / week views) rendering events by date.
TsgcHTMLComponent_TimelineTsgcHTMLComponent_TimelineVertical timeline of dated events, loadable from a dataset.
TsgcHTMLComponent_KanbanBoardTsgcHTMLComponent_KanbanBoardKanban board of columns and draggable cards.
TsgcHTMLComponent_GanttTsgcHTMLComponent_GanttGantt project-timeline chart with task progress bars.
TsgcHTMLComponent_TreeGridTsgcHTMLComponent_TreeGridBootstrap table with collapsible, hierarchical rows built from Id/ParentId node pairs.
TsgcHTMLComponent_PivotTableTsgcHTMLComponent_PivotTableBootstrap pivot table that groups rows and columns and aggregates measures with row, column and grand totals.
TsgcHTMLComponent_ActivityFeedTsgcHTMLComponent_ActivityFeedLive, newest-first activity feed with relative timestamps and out-of-band WebSocket push.
TsgcHTMLComponent_AuditTrailTsgcHTMLComponent_AuditTrailChronological audit-log feed of user and system actions with actor, action, target and timestamp.
Data-driven visuals built from your own numbers.
TsgcHTMLComponent_ChartTsgcHTMLComponent_ChartChart.js chart: line, bar, pie, doughnut, radar, polar, bubble and scatter.
TsgcHTMLComponent_GaugeTsgcHTMLComponent_GaugeSemicircular SVG gauge with low / mid / high colour thresholds.
TsgcHTMLComponent_DiagramTsgcHTMLComponent_DiagramNode-and-arrow flow diagram rendered as inline SVG.
TsgcHTMLComponent_MapTsgcHTMLComponent_MapLeaflet.js interactive map (OpenStreetMap / CartoDB tiles) with markers.
TsgcHTMLComponent_HeatmapTsgcHTMLComponent_HeatmapColour-scaled SVG heatmap grid from cell values or a bound dataset, with legend and row/column labels.
TsgcHTMLComponent_SparklineTsgcHTMLComponent_SparklineCompact inline SVG line, bar or area sparkline from a value series or a bound dataset.
TsgcHTMLComponent_CandlestickChartTsgcHTMLComponent_CandlestickChartSVG OHLC candlestick chart with wicks, up/down colours and an optional volume strip.
TsgcHTMLComponent_QRCodeTsgcHTMLComponent_QRCodePure-Pascal ISO/IEC 18004 SVG QR code from any text or URL, with selectable error correction level.
TsgcHTMLComponent_BarcodeTsgcHTMLComponent_BarcodePure-Pascal Code 128 SVG barcode from any ASCII text, with optional human-readable caption.
TsgcHTMLComponent_TreeMapTsgcHTMLComponent_TreeMapSquarified treemap rendered as a self-contained, server-generated inline SVG, no charting library required.
Everything you need to capture data, with validation and dataset binding.
TsgcHTMLComponent_FormTsgcHTMLComponent_FormData-driven form builder with validation, layouts and AI form generation.
TsgcHTMLComponent_EditTsgcHTMLComponent_EditSingle-line text input with label, help text and dataset binding.
TsgcHTMLComponent_MemoTsgcHTMLComponent_MemoMulti-line text-area input with label and help text.
TsgcHTMLComponent_CheckBoxTsgcHTMLComponent_CheckBoxCheckbox input with label and checked state.
TsgcHTMLComponent_RadioGroupTsgcHTMLComponent_RadioGroupGroup of mutually exclusive radio options.
TsgcHTMLComponent_SelectTsgcHTMLComponent_SelectSelect dropdown with option groups, multiple select and dataset binding.
TsgcHTMLComponent_InputGroupTsgcHTMLComponent_InputGroupInput with prepend / append addon text.
TsgcHTMLComponent_AutoCompleteTsgcHTMLComponent_AutoCompleteText input backed by an HTML5 datalist of suggestions.
TsgcHTMLComponent_DatePickerTsgcHTMLComponent_DatePickerNative date / time / datetime input field.
TsgcHTMLComponent_FileUploadTsgcHTMLComponent_FileUploadDrag-and-drop file upload zone with multipart form post.
TsgcHTMLComponent_RichEditorTsgcHTMLComponent_RichEditorQuill-based WYSIWYG rich-text editor with hidden form field.
TsgcHTMLComponent_RatingTsgcHTMLComponent_RatingStar (symbol) rating display or input.
TsgcHTMLComponent_MultiSelectTsgcHTMLComponent_MultiSelectA searchable Bootstrap multi-select dropdown with chips, grouped options and dataset binding.
TsgcHTMLComponent_ColorPickerTsgcHTMLComponent_ColorPickerA native HTML5 color input with an optional hex text field and swatch presets.
TsgcHTMLComponent_SliderTsgcHTMLComponent_SliderA Bootstrap range slider with a live value badge, min/max labels and color styling.
TsgcHTMLComponent_TimePickerTsgcHTMLComponent_TimePickerA native HTML5 time input with min/max bounds and second-level granularity.
TsgcHTMLComponent_SignaturePadTsgcHTMLComponent_SignaturePadA pointer-events canvas signature pad with Clear, Undo and Save actions.
TsgcHTMLComponent_TransferTsgcHTMLComponent_TransferDual-listbox widget to move items between an available and an assigned panel, with filtering and dataset binding.
TsgcHTMLComponent_DateTimePickerTsgcHTMLComponent_DateTimePickerNative HTML5 date-and-time picker combining calendar and clock in a single field.
TsgcHTMLComponent_DateRangePickerTsgcHTMLComponent_DateRangePickerPaired start and end date inputs for choosing a date range, with min/max bounds.
TsgcHTMLComponent_RangeSliderTsgcHTMLComponent_RangeSliderDual-handle slider selecting a low/high value pair, with live value badges.
Cards, media and KPI tiles to lay out a page.
TsgcHTMLComponent_PanelTsgcHTMLComponent_PanelBootstrap card panel with header / body / footer, collapsible and scrollable.
TsgcHTMLComponent_StatCardTsgcHTMLComponent_StatCardDashboard KPI / stat card with icon, trend arrow and optional gradient.
TsgcHTMLComponent_AccordionTsgcHTMLComponent_AccordionVertically collapsing accordion of stacked expandable panels.
TsgcHTMLComponent_CarouselTsgcHTMLComponent_CarouselImage slideshow / carousel with indicators, controls and autoplay.
TsgcHTMLComponent_ImageTsgcHTMLComponent_ImageImage with shape, responsive / lazy-load, lightbox link and caption.
TsgcHTMLComponent_AvatarTsgcHTMLComponent_AvatarUser avatar (image or initials) with size, shape and presence-status dot.
TsgcHTMLComponent_VideoTsgcHTMLComponent_VideoHTML5 video / audio player plus a YouTube embed helper.
TsgcHTMLComponent_BadgeTsgcHTMLComponent_BadgeSingle Bootstrap badge with color, pill shape, an inline icon and a positioned notification-dot mode.
TsgcHTMLComponent_PDFViewerTsgcHTMLComponent_PDFViewerIn-page PDF viewer backed by pdf.js, with page navigation, zoom, search, download and print.
TsgcHTMLComponent_ChipTsgcHTMLComponent_ChipCompact chip / tag with an optional icon, colour and a removable close button.
Dialogs, status surfaces and loading states.
TsgcHTMLComponent_ModalTsgcHTMLComponent_ModalModal dialog with title / body / footer, sizes, centered and static backdrop.
TsgcHTMLComponent_OffcanvasTsgcHTMLComponent_OffcanvasOff-canvas slide-in panel from the left, right, top or bottom.
TsgcHTMLComponent_PopoverTsgcHTMLComponent_PopoverPopover bubble on a trigger element (click / hover / focus).
TsgcHTMLComponent_ToastTsgcHTMLComponent_ToastToast notification with header, body, timestamp and auto-hide.
TsgcHTMLComponent_SnackbarTsgcHTMLComponent_SnackbarMaterial-style transient snackbar with an optional action.
TsgcHTMLComponent_NotificationTsgcHTMLComponent_NotificationBell-icon dropdown notification centre with an unread badge.
TsgcHTMLComponent_SpinnerTsgcHTMLComponent_SpinnerLoading spinner (border / grow), sized and coloured.
TsgcHTMLComponent_PlaceholderTsgcHTMLComponent_PlaceholderSkeleton / placeholder loading card with an animated shimmer.
TsgcHTMLComponent_ContextMenuTsgcHTMLComponent_ContextMenuRight-click dropdown menu scoped to a CSS selector, with icons, dividers, headers and server-routed actions.
TsgcHTMLComponent_JobProgressTsgcHTMLComponent_JobProgressLive list of background job progress bars with status badges, cancel buttons and out-of-band fragment updates.
TsgcHTMLComponent_LogViewerTsgcHTMLComponent_LogViewerStreaming log / terminal viewer with level filter, search and auto-scroll.
TsgcHTMLComponent_ProgressBarTsgcHTMLComponent_ProgressBarBootstrap progress bar, striped and animated, single or stacked multi-segment.
Conversational UI, from simple bubbles to a streaming AI assistant.
TsgcHTMLComponent_ChatBoxTsgcHTMLComponent_ChatBoxCard-style chat bubble box with an input bar and typing indicator.
TsgcHTMLComponent_ChatTsgcHTMLComponent_ChatWhatsApp-style chat with text / image / file / audio / video messages, read receipts and replies.
TsgcHTMLComponent_AIChatTsgcHTMLComponent_AIChatAI assistant chat with provider / model selector, token streaming and RAG source citations.
TsgcHTMLComponent_PresenceTsgcHTMLComponent_PresenceWho-is-online roster as an avatar stack or list, with live status updates.
Ready-made sign-in flows, from passwords to passkeys.
TsgcHTMLComponent_LoginTsgcHTMLComponent_LoginReady-made login form / page (card, centered or full-page) with remember-me and alerts.
TsgcHTMLComponent_SocialLoginTsgcHTMLComponent_SocialLoginOAuth social-login button panel (Google, Facebook, Apple, GitHub, Microsoft and more).
TsgcHTMLComponent_OAuthCallbackTsgcHTMLComponent_OAuthCallbackOAuth callback / landing page in success, error or loading state with auto-redirect.
TsgcHTMLComponent_WebAuthnLoginTsgcHTMLComponent_WebAuthnLoginPasswordless passkey / WebAuthn login and register widget.
TsgcHTMLComponent_RolesPermissionsTsgcHTMLComponent_RolesPermissionsRole / permission matrix with a checkbox per cell and live WebSocket grant updates.
TsgcHTMLComponent_UserManagementTsgcHTMLComponent_UserManagementUser administration table with roles, status, search and a per-row actions dropdown.
TsgcHTMLComponent_ImpersonateBannerTsgcHTMLComponent_ImpersonateBannerAdmin impersonation banner shown while acting as another user, with a one-click exit.
The non-visual pieces that serve the pages and keep them live.
TsgcHTMLEngine_ServerTsgcHTMLEngine_ServerHTML engine bound to a TsgcWebSocketHTTPServer that serves rendered pages and embedded assets.
TsgcHTMX_Engine_ServerTsgcHTMX_Engine_Serverhtmx 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.
TsgcHTMLPageBuilderTsgcHTMLPageBuilderAssembles registered components into a complete responsive page, with a design-time visual editor.
TsgcHTMLThemeControllerTsgcHTMLThemeControllerRuntime theme switcher whose Theme property (ptDefault, ptDark, ptDarkPro) applies the selected theme and shared stylesheet to the page.
TsgcHTMLThemeBuilderTsgcHTMLThemeBuilderCSS generator whose Mode (tmLight, tmDark, tmSystem) writes Bootstrap CSS variables from property values, with an optional OS-preference sync script for tmSystem.
TsgcHTMX_FragmentTsgcHTMX_FragmentOut-of-band htmx fragment for pushing a partial-page update from the server to the browser.
TsgcHTMX_RouterTsgcHTMX_RouterRouting table of Routes that matches an incoming request path and dispatches it (via HandleRequest) to that route's OnRoute handler.