BluKavantUI Design system
ONE SHARED DESIGN LANGUAGE

BluKavantUI for web and OutSystems.

Thoughtful components.
Interfaces that work beautifully.

Build clear, consistent applications with reusable components, practical patterns, and complete screen templates. Bring the same attention to detail to your web and OutSystems projects.

Build for web Explore OutSystems
Explore the component library
From components to a complete website
BluKavantUI creative portfolio template with a full-width lake photograph, bold typography, and clear calls to action
Built with BluKavantUICreative portfolio · Screen templateTry the live screen
Small details.
A more consistent experience.
Component pages
52Explore, configure, interact
Screen templates
10Start with a complete view
Shared color families
19Give every state a purpose
Appearance options
3Light, dark, or your system
THE ENTERPRISE HEADLINERS

Two essentials.
A bigger impact on everyday work.

Give business data a powerful workspace. Give every process a better way to collect information.

DATA WORKSPACES

BluGrid

Turn complex datasets into a productive workspace.

  • Advanced filtering
  • Inline editing
  • Bulk saving
Discover BluGrid
BluGrid customer workspace with search, column filters, row selection, and pagination
DYNAMIC BUSINESS FORMS

Form Builder

Build the form your process needs. Make it easy to complete.

  • Visual editing
  • Conditional fields
  • Multiple pages
Discover Form Builder
Form Builder with a field toolbox, a two-column form canvas, and field settings
CHOOSE YOUR STARTING POINT

One design language.
Two ways to build.

Work in the environment you know, with a shared approach to color, layout, and interaction.

TYPESCRIPT / JAVASCRIPT

BluKavantUI for web

Bring BluKavantUI into your own web application with a browser library and working TypeScript examples.

  • A versioned @blukavantui/web package download
  • A Vite starter with runnable component examples
  • Your application, your data, your backend
Get started with web See a code example
OUTSYSTEMS 11 REACTIVE WEB

BluKavantUI for OutSystems

Build with native, reusable Blocks and explore their properties, events, and working examples.

  • Component references for Service Studio
  • Full commercial edition with editable source
  • Limited Community Forge edition coming soon
Explore OutSystems Editions & licensing
THE PIECES BEHIND THE EXPERIENCE

Built for the work
your application needs to do.

Browse all 52 components

Make complex data feel manageable.

Explore records, filter results, and edit with context.

Grid · FilterBuilder · DataImportWizard

Give every form a clear flow.

Compose dynamic forms, then guide people through their answers.

FormBuilder · FormRenderer · UploadManager

Keep the work moving.

Organize tasks, surface progress, and make the next action clear.

Kanban · Timeline · NotificationCenter

Bring the whole workspace together.

Connect navigation, page structure, and the details that matter.

Sidebar · PageHeader · DashboardCanvas

Make every interaction count.

Focus a task, reveal details, and give useful feedback.

Modal · Drawer · CommandPalette

Take the same care beyond the app.

Build expressive pages with media and reusable content sections.

HeroSection · MediaCard · CollectionLayout
More than a component screenshot.Change inputs in the playground. Try the examples. Explore TypeScript code, the OutSystems API, and accessibility notes.Open a playground
SEE THE PIECES COME TOGETHER

Start closer to the finished screen.

Explore complete layouts, try the interactions, and use the downloadable source as a starting point.

Real screens. Ready to explore.Built with ContentCarousel ↗
Explore all 10 screen templates
CONSISTENCY STARTS WITH THE FOUNDATIONS

The details should
feel like they belong together.

Shared colors, readable typography, and predictable spacing connect the whole experience. Explore the design decisions behind BluKavantUI and the accessibility guidance for each component.

Meet the design principles
Color with a purposeShared families, tokens, and contrast previewsA clear visual rhythmType, spacing, and shape working togetherInteractions within reachKeyboard guidance and documented support
YOUR NEXT INTERFACE STARTS HERE

Make it feel like BluKavantUI.

Explore a component. Try a screen. Start building.

Build for web Build with OutSystems

Search BluKavantUI