SummitUI - Installation

Prerequisites

.NET 10 or later
Blazor WebAssembly, Blazor Server, or Blazor Web App project

1. Install the Package

Add SummitUI to your project using the .NET CLI or NuGet Package Manager.

.NET CLI

bash

dotnet add package SummitUI

Package Manager Console

powershell

Install-Package SummitUI

PackageReference

Or add directly to your .csproj file:

xml

<PackageReference Include="SummitUI" Version="*" />

2. Add Imports

Add the following to your _Imports.razor file to make SummitUI components available throughout your application:

csharp

@using SummitUI

Alternatively, you can import specific component namespaces as needed in individual files.

3. JavaScript Interop (Automatic)

SummitUI uses ES6 modules for JavaScript interop which are loaded automatically when needed. No manual script includes are required - the library handles this for you.

Note: JavaScript modules are lazy-loaded only when components that require them are rendered. This ensures optimal performance and minimal bundle size.

4. Start Using Components

You're ready to use SummitUI components! Here's a quick example:

xml

<AccordionRoot DefaultValue="item-1">
    <AccordionItem Value="item-1">
        <AccordionHeader>
            <AccordionTrigger class="accordion-trigger">
                What is SummitUI?
            </AccordionTrigger>
        </AccordionHeader>
        <AccordionContent class="accordion-content">
            <p>SummitUI is a headless Blazor component library focused on accessibility.</p>
        </AccordionContent>
    </AccordionItem>
</AccordionRoot>

Render Mode Support

SummitUI components work across all Blazor render modes. Here's what you need to know for each:

Pre-rendering

Both WebAssembly and Server modes support pre-rendering for fast initial page loads.

Server

Full interactivity via SignalR. Components work out of the box with real-time updates.

WebAssembly

Full interactivity in the browser. Components run entirely client-side after initial load.

Blazor Web App (Auto mode): When using the Auto render mode, components will initially render on the server and then switch to WebAssembly once loaded. SummitUI handles this transition seamlessly.

Styling

SummitUI components are headless - they provide structure and behavior without opinionated styles. This gives you complete control over the visual appearance using your preferred CSS approach.

Data Attributes

Components expose state through data attributes for easy CSS targeting:

css

/* Target based on component state */
.accordion-trigger[data-state="open"] {
    background-color: #f5f5f5;
}

.accordion-trigger[data-disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Animate content based on state */
.accordion-content[data-state="open"] {
    height: var(--summit-accordion-content-height);
}

.accordion-content[data-state="closed"] {
    height: 0;
}

See individual component documentation for a full list of available data attributes.

For AI/LLM Integration

SummitUI is designed with AI agents in mind. Check out our AI-friendly resources:

llms.txt

Machine-readable documentation index for LLMs and AI coding assistants.

Agent Skills

Pre-built skill files for AI coding agents like Claude and OpenCode.

Next Steps

Now that you have SummitUI installed, explore the components:

Accordion

Select

Tabs

Popover

Dropdown Menu

Focus Trap

DateField