Community
55 components, including Basic Grid, modals, notifications, layouts, media and chat.
THE COMPONENT LIBRARYSmall details.
Small details.
Powerful building blocks.
From the first button to your most demanding data workspace. Explore 65 components for web and OutSystems, built around a consistent design language.
PRO COMPONENTS
Meet the headliners.
Pro
Full Grid, dynamic forms, annotation, imports, matrix editing, advanced filters, project timelines and Kanban. Install Pro alongside Community.
The same edition boundary applies to both platforms. Basic Grid is Community; the Grid playground shows Pro. AppLayout and PageLayout are included Community helpers documented with the screen templates.
Pro is an add-on to Community; Pro filters show the nine paid additions.
Showing all 65 components
Media & content
11 components
VideoAnnotator
Review footage with timed annotations, a persistent filmstrip, clickable timeline ranges and frame exports.
Explore component
ShapeMask
Wrap consumer-owned media in preset or custom masks; captions and actions stay outside.
Explore component
VideoPlayer
Present videos with playback controls, captions and a preview image.
Explore component
VideoLightbox
Open a video from a poster or compact play control; closing pauses playback and restores focus.
Explore component
MediaImage
Responsive cropped photography with optional zoom, caption and an accessible enlarged view.
Explore component
MediaCard
An image-led content card with below-image or overlay copy and an optional destination.
Explore component
ImageCompare
Compare two images with an accessible range control, pointer dragging and step buttons.
Explore component
TextHighlight
Emphasized text with a marker, underline, circle or hand-drawn accent.
Explore component
ContentCarousel
A responsive horizontal strip of arbitrary content with swipe, arrows and position indicators.
Explore component
ProfileCard
A portrait, role and biography with an optional accessible expanded profile.
Explore component
QuoteCard
A testimonial with clear attribution, optional portrait and rating.
Explore componentData
10 components
ProjectTimeline
Show project schedules with date-based task bars, progress, milestones and a today marker. Available for web and Pro OutSystems.
Explore component
DataImportWizard
Parse a CSV, map destination fields, correct values and submit validated rows to application-owned import logic.
Explore component
MatrixEditor
Edit a dynamic matrix with typed cells, row and column bulk operations, change tracking and correlated bulk saving.
Explore component
Sparkline
Compact trends with theme colors and readable underlying data.
Explore component
Statistic
Formats a numeric metric with supporting trend text, loading and semantic color.
Explore component
Descriptions
Responsive label/value details with optional row actions and semantic colors.
Explore component
Grid
Explore filtering, selection, bulk edits, row actions, and expandable details.
Explore component
Kanban
Organize work, edit cards, and save changes together.
Explore component
FilterBuilder
Build readable rules with nested AND / OR groups.
Explore component
Basic Grid
Display supplied rows with sorting, filtering, pagination and single-row selection.
Explore componentInput & selection
12 components
DatePicker
Pick or type an ISO calendar date with direct month/year navigation.
Explore component
TimePicker
Pick or type a local time with configurable intervals and 12/24-hour display.
Explore component
DateTimePicker
Select a calendar date and local time without implicit time-zone conversion.
Explore component
DateRangePicker
Select an inclusive date range, enforce limits and offer optional presets.
Explore component
FloatButton
A themed floating action button with built-in or custom SVG/image icons, an optional label and badge.
Explore component
Cascader
Selects a value through horizontal hierarchy columns. Reuses BluTreeNode and returns the complete selected path.
Explore component
Button
Explore colors, variants, sizes, and interaction states.
Explore component
Chip & ChipGroup
Compact labels for selection, filtering, and removal.
Explore component
TransferList
Search, select, and move items between two lists.
Explore component
TreeSelect
Find and select values within a hierarchy.
Explore component
UploadManager
Validate, queue, upload, cancel, and retry files.
Explore componentFoundations
1 components
Feedback & overlays
7 components
Chat
An embedded chatbot conversation with suggested prompts, safe Markdown, streaming updates and a multiline composer.
Explore component
ChatWidget
A floating, expandable chat panel that preserves its conversation and draft while minimized.
Explore component
NotificationCenter
A notification inbox with unread count, search, categories, archive actions and optional bell popover.
Explore component
Modal
Keep people focused on a task with a dialog that supports keyboard navigation and preserves their input.
Explore component
Drawer
Show details or a form in a side panel without leaving the current page.
Explore component
Notification
Keep people informed with messages they can act on or dismiss, with optional automatic closing.
Explore component
Tour
Guides people through dynamic target elements with a focus-managed dialog and highlighted region.
Explore componentForms
2 components
FormBuilder
Build dynamic, multi-page forms as versioned JSON. Owns field editing, file-upload field definitions, sections, conditions, preview, undo and correlated saving. Store the complete definition in one RawJson field.
Explore component
FormRenderer
Render any FormId on one application screen. Validates answers and navigates form steps inside this Block. FileUpload fields use a consumer-supplied upload endpoint. The application owns storage, authorization and email/edit links.
Explore componentWebsite sections
4 components
CollectionLayout
Arrange images, cards and other content in a responsive grid, staggered layout or masonry collection.
Explore component
HeroSection
Create a full-width introduction with a cover image, readable text and room for your main action.
Explore component
SplitSection
An editorial media-and-copy section with reversible order and responsive stacking.
Explore component
LogoCloud
A responsive collection of organization logos with optional destinations.
Explore componentLayout
4 components
DashboardCanvas & DashboardPanel
Create a workspace people can arrange, resize and personalize.
Explore component
AppLayout
Shared application shell, navigation and responsive content layout.
Explore component
PageLayout
Consistent page spacing, content regions and responsive form layout.
Explore componentContent & display
8 components
ImageAnnotator
Draw boxes, arrows, pins and freehand marks; add comments, undo changes and export a marked-up copy.
Explore component
Timeline
Displays a dynamic, ordered activity history with status colors and optional item actions.
Explore component
QRCode
Generates a QR code locally and downloads SVG or PNG. No network service is used.
Explore component
EmptyState
Explain an empty view and offer a helpful next step.
Explore component
Badge
Small, descriptive labels for status and context.
Explore component
Card
A consistent surface for related content and actions.
Explore component
Skeleton
Reserve space and communicate that content is loading.
Explore component
Splitter
Resizable panes that preserve the content inside them.
Explore componentNavigation
6 components
Pagination
Help people browse records with page numbers, page-size choices and clear navigation.
Explore component
Breadcrumbs
Show the current location within an application.
Explore component
PageHeader
A clear page title, supporting context, and relevant actions.
Explore component
Sidebar
A reusable navigation surface with independent scrolling.
Explore component
TreeView
Explore, expand, and select hierarchical records.
Explore component
CommandPalette
Search and run application commands from one place.
Explore componentNo matching components
Try another search or choose a different platform or edition.
BUILD WITH BLUKAVANTUI
Your platform. A shared design language.
Get the TypeScript starter for your web app, or explore native Blocks for OutSystems.