Every component in the library, grouped into nine 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. All components apply automatic HTML, attribute, JavaScript and URL output encoding plus URL sanitization, so dynamic content is escaped by default to guard against XSS and injection.
13 components
7 components
4 components
12 components
7 components
8 components
3 components
4 components
8 classes
Grids, calendars and boards that render your datasets directly.
| Component | Class | Description | Help |
|---|---|---|---|
| Grid | TsgcHTMLComponent_Grid | Feature-rich table: sort, filter, CSV/PDF export, inline edit, grouping, virtual scroll and AI query. | Docs |
| DataTable | TsgcHTMLComponent_DataTable | Higher-level data table wrapping Grid + Pagination with a toolbar, search and row count. | Docs |
| Calendar | TsgcHTMLComponent_Calendar | Month-grid calendar with event dots and previous/next navigation. | Docs |
| Scheduler | TsgcHTMLComponent_Scheduler | Calendar scheduler (month / week views) rendering events by date. | Docs |
| Timeline | TsgcHTMLComponent_Timeline | Vertical timeline of dated events, loadable from a dataset. | Docs |
| KanbanBoard | TsgcHTMLComponent_KanbanBoard | Kanban board of columns and draggable cards. | Docs |
| Gantt | TsgcHTMLComponent_Gantt | Gantt project-timeline chart with task progress bars. | Docs |
Data-driven visuals built from your own numbers.
| Component | Class | Description | Help |
|---|---|---|---|
| Chart | TsgcHTMLComponent_Chart | Chart.js chart: line, bar, pie, doughnut, radar, polar, bubble and scatter. | Docs |
| Gauge | TsgcHTMLComponent_Gauge | Semicircular SVG gauge with low / mid / high colour thresholds. | Docs |
| Diagram | TsgcHTMLComponent_Diagram | Node-and-arrow flow diagram rendered as inline SVG. | Docs |
| Map | TsgcHTMLComponent_Map | Leaflet.js interactive map (OpenStreetMap / CartoDB tiles) with markers. | Docs |
Everything you need to capture data, with validation and dataset binding.
| Component | Class | Description | Help |
|---|---|---|---|
| Form | TsgcHTMLComponent_Form | Data-driven form builder with validation, layouts and AI form generation. | Docs |
| Edit | TsgcHTMLComponent_Edit | Single-line text input with label, help text and dataset binding. | Docs |
| Memo | TsgcHTMLComponent_Memo | Multi-line text-area input with label and help text. | Docs |
| CheckBox | TsgcHTMLComponent_CheckBox | Checkbox input with label and checked state. | Docs |
| RadioGroup | TsgcHTMLComponent_RadioGroup | Group of mutually exclusive radio options. | Docs |
| Select | TsgcHTMLComponent_Select | Select dropdown with option groups, multiple select and dataset binding. | Docs |
| InputGroup | TsgcHTMLComponent_InputGroup | Input with prepend / append addon text. | Docs |
| AutoComplete | TsgcHTMLComponent_AutoComplete | Text input backed by an HTML5 datalist of suggestions. | Docs |
| DatePicker | TsgcHTMLComponent_DatePicker | Native date / time / datetime input field. | Docs |
| FileUpload | TsgcHTMLComponent_FileUpload | Drag-and-drop file upload zone with multipart form post. | Docs |
| RichEditor | TsgcHTMLComponent_RichEditor | Quill-based WYSIWYG rich-text editor with hidden form field. | Docs |
| Rating | TsgcHTMLComponent_Rating | Star (symbol) rating display or input. | Docs |
Cards, media and KPI tiles to lay out a page.
| Component | Class | Description | Help |
|---|---|---|---|
| Panel | TsgcHTMLComponent_Panel | Bootstrap card panel with header / body / footer, collapsible and scrollable. | Docs |
| StatCard | TsgcHTMLComponent_StatCard | Dashboard KPI / stat card with icon, trend arrow and optional gradient. | Docs |
| Accordion | TsgcHTMLComponent_Accordion | Vertically collapsing accordion of stacked expandable panels. | Docs |
| Carousel | TsgcHTMLComponent_Carousel | Image slideshow / carousel with indicators, controls and autoplay. | Docs |
| Image | TsgcHTMLComponent_Image | Image with shape, responsive / lazy-load, lightbox link and caption. | Docs |
| Avatar | TsgcHTMLComponent_Avatar | User avatar (image or initials) with size, shape and presence-status dot. | Docs |
| Video | TsgcHTMLComponent_Video | HTML5 video / audio player plus a YouTube embed helper. | Docs |
Dialogs, status surfaces and loading states.
| Component | Class | Description | Help |
|---|---|---|---|
| Modal | TsgcHTMLComponent_Modal | Modal dialog with title / body / footer, sizes, centered and static backdrop. | Docs |
| Offcanvas | TsgcHTMLComponent_Offcanvas | Off-canvas slide-in panel from the left, right, top or bottom. | Docs |
| Popover | TsgcHTMLComponent_Popover | Popover bubble on a trigger element (click / hover / focus). | Docs |
| Toast | TsgcHTMLComponent_Toast | Toast notification with header, body, timestamp and auto-hide. | Docs |
| Snackbar | TsgcHTMLComponent_Snackbar | Material-style transient snackbar with an optional action. | Docs |
| Notification | TsgcHTMLComponent_Notification | Bell-icon dropdown notification centre with an unread badge. | Docs |
| Spinner | TsgcHTMLComponent_Spinner | Loading spinner (border / grow), sized and coloured. | Docs |
| Placeholder | TsgcHTMLComponent_Placeholder | Skeleton / placeholder loading card with an animated shimmer. | Docs |
Conversational UI, from simple bubbles to a streaming AI assistant.
| Component | Class | Description | Help |
|---|---|---|---|
| ChatBox | TsgcHTMLComponent_ChatBox | Card-style chat bubble box with an input bar and typing indicator. | Docs |
| Chat | TsgcHTMLComponent_Chat | WhatsApp-style chat with text / image / file / audio / video messages, read receipts and replies. | Docs |
| AIChat | TsgcHTMLComponent_AIChat | AI assistant chat with provider / model selector, token streaming and RAG source citations. | Docs |
Ready-made sign-in flows, from passwords to passkeys.
| Component | Class | Description | Help |
|---|---|---|---|
| Login | TsgcHTMLComponent_Login | Ready-made login form / page (card, centered or full-page) with remember-me and alerts. | Docs |
| SocialLogin | TsgcHTMLComponent_SocialLogin | OAuth social-login button panel (Google, Facebook, Apple, GitHub, Microsoft and more). | Docs |
| OAuthCallback | TsgcHTMLComponent_OAuthCallback | OAuth callback / landing page in success, error or loading state with auto-redirect. | Docs |
| WebAuthnLogin | TsgcHTMLComponent_WebAuthnLogin | Passwordless passkey / WebAuthn login and register widget. | Docs |
The non-visual pieces that serve the pages and keep them live.
| Component | Class | Description | Help |
|---|---|---|---|
| EngineServer | TsgcHTMLEngine_Server | HTML engine bound to a TsgcWebSocketHTTPServer that serves rendered pages and embedded assets. | Docs |
| HTMXEngine | TsgcHTMX_Engine_Server | htmx engine wired to the same server. It hooks the HTTP and WebSocket handlers, dispatches inbound requests and messages, and pushes or broadcasts HTML fragments to connected browsers in real time (DispatchRequest, DispatchMessage, PushFragment, BroadcastFragment). | Docs |
| PageBuilder | TsgcHTMLPageBuilder | Assembles registered components into a complete responsive page, with a design-time visual editor. | Docs |
| TemplateBootstrap | TsgcHTMLTemplate_Bootstrap | Wraps body content in a full Bootstrap 5 HTML document with theme, language and direction. | Docs |
| ThemeController | TsgcHTMLThemeController | Runtime theme switcher whose Theme property (ptDefault, ptDark, ptDarkPro) applies the selected theme and shared stylesheet to the page. | Docs |
| ThemeBuilder | TsgcHTMLThemeBuilder | CSS generator whose Mode (tmLight, tmDark, tmSystem) writes Bootstrap CSS variables from property values, with an optional OS-preference sync script for tmSystem. | Docs |
| HTMXFragment | TsgcHTMX_Fragment | Out-of-band htmx fragment for pushing a partial-page update from the server to the browser. | Docs |
| HTMXRouter | TsgcHTMX_Router | Routing table of Routes that matches an incoming request path and dispatches it (via HandleRequest) to that route's OnRoute handler. | Docs |