BluKavantUI Design system
TEMPLATES

SaaS product

A luminous Relay product website with a real Kanban workspace, ProjectTimeline and connected task details.

Web + OutSystemsPro
Open web preview ↗Get Pro template source →Get complete starter →

Screen preview

The image below shows the TypeScript screen. Open the web preview to try its controls; it runs the same source included in the starter.

SaaS product TypeScript screen

What is custom?

Relay’s hero, workspace arrangement, feature bands and branding are template composition. Kanban is a real board; ProjectTimeline renders the schedule; task details open a real Drawer.

Additional CSS: website-templates.css owns template layout, typography, branding, spacing, responsive rules and finite entrance effects. It respects reduced motion. Component behavior remains in the library.

Web / TypeScript setup

Components used

Sidebar · Kanban · Descriptions · ProjectTimeline · Drawer · Card · Badge · Button

Files to copy

saas.ts · website-shared.ts · website-templates.css

  1. Install @blukavantui/community and the licensed @blukavantui/pro add-on using the downloadable starter. Copy these files together into your templates directory.
  2. Load @blukavantui/community/theme.css once. Keep the component CSS imports and the local website-templates.css import; use a bundler that supports CSS.
  3. Call mount(host, env), then call destroy() when removing the screen. Each instance owns and disposes its components.
import '@blukavantui/community/theme.css'
import {mount} from './templates/saas'
const screen = mount(document.getElementById('app')!, {
  assetBase: '/assets/templates/',
  galleryUrl: '/templates',
})
// On route exit: screen.destroy()

Data and actions

Replace the sample tasks and schedule arrays with your data. Connect card and timeline activation to your task service. Product and pricing calls to action deliberately show a preview; they do not create accounts or sell subscriptions. Keep TodayDate pinned, or provide a user control for the automatic today marker.

Images and appearance

The product preview is rendered with components, not a screenshot. Marketing screens explicitly use the light palette for their branded compositions. Split Login follows the application theme for its form and uses the light palette for its workspace illustration. The local composition styles preserve the template’s visual identity; test your replacement content and colors for contrast, keyboard operation and mobile reflow.

OutSystems Pro setup

Copy TemplateSaas from BluKavantUi_Pro_Demo, together with its private WebsiteTemplateLayout layout and required assets. Producers: BluKavantUi_Community_Core, BluKavantUi_Community_Layout, BluKavantUi_Community_Feedback, BluKavantUi_Pro_Data.

Components: Sidebar · Kanban · ProjectTimeline · Drawer · Card · Badge · Button.

  1. Select the referenced Blocks, public structures and static entities in Manage Dependencies. Use the original producer-owned types.
  2. Set BluUICommunityTheme from BluKavantUi_Community_Core as your consumer’s Base Theme.
  3. Copy WebsiteTemplateLayout with its Style Sheet and placeholders. Preserve the screen’s classes, locals, lifecycle and event handlers. Each library Block supplies its own runtime and CSS.
  4. Replace sample data and preview actions with validated Server Actions. Apply your own access roles; do not inherit demo permissions blindly.

Replace BoardTasks, BoardColumns and ProjectPlan with application data. OpenItem handles Kanban and ProjectTimeline activation; DrawerChanged synchronizes the panel state. Replace PreviewPlan with your signup or sales action. Keep TodayDate pinned or supply a user-controlled date marker.

The native shared layout includes website-templates.css plus scoped adjustments for native wrappers and the existing login form. Copy its full Style Sheet with the layout.

Pro alongside Community

This screen uses Kanban, ProjectTimeline. Install the licensed Pro add-on alongside Community; the shared UI comes from Community.

The native TemplateSaas screen is published in BluKavantUi_Pro_Demo. Copy its private WebsiteTemplateLayout layout and preserve producer-owned types, scripts and event mappings. Your application supplies access roles, authentication and persistence.

All nine Community and five Pro native templates are published in the development environment. Official Forge distribution remains pending.

Open OutSystems screen ↗

Search BluKavantUI