sgcHTML Feature Matrix
Every component in the library, grouped into eight families. Each one renders to Bootstrap 5 markup and works the same in Delphi, C++ Builder and .NET. Click a component for its own page with usage and examples.
Every component in the library, grouped into eight families. Each one renders to Bootstrap 5 markup and works the same in Delphi, C++ Builder and .NET. Click a component for its own page with usage and examples.
12 components
7 components
4 components
12 components
7 components
8 components
3 components
4 components
Grids, calendars and boards that render your datasets directly.
| Component | Class | Description |
|---|---|---|
| Grid | TsgcHTMLComponent_Grid | Feature-rich table: sort, filter, CSV/PDF export, inline edit, grouping, virtual scroll and AI query. |
| DataTable | TsgcHTMLComponent_DataTable | Higher-level data table wrapping Grid + Pagination with a toolbar, search and row count. |
| Calendar | TsgcHTMLComponent_Calendar | Month-grid calendar with event dots and previous/next navigation. |
| Scheduler | TsgcHTMLComponent_Scheduler | Calendar scheduler (month / week views) rendering events by date. |
| Timeline | TsgcHTMLComponent_Timeline | Vertical timeline of dated events, loadable from a dataset. |
| KanbanBoard | TsgcHTMLComponent_KanbanBoard | Kanban board of columns and draggable cards. |
| Gantt | TsgcHTMLComponent_Gantt | Gantt project-timeline chart with task progress bars. |
Data-driven visuals built from your own numbers.
| Component | Class | Description |
|---|---|---|
| Chart | TsgcHTMLComponent_Chart | Chart.js chart: line, bar, pie, doughnut, radar, polar, bubble and scatter. |
| Gauge | TsgcHTMLComponent_Gauge | Semicircular SVG gauge with low / mid / high colour thresholds. |
| Diagram | TsgcHTMLComponent_Diagram | Node-and-arrow flow diagram rendered as inline SVG. |
| Map | TsgcHTMLComponent_Map | Leaflet.js interactive map (OpenStreetMap / CartoDB tiles) with markers. |
Everything you need to capture data, with validation and dataset binding.
| Component | Class | Description |
|---|---|---|
| Form | TsgcHTMLComponent_Form | Data-driven form builder with validation, layouts and AI form generation. |
| Edit | TsgcHTMLComponent_Edit | Single-line text input with label, help text and dataset binding. |
| Memo | TsgcHTMLComponent_Memo | Multi-line text-area input with label and help text. |
| CheckBox | TsgcHTMLComponent_CheckBox | Checkbox input with label and checked state. |
| RadioGroup | TsgcHTMLComponent_RadioGroup | Group of mutually exclusive radio options. |
| Select | TsgcHTMLComponent_Select | Select dropdown with option groups, multiple select and dataset binding. |
| InputGroup | TsgcHTMLComponent_InputGroup | Input with prepend / append addon text. |
| AutoComplete | TsgcHTMLComponent_AutoComplete | Text input backed by an HTML5 datalist of suggestions. |
| DatePicker | TsgcHTMLComponent_DatePicker | Native date / time / datetime input field. |
| FileUpload | TsgcHTMLComponent_FileUpload | Drag-and-drop file upload zone with multipart form post. |
| RichEditor | TsgcHTMLComponent_RichEditor | Quill-based WYSIWYG rich-text editor with hidden form field. |
| Rating | TsgcHTMLComponent_Rating | Star (symbol) rating display or input. |
Cards, media and KPI tiles to lay out a page.
| Component | Class | Description |
|---|---|---|
| Panel | TsgcHTMLComponent_Panel | Bootstrap card panel with header / body / footer, collapsible and scrollable. |
| StatCard | TsgcHTMLComponent_StatCard | Dashboard KPI / stat card with icon, trend arrow and optional gradient. |
| Accordion | TsgcHTMLComponent_Accordion | Vertically collapsing accordion of stacked expandable panels. |
| Carousel | TsgcHTMLComponent_Carousel | Image slideshow / carousel with indicators, controls and autoplay. |
| Image | TsgcHTMLComponent_Image | Image with shape, responsive / lazy-load, lightbox link and caption. |
| Avatar | TsgcHTMLComponent_Avatar | User avatar (image or initials) with size, shape and presence-status dot. |
| Video | TsgcHTMLComponent_Video | HTML5 video / audio player plus a YouTube embed helper. |
Dialogs, status surfaces and loading states.
| Component | Class | Description |
|---|---|---|
| Modal | TsgcHTMLComponent_Modal | Modal dialog with title / body / footer, sizes, centered and static backdrop. |
| Offcanvas | TsgcHTMLComponent_Offcanvas | Off-canvas slide-in panel from the left, right, top or bottom. |
| Popover | TsgcHTMLComponent_Popover | Popover bubble on a trigger element (click / hover / focus). |
| Toast | TsgcHTMLComponent_Toast | Toast notification with header, body, timestamp and auto-hide. |
| Snackbar | TsgcHTMLComponent_Snackbar | Material-style transient snackbar with an optional action. |
| Notification | TsgcHTMLComponent_Notification | Bell-icon dropdown notification centre with an unread badge. |
| Spinner | TsgcHTMLComponent_Spinner | Loading spinner (border / grow), sized and coloured. |
| Placeholder | TsgcHTMLComponent_Placeholder | Skeleton / placeholder loading card with an animated shimmer. |
Conversational UI, from simple bubbles to a streaming AI assistant.
| Component | Class | Description |
|---|---|---|
| ChatBox | TsgcHTMLComponent_ChatBox | Card-style chat bubble box with an input bar and typing indicator. |
| Chat | TsgcHTMLComponent_Chat | WhatsApp-style chat with text / image / file / audio / video messages, read receipts and replies. |
| AIChat | TsgcHTMLComponent_AIChat | AI assistant chat with provider / model selector, token streaming and RAG source citations. |
Ready-made sign-in flows, from passwords to passkeys.
| Component | Class | Description |
|---|---|---|
| Login | TsgcHTMLComponent_Login | Ready-made login form / page (card, centered or full-page) with remember-me and alerts. |
| SocialLogin | TsgcHTMLComponent_SocialLogin | OAuth social-login button panel (Google, Facebook, Apple, GitHub, Microsoft and more). |
| OAuthCallback | TsgcHTMLComponent_OAuthCallback | OAuth callback / landing page in success, error or loading state with auto-redirect. |
| WebAuthnLogin | TsgcHTMLComponent_WebAuthnLogin | Passwordless passkey / WebAuthn login and register widget. |
The non-visual pieces that serve the pages and keep them live.
| Class | Role |
|---|---|
TsgcHTMLEngine_Server | HTML engine bound to a TsgcWebSocketHTTPServer that serves rendered pages and embedded assets. |
TsgcHTMX_Engine_Server | htmx engine wired to the same server: partial-page swaps over HTTP and live server push over WebSockets. |
TsgcHTMLPageBuilder | Assembles registered components into a complete responsive page (with a design-time visual editor). |
TsgcHTMLTemplate_Bootstrap | Wraps body content in a full Bootstrap 5 HTML document with theme, language and direction. |
TsgcHTMLThemeController / TsgcHTMLThemeBuilder | Light / dark theming and a runtime CSS generator writing Bootstrap CSS variables. |
TsgcHTMX_Fragment / TsgcHTMX_Router | Out-of-band htmx fragments for live updates and request routing helpers. |