Components: the UI library apps are built from

Generated apps are assembled from Nibor's component library: 177 accessible, themed building blocks, from data tables to kanban boards.

Team chat and presence

A Slack-like chat is a set of components: saas-chat-shell (layout and orchestration), saas-chat-sidebar, saas-chat-messages, saas-chat-composer, saas-chat-reactions, saas-chat-thread and saas-chat-thread-panel, with saas-people-picker, saas-channel-dialog and saas-mention-input. The shell needs the Channel, ChannelMember and Message models with membership row-level security and the server functions from the Chat document; every organisation's built-in Chat app is exactly that document. Three smaller components work in any app: saas-presence (who is online), saas-typing-indicator and saas-unread-badge.

Wizards and uploads

saas-wizard runs a multi-step form (a booking, an onboarding) with per-step validation, an identity or signing step, and a saas-wizard-summary that prices what was chosen. saas-file-upload stores files in the organisation's bucket and names the storage-rule from the app spec that decides who may read them.

Per-item integration keys

saas-integration-key lets an app's admins enter a provider API key for one item, for example one storage facility's key for the PMS, from that item's admin page: <saas-integration-key provider="kiss" account="{{id}}" label="KISS API key">. The key is posted to the platform and stored encrypted there; server functions use it with ctx.callIntegration('kiss', ..., { account: facilityId }), falling back to the provider's default key. The app's tables never hold a key.

What is in the library

• Data: tables with sorting/filtering/pagination, detail views, forms with validation, import/export.
• Visualisation: charts, stat cards, progress, calendars, timelines, gantt, maps.
• Workflow: kanban boards, wizards, approval flows, comments, notifications and toasts.
• Structure: navigation, tabs, drawers, dialogs, dashboards and landing-page sections.

Signed-in builders can browse them all with live examples in the gallery at nibor.io/_gallery.

Theming

Components read your app's theme tokens (colors, radius, fonts), set in the Studio's Theme tab or inherited from your organisation's branding in the Portal. One change restyles the whole app consistently.

Custom components

When your app needs something the library lacks, the Studio's agent can create a custom component on the fly; it is saved to the shared registry so later apps (yours and, in anonymised form, the platform's) generate smarter. You can also ask for a specific component explicitly in chat.

Mobile

Every component is responsive by default: tables become cards, navigation collapses, touch targets grow. Preview any view at phone width from the Studio toolbar.