Small details.
Powerful building blocks.
From the first button to your most demanding data workspace. Explore 52 components for web and OutSystems, built around a consistent design language.
Meet the headliners.
Version tags identify the current web package. Free OutSystems Community components are marked below; the Forge release is coming soon. Grid Basic has a limited, read-only feature set.
Enterprise includes the Community components.
Showing all 52 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 componentInput & selection
7 components
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 componentForms
2 components
FormBuilder
Build dynamic, multi-page forms as versioned JSON. Owns field editing, sections, conditions, preview, undo and correlated saving. No application storage or endpoint calls.
Explore component
FormRenderer
Render any FormId on one application screen. Validates answers and navigates form steps inside this Block. Loading, saving, endpoint calls and email/edit links belong to the owning app.
Explore componentMedia & content
9 components
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 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
1 components
Data
8 components
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 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.
Your platform. A shared design language.
Get the TypeScript starter for your web app, or explore native Blocks for OutSystems.