Alex Rivers Product Strategy

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)

User 1 User 2 User 3 User 4
+5

Project Contributors (Small)

User 5 User 6 User 7

Leadership Team (Large)

User 8 User 9 User 10 User 11

User Card

Profile summary cards for team directories, contact lists, and user management interfaces.

Sarah Chen

Sarah Chen

Senior Product Manager

Online
sarah.chen@company.com
Engineering Division
Marcus Rodriguez

Marcus Rodriguez

Lead Designer

Busy
marcus.r@company.com
Design & UX Team
Emma Watson

Emma Watson

Technical Writer

Away
emma.w@company.com
Documentation Team

Compact User Card

James Park

James Park

DevOps Engineer

Status Indicator

Visual presence indicators for user availability, system health, and real-time status display.

User Presence Status

Online
Busy - Do Not Disturb
Away - Back in 15 minutes
Offline

Avatar with Status Badge

User
User
User
User

System Status Bar

All Systems Operational

All services are running normally

Partial Service Disruption

Email service experiencing delays

Service Outage

Database service is currently unavailable

Scheduled Maintenance

System maintenance planned for tonight at 2:00 AM EST

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#

1
2
3
4
5
6
7
8
public class UserService
{
public async Task<User> GetUserAsync(int id)
{
return await _repository.FindByIdAsync(id);
}
}

Terminal Command

Bash

dotnet build && dotnet run

Callout & Banner

Page-level announcements, important notices, and promotional messages with semantic variants.

Callout Variants

Deployment Successful

Your application has been deployed to production successfully. All health checks passed.

Scheduled Maintenance

Our systems will undergo scheduled maintenance on Saturday, January 20th from 2:00 AM to 4:00 AM UTC. Services may be intermittently unavailable during this time.

Action Required

Your payment method is about to expire. Please update your billing information to avoid service interruption.

New Features Available

We've released several new components including drag-and-drop sortables, command palette, and enhanced data tables. Check out the Interactive page to see them in action.

Banner (Sticky Announcement)

Keyboard Shortcuts Display

Visual documentation of keyboard shortcuts and hotkeys for help guides and documentation.

Keyboard Shortcuts List

Navigation

Open command palette
Ctrl + K
Toggle sidebar
Ctrl + B
Go to home
Ctrl + Shift + H

Editing

Save changes
Ctrl + S
Undo
Ctrl + Z
Redo
Ctrl + Shift + Z

Help

Show keyboard shortcuts
F1

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

Updated 2 days ago Documentation

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.

Docs Interactive
JavaScript UI Components
Updated last week Architecture

Components in VanillaUIBaseApp follow three patterns: ViewComponents (server-rendered with C# logic), CSS Components (pure styling), and JavaScript Components (client-side interactive features).

Docs Architecture
Architecture Best Practices
Updated 1 month ago Components

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.

CSS UI Components

Filter Panel

Faceted search interface for filtering and refining large datasets with multiple criteria.

Filters

Category

Technology

💡 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
}