Product Strategy
Enterprise Components
Enterprise-specific UI components for professional web applications: avatar groups, user cards, status indicators, code display, announcements, keyboard shortcuts, search results, and advanced filtering.
Avatar Group
Overlapping profile images for displaying teams, contributors, and collaborators with visual grouping.
Team Members (Default Size)
Project Contributors (Small)
Leadership Team (Large)
User Card
Profile summary cards for team directories, contact lists, and user management interfaces.
Sarah Chen
Senior Product Manager
Marcus Rodriguez
Lead Designer
Emma Watson
Technical Writer
Compact User Card
James Park
DevOps Engineer
Status Indicator
Visual presence indicators for user availability, system health, and real-time status display.
User Presence Status
Avatar with Status Badge
System Status Bar
Code Block
Syntax-highlighted code display for documentation, examples, and technical content with copy-to-clipboard functionality.
JavaScript Example
app.js
JavaScript
// Initialize theme toggle
function initThemeToggle() {
const toggle = document.querySelector('[data-theme-toggle]');
if (!toggle) return;
toggle.addEventListener('click', () => {
const current = document.documentElement.dataset.theme;
const next = current === 'dark' ? 'light' : 'dark';
document.documentElement.dataset.theme = next;
writeCookie('app-theme', next);
});
}
C# Example with Line Numbers
UserService.cs
C#
Terminal Command
Bash
dotnet build && dotnet run
Callout & Banner
Page-level announcements, important notices, and promotional messages with semantic variants.
Callout Variants
Deployment Successful
Scheduled Maintenance
Action Required
New Features Available
Banner (Sticky Announcement)
Keyboard Shortcuts Display
Visual documentation of keyboard shortcuts and hotkeys for help guides and documentation.
Keyboard Shortcuts List
Navigation
Editing
Help
Inline Keyboard Keys
Press Ctrl + K to open the command palette, or press F1 for help.
Use arrow keys ↑ ↓ ← → to navigate through options.
Search Results
Highlighted search results with query matching, metadata display, and rich result cards.
Search Results for "components"
Showing 4 results for components
Comprehensive guide to interactive components including drag-and-drop sortables, context menus, command palette, popovers, tree views, sliders, ratings, and carousels. All components support mouse, touch, and keyboard interactions.
Components in VanillaUIBaseApp follow three patterns: ViewComponents (server-rendered with C# logic), CSS Components (pure styling), and JavaScript Components (client-side interactive features).
The template includes a comprehensive button system with 4 size variants (xs, sm, md, lg), 5 style variants (primary, secondary, outline, ghost, danger), icon buttons, button groups, and loading states.
Filter Panel
Faceted search interface for filtering and refining large datasets with multiple criteria.
Filters
Category
Technology
Date Modified
Complexity
💡 Try toggling filters to see how they work. Active filters appear as removable tags.
Filtered results would appear here based on selected criteria.
Feature Flags Component
Admin interface for managing feature flags with toggle controls, search, filtering, and persistence.
Feature Flags Management
Register and manage application feature flags with a visual interface
JavaScript API
FeatureFlags API
JavaScript
// Register a feature flag
VanillaUI.FeatureFlags.registerFlag({
key: 'dark-mode',
name: 'Dark Mode',
description: 'Enable dark theme across the application',
enabled: false,
category: 'UI',
tags: ['theme', 'appearance'],
rolloutPercentage: 50 // Optional gradual rollout
});
// Check if feature is enabled
if (VanillaUI.FeatureFlags.isEnabled('dark-mode')) {
// Feature logic
}
// Set flag state
VanillaUI.FeatureFlags.setFlag('dark-mode', true);
// Get all flags
const flags = VanillaUI.FeatureFlags.getAllFlags();
// Render UI
VanillaUI.FeatureFlags.renderUI('#container', {
showSearch: true,
showFilters: true
});
// Listen for changes
VanillaUI.FeatureFlags.addListener((event, data) => {
if (event === 'flag:changed') {
console.log(`Flag ${data.key} changed to ${data.enabled}`);
}
});
Share Menu Component
Social and email sharing with native Web Share API support, platform-specific integrations, and copy-to-clipboard functionality.
Share Button with Dropdown
Article Preview
Check out this amazing article about building enterprise web applications with vanilla JavaScript and CSS.
Native Web Share API
Modern Browser Share
Uses the native share dialog on supported devices (mobile browsers, etc.)
Native share may not be available on desktop browsers
Dynamic Share Menu Creation
Create Share Menu Programmatically
Generate share menus with custom platforms and content.
JavaScript API
ShareMenu API
JavaScript
// Open/close share menu
VanillaUI.ShareMenu.open('menu-id');
VanillaUI.ShareMenu.close('menu-id');
VanillaUI.ShareMenu.toggle('menu-id');
// Share to specific platform
VanillaUI.ShareMenu.shareToPlatform('twitter', {
title: 'Article Title',
text: 'Check this out!',
url: 'https://example.com'
});
// Use native Web Share API
VanillaUI.ShareMenu.share({
title: 'Share Title',
text: 'Share description',
url: 'https://example.com'
});
// Create menu dynamically
const menu = VanillaUI.ShareMenu.createMenu({
id: 'my-share-menu',
title: 'Share This Content',
url: window.location.href,
shareTitle: document.title,
platforms: ['twitter', 'facebook', 'linkedin', 'email'],
showCopyLink: true
});
document.body.appendChild(menu);
// Check Web Share API support
if (VanillaUI.ShareMenu.isWebShareSupported()) {
// Use native share
}