Getting Started
Foundations
Components
Search for a command to run...
If you're considering Telerik UI for Blazor for a new project or maintaining an existing Blazor application with Telerik components, this guide will help you understand the limitations and explore better alternatives.
Creating a new application? We strongly recommend against using Telerik UI for Blazor for new projects. Instead, use the modern @strongtie/design-system React components for better performance, smaller bundle sizes, improved developer experience, and long-term maintainability.
Telerik UI for Blazor was designed for .NET/Blazor applications, but this approach has significant drawbacks compared to modern React development. Here's why we recommend React with the Strongtie Design System instead:
Using Blazor with Telerik ties you to a smaller, more limited ecosystem compared to React:
Blazor has a fraction of React's community size. React has millions of developers worldwide, while Blazor's community is significantly smaller, meaning fewer resources, examples, and third-party solutions.
Telerik delivers components as large, pre-compiled bundles. Modern design systems like Strongtie use tree-shakeable modules, so you only ship the code you actually use.
Customizing Telerik styles often requires overriding specific CSS selectors with high specificity. Strongtie uses CSS custom properties and composition patterns for straightforward theming.
Modern design systems prioritize WCAG 2.1 AA compliance from the ground up. Achieving the same level of accessibility with Telerik requires additional work and testing.
Modern design systems deliver better performance through smaller, optimized bundles:
Why This Matters:
Performance Best Practice: Modern web applications should prioritize small, tree-shakeable component libraries that only ship the code you use. CSS-in-JS or scoped CSS approaches prevent unused styles from bloating your bundles.
Modern React development has evolved significantly, and developer experience matters:
Consider the full cost of your UI component choice:
Telerik Considerations:
Strongtie Design System:
Hidden Costs to Consider:
Long-term sustainability matters for enterprise applications:
React Ecosystem Advantages:
Blazor Considerations:
Long-term Thinking: When choosing technology, consider not just today's needs but the next 3-5 years. Can you easily hire developers? Will the technology be maintained? Are you building on a growing or declining platform?
Web development best practices have evolved:
Modern Expectations:
The Strongtie Design System embraces these standards. Older component libraries may require additional work to meet modern expectations.
If you currently have a Blazor application using Telerik UI components, here's our guidance:
For applications in maintenance mode with no major feature development:
Lock to a specific version to prevent breaking changes:
<!-- Pin to specific version, don't use "latest" -->
<link rel="stylesheet" href="https://cdn.strongtie.io/ui-kit/2.2.2/ui-kit.css" />Create documentation of all customizations and workarounds for future maintainers.
Begin planning a migration strategy for when major features or redesigns are needed.
For applications under active development, consider migrating to modern alternatives:
Gradual approach recommended – You don't need to rewrite everything at once. Use a component-by-component migration strategy to modernize while continuing to deliver features.
Here's how to migrate from a Blazor + Telerik application to React with the Strongtie Design System:
Important: This migration involves changing both the UI framework (Blazor → React) and the component library (Telerik → Strongtie). This is a significant undertaking but offers substantial long-term benefits. See our Framework Recommendations guide for more details on migrating from Blazor to React.
Audit your Blazor application to identify:
Prioritize based on:
Define measurable goals:
Set up a new React application alongside your Blazor app:
# Using Vite (recommended)
npm create vite@latest my-app -- --template react-ts
cd my-app
npm install @strongtie/design-system sonnerOr use Next.js for server-side rendering capabilities:
Create or refactor your backend to expose APIs that React can consume:
Document patterns for your team:
Choose a migration approach that fits your application. Note: Migrating from Blazor to React takes longer than just changing component libraries, as you're also migrating the entire frontend framework.
Recommended Approach: Build New in React, Maintain Old in Blazor
Rather than converting Blazor components to React, we recommend:
Best for: Most Blazor to React migrations
Approach:
Example Timeline:
Benefits:
Timeline: 12-18 months for most applications
Once all features are migrated to React:
Remove Blazor-specific backend code:
Document improvements achieved:
Realistic timelines for Blazor → React migration (longer than component-only migration):
| Application Size | Estimated Time | Notes |
|---|---|---|
| Small (< 20 pages) | 6-9 months | Includes learning React, API setup |
| Medium (20-50 pages) | 9-12 months | Gradual migration strongly recommended |
| Large (50-100 pages) | 12-18 months | Requires dedicated resources |
| Enterprise (100+ pages) | 18-24 months | Need dedicated migration team |
Note: These timelines account for both framework migration (Blazor → React) AND component migration (Telerik → Strongtie). The framework change is the larger effort.
Pro tip: Ship incrementally. A working migration beats a perfect plan that never ships. Focus on delivering value at each step.
Map your Telerik UI for Blazor components to Strongtie React equivalents:
| Telerik Blazor Component | Strongtie React Equivalent | Notes |
|---|---|---|
| TelerikButton | <Button> | Convert C# event handlers to TypeScript |
| TelerikTextBox | <Input> | Use controlled component pattern |
| TelerikDropDownList | <Select> | React state management for selection |
| TelerikWindow | <Dialog> | Convert Blazor @ref to React refs |
| TelerikTabStrip | <Tabs> | Simpler API, better keyboard nav |
| TelerikMenu | <DropdownMenu> | Flexible composition pattern |
| TelerikDatePicker | <DatePicker> or native input | Date handling with date-fns |
| TelerikNotification | <Toast> (via sonner) | Better positioning and stacking |
| TelerikCard | <Card> | Composition-based component |
| TelerikGrid | <Table> or TanStack Table | See below for data grid options |
Some components may require third-party libraries:
@* Blazor component with Telerik UI *@
@page "/contact"
<EditForm Model="@formData" OnValidSubmit="HandleSubmit">
<div class="form-group">
<label for="name">Name:</label>
<TelerikTextBox Id="name" @bind-Value="@formData.Name" />
</div>
<div class="form-group">
<label for="email">Email:</label>
<TelerikTextBox Id="email" @bind-Value="@formData.Email" InputMode="email" />
</div>
<TelerikButton ButtonType="ButtonType.Submit" ThemeColor="primary">
Submit
</TelerikButton>
</EditForm>
@code {
private ContactFormModel formData = new();
private async Task HandleSubmit()
{
// Handle form submission
await ContactService.SubmitAsync(formData);
}
public class ContactFormModel
{
public string Name { get; set; }
public string Email { get; set; }
}
}// React component with Strongtie Design System
import { useState } from "react"
import { Button } from "@strongtie/design-system/button"
import { Input } from "@strongtie/design-system/input"
import { Label } from "@strongtie/design-system/label"
interface ContactFormData {
name: string
email: string
}
export function ContactForm() {
const [formData, setFormData] = useState<ContactFormData>({
name: "",
email: ""
})
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault()
// Handle form submission - call REST API
await fetch("/api/contact", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(formData)
})
}
return (
<form onSubmit={handleSubmit} className="space-y-4">
<div>
<Label htmlFor="name">Name:</Label>
<Input
id="name"
type="text"
value={formData.name}
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
/>
</div>
<div>
<Label htmlFor="email">Email:</Label>
<Input
id="email"
type="email"
value={formData.email}
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
/>
</div>
<Button type="submit">Submit</Button>
</form>
)
}Key Differences:
Our team is here to support your migration:
Schedule a call with our engineering team to discuss your migration strategy and get architectural guidance.
Contact EngineeringWork with our UX team to ensure migrated components match design standards and improve user experience.
Contact UX TeamIf you're building a Blazor application with Telerik UI components, consider the long-term implications. While Blazor and Telerik can work for specific use cases, React with the Strongtie Design System offers significant advantages in performance, developer experience, ecosystem size, and long-term maintainability.
For new projects: Choose React with Strongtie Design System from day one. See our Framework Recommendations guide for a detailed comparison of React vs. Blazor.
For existing Blazor + Telerik projects: Plan a gradual migration to React. While this is a significant undertaking (you're migrating both the framework and component library), the long-term benefits in developer velocity, performance, and maintainability make it worthwhile.
Ready to start? Our team is here to help you plan and execute your migration successfully.