Blazor Blueprint Blazor Blueprint
Previous Installation Next Localization

Getting Started

Learn how to use Blazor Blueprint components in your Blazor application.

Using Components

Blazor Blueprint provides two types of components: Primitives (unstyled) and Components (styled). You can use either depending on your needs.

Using Styled Components

Styled components come with beautiful defaults and are ready to use immediately. Here's a simple example using the Button component: 

@page "/example"

<BbButton Variant="ButtonVariant.Default" OnClick="HandleClick">
    Click me
</BbButton>

@code {
    private void HandleClick()
    {
        // Handle button click
    }
}

Component Variants

Most components support different variants, sizes, and states. Here's an example with Button: 

<BbButton Variant="ButtonVariant.Default">Default</BbButton>
<BbButton Variant="ButtonVariant.Secondary">Secondary</BbButton>
<BbButton Variant="ButtonVariant.Outline">Outline</BbButton>
<BbButton Variant="ButtonVariant.Ghost">Ghost</BbButton>
<BbButton Variant="ButtonVariant.Link">Link</BbButton>

Using Cards

Cards are a common pattern for organizing content. Here's how to use the Card component: 

<BbCard>
    <BbCardHeader>
        <BbCardTitle>Card Title</BbCardTitle>
        <BbCardDescription>Card description goes here</BbCardDescription>
    </BbCardHeader>
    <BbCardContent>
        <p>Card content goes here.</p>
    </BbCardContent>
    <BbCardFooter>
        <BbButton Variant="ButtonVariant.Default">Action</BbButton>
    </BbCardFooter>
</BbCard>

Card Title

Card description goes here

Card content goes here.

Using Primitives

Primitives are unstyled components that give you full control over the visual design. They handle keyboard interactions, ARIA attributes, and state management while you provide the styling. 

@using BlazorBlueprint.Primitives.Dialog

<BbDialog>
    <BbDialogTrigger class="px-4 py-2 bg-blue-500 text-white rounded">
        Open Dialog
    </BbDialogTrigger>
    <BbDialogContent class="bg-white p-6 rounded-lg shadow-lg">
        <BbDialogHeader>
            <BbDialogTitle class="text-xl font-bold">Dialog Title</BbDialogTitle>
        </BbDialogHeader>
        <p>Dialog content goes here.</p>
    </BbDialogContent>
</BbDialog>

Theming

Blazor Blueprint uses CSS variables with the OKLCH color space for theming, making it easy to customize colors and styles. You can modify the theme by updating the CSS variables in your stylesheet:

theme.css
:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  /* ... more variables */
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  /* ... dark mode overrides */
}

Learn more about theming in the Theming Guide.

Next Steps

Now that you know the basics, explore the component library to see what's available:

Previous Installation Next Localization