BlazzyMotion.Bento 1.0.2

BlazzyMotion.Bento

A modern Bento Grid component for Blazor with Composition Mode for building rich dashboard layouts. Combine metrics, features, cards, quotes, and embed other components like BzCarousel.

Table of Contents

• Features
• Live Demo
• Perfect For
• Quick Start
• Composition Mode
• Built-in Components
• Items Mode
• API Reference
• Themes
• Responsive Behavior
• CSS Customization
• How It Works
• Performance
• Troubleshooting
• Browser Support
• Contributing
• License
• Author
• Support

Features

• Composition Mode - Build complex layouts with metrics, features, cards, and quotes
• Embed Any Component - Nest BzCarousel, charts, or any Blazor component inside grid cells
• 5 Built-in Components - BzBentoItem, BzBentoCard, BzBentoMetric, BzBentoFeature, BzBentoQuote
• Flexible Grid Spanning - ColSpan and RowSpan (1-4) for each item
• Staggered Animations - Intersection Observer-powered entrance animations
• Multiple Themes - Glass, Dark, Light, and Minimal themes
• CSS Grid Powered - Native CSS Grid with grid-auto-flow: dense for gap-free layouts
• Responsive Design - Automatic column reduction on tablet and mobile
• Items Mode - Simple image gallery with zero configuration (for basic use cases)

Live Demo

Experience BlazzyMotion.Bento in action: View Live Demo

Perfect For

• SaaS Dashboards - Display metrics, KPIs, and status indicators
• Landing Pages - Apple-style feature showcases with mixed content
• Admin Panels - Combine charts, stats, and data tables in one view
• Portfolio Sites - Showcase projects with varying sizes and emphasis
• Product Pages - Mix product images, reviews, and specifications

Quick Start

Installation

dotnet add package BlazzyMotion.Bento

Or via Package Manager Console:

Install-Package BlazzyMotion.Bento

Basic Composition Mode

The primary way to use BzBento is Composition Mode - building layouts with built-in components:

@using BlazzyMotion.Bento.Components
@using BlazzyMotion.Core.Models

<BzBento TItem="object" Theme="BzTheme.Glass" Columns="4">

    <BzBentoCard ColSpan="2" RowSpan="2"
                 Image="images/hero.jpg"
                 Title="Featured Product"
                 Description="Our flagship offering" />

    <BzBentoMetric Value="12,847" Label="Active Users" Trend="+23%" />
    <BzBentoMetric Value="99.9%" Label="Uptime" />

    <BzBentoFeature ColSpan="2"
                    IconText="⚡"
                    Label="Lightning Fast"
                    Description="Built for performance" />

    <BzBentoQuote Text="This component saved us weeks of development!"
                  Author="Jane Doe"
                  Role="Tech Lead" />

</BzBento>

Composition Mode

Composition Mode is the recommended approach for BzBento. It gives you complete control over the layout by combining built-in components.

Dashboard Example

Build interactive dashboards by combining metrics, features, and embedded components:

<BzBento TItem="object" Theme="BzTheme.Glass" Columns="4">

    
    <BzBentoItem ColSpan="2" RowSpan="2">
        <BzCarousel TItem="Company"
                    Items="companies"
                    OnItemSelected="OnCompanyChanged" />
    </BzBentoItem>

    
    <BzBentoMetric Value="@company?.Revenue" Label="Revenue" Trend="+23%" />
    <BzBentoMetric Value="@company?.Users" Label="Users" Trend="+12%" />
    <BzBentoMetric Value="99.9%" Label="Uptime" />
    <BzBentoMetric Value="24ms" Label="Response Time" />

    
    <BzBentoFeature ColSpan="2"
                    IconText="📊"
                    Label="Q4 Report Ready"
                    Description="Revenue exceeded targets by 15%" />

    
    <BzBentoQuote ColSpan="2"
                  Text="The best Blazor component library we've used."
                  Author="John Smith"
                  Role="CTO at TechCorp" />

</BzBento>

@code {
    private List<Company> companies = new();
    private Company? company;

    private void OnCompanyChanged(Company c) => company = c;
}

Embedding Components

Use BzBentoItem to embed any Blazor component inside the grid:

<BzBento TItem="object" Columns="3">

    
    <BzBentoItem ColSpan="2" RowSpan="2">
        <BzCarousel TItem="Product" Items="products" />
    </BzBentoItem>

    
    <BzBentoItem ColSpan="1" RowSpan="2">
        <MyChartComponent Data="chartData" />
    </BzBentoItem>

    
    <BzBentoItem ColSpan="3">
        <div class="custom-footer">
            <p>Custom HTML content goes here</p>
        </div>
    </BzBentoItem>

</BzBento>

Built-in Components

All components support ColSpan (1-4), RowSpan (1-4), and OnClick for grid spanning and interaction.

BzBentoItem

Base container for embedding any content:

<BzBentoItem ColSpan="2" RowSpan="2">
    <BzCarousel TItem="Product" Items="products" />
</BzBentoItem>

BzBentoCard

Image card with overlay text:

<BzBentoCard ColSpan="2" RowSpan="2"
             Image="images/hero.jpg"
             Title="Featured"
             Description="Our flagship product" />

BzBentoMetric

KPI/statistic display with trend indicator:

<BzBentoMetric Value="12,847" Label="Active Users" Trend="+23%" IconText="👥" />

BzBentoFeature

Feature showcase with icon:

<BzBentoFeature ColSpan="2"
                IconText="⚡"
                Label="Lightning Fast"
                Description="Built for performance" />

BzBentoQuote

Testimonial/quote display:

<BzBentoQuote ColSpan="2"
              Text="This component saved us weeks!"
              Author="Jane Doe"
              Role="Tech Lead"
              Avatar="images/jane.jpg" />

Items Mode

For simple uniform image grids, you can use Items Mode with the Items parameter. Mark your model with [BzImage] and [BzTitle] attributes, and the Source Generator creates the template automatically.

<BzBento TItem="Product" Items="products" Columns="4" OnItemSelected="HandleClick" />

See Composition Mode for full layout control with metrics, features, and embedded components.

API Reference

BzBento Parameters

Themes

<BzBento Items="items" Theme="BzTheme.Glass" />   
<BzBento Items="items" Theme="BzTheme.Dark" />    
<BzBento Items="items" Theme="BzTheme.Light" />   
<BzBento Items="items" Theme="BzTheme.Minimal" /> 

Responsive Behavior

CSS Customization

Override CSS variables for custom styling:

.my-bento {
  --bzb-columns: 3;
  --bzb-gap: 24px;
  --bzb-card-radius: 12px;
  --bzb-bg: rgba(100, 50, 200, 0.1);
}

<BzBento Items="items" CssClass="my-bento" />

How It Works

Source Generator Magic

When you mark a property with [BzImage], the BlazzyMotion Source Generator automatically creates a registration function during compilation:

// Auto-generated at compile-time
internal static class BzMappingRegistration_Product
{
    [ModuleInitializer]
    internal static void Register()
    {
        BzRegistry.Register<Product>(item => new BzItem
        {
            ImageUrl = item.ImageUrl,
            Title = item.Name,
            OriginalItem = item
        });
    }
}

The [ModuleInitializer] attribute ensures registration runs automatically at application startup - zero reflection, zero configuration.

Composition Mode Rendering

In Composition Mode, BzBento uses CSS Grid with grid-auto-flow: dense to automatically fill gaps:

1. Each BzBentoItem, BzBentoCard, etc. becomes a grid item
2. ColSpan and RowSpan control grid-column and grid-row CSS properties
3. The dense algorithm places items efficiently without leaving gaps

Performance

• Zero Runtime Overhead - Mapping functions generated at compile-time
• Zero Reflection - Uses [ModuleInitializer] for automatic registration
• GPU Accelerated - Animations use will-change: transform, opacity
• Intersection Observer - Only animates items when they enter viewport
• CSS Grid Native - Browser-optimized layout engine

Troubleshooting

Template Not Generated:

• Ensure [BzImage] is on a public string property
• Rebuild the project
• Add @using BlazzyMotion.Core.Attributes

Grid Items Not Visible:

• Check that Items is not null or empty
• Verify image URLs are accessible

Animations Not Working:

• Verify AnimationEnabled="true"
• Check browser Intersection Observer support

Browser Support

Contributing

Contributions are welcome! Please feel free to submit issues or pull requests.

git clone https://github.com/Blazzy-Motion/BlazzyMotion.git
cd BlazzyMotion
dotnet build
dotnet test

License

MIT License - see LICENSE for details.

Author

• GitHub: @nenad0707
• LinkedIn: Nenad Ristic

Support

If you find BlazzyMotion.Bento useful, please consider:

• Giving it a star on GitHub
• Sharing it with other Blazor developers
• Reporting bugs or suggesting features via GitHub Issues

For questions or support, please open an issue on GitHub.

Part of the BlazzyMotion component ecosystem.