Every team that ships more than one product eventually hits the same wall: the third application looks nothing like the first two. Buttons drift, spacing is inconsistent, dark mode works on some pages and not others. The ConnectSoft Blazor UIKit exists to remove that drift. It is the shared component layer behind our marketing site, internal tools, and customer platforms, and it lets a small team produce interfaces that look intentional from the first commit.
This guide walks through how we actually use the UIKit day to day: installing it, composing a page with design tokens, theming for light and dark, and knowing when to drop down to the Flowbite adapter layer.
What the UIKit gives you
The UIKit is more than a bag of components. It ships three things that matter for consistency:
- A set of Razor components (buttons, cards, inputs, navigation, marquee strips, pricing CTAs) with a stable, documented API.
- A token system delivered as CSS custom properties: color, spacing, radius, typography, density, and accessibility tokens that every component reads from.
- Adapter packages that bridge the UIKit to third-party libraries such as Flowbite, so you can adopt richer widgets without leaking their markup conventions into your app.
Because components consume tokens rather than hard-coded values, restyling an entire app is a matter of overriding a handful of variables instead of editing dozens of components.
Setting up
Reference the UIKit package and its static web assets, then import the token stylesheets in load order. The base tokens come first, followed by the optional dark, density, and accessibility layers:
<link rel="stylesheet" href="_content/ConnectSoft.Blazor.UIKit/css/tokens.css" />
<link rel="stylesheet" href="_content/ConnectSoft.Blazor.UIKit/css/tokens.dark.css" />
<link rel="stylesheet" href="_content/ConnectSoft.Blazor.UIKit/css/tokens.density.css" />
<link rel="stylesheet" href="_content/ConnectSoft.Blazor.UIKit/css/tokens.a11y.css" />
<link rel="stylesheet" href="_content/ConnectSoft.Blazor.UIKit/css/app.css" />
Add the component namespace to _Imports.razor so you do not repeat @using on every page:
@using ConnectSoft.Blazor.UIKit
Composing a page with tokens
The golden rule is simple: never write a raw hex color or pixel value in a feature page. Reach for a token instead. A typical section looks like this:
<section class="section-gap">
<Card Elevation="CardElevation.Soft">
<h2 class="text-token-heading">Ship with confidence</h2>
<p class="text-token-body">Tokens keep spacing and color consistent across every surface.</p>
<Button Variant="ButtonVariant.Primary" Href="/contact">Talk to us</Button>
</Card>
</section>
The Card and Button components read their padding, radius, and color from the token layer. If a designer changes the brand primary, the button updates everywhere at once.
Tip: Treat tokens as the contract between design and engineering. When a value is not in the token set, that is a signal to add a token, not to hard-code an exception.
Theming and dark mode
Dark mode is not a separate stylesheet you maintain by hand. The tokens.dark.css layer redefines the same variables under a data-theme="dark" selector, so flipping a single attribute on the document root swaps the entire palette:
document.documentElement.setAttribute('data-theme', prefersDark ? 'dark' : 'light');
Because every component already reads from the variables, you get a correct dark theme for free - including components you add later.
Density and accessibility tokens
Two optional layers solve problems that usually get bolted on too late. The density tokens let you switch between comfortable and compact spacing for data-heavy screens, and the accessibility tokens raise focus-ring contrast and minimum target sizes. Loading them is opt-in, but once present they apply consistently, which keeps audits short.
When to reach for the Flowbite adapters
The UIKit covers the common cases, but sometimes you need a richer widget - a complex navbar, a datepicker, a modal with managed focus. Rather than embedding Flowbite markup directly, use the adapter package. It exposes UIKit-shaped components that render Flowbite under the hood and map Flowbite classes back to your tokens, so the borrowed widget still matches your brand. This is the pattern we use for the marketing navigation bridge.
Wrapping up
The payoff of a token-driven UIKit is compounding: every new screen starts further ahead, design changes ship in minutes, and dark mode and accessibility come along for the ride. If you are starting a new ConnectSoft product, reference the UIKit on day one and resist the urge to hand-roll components - the consistency you bank early is the consistency your users feel later.
Want help standing up a design system for your own platform? Let's talk.
