Elements Wave lBlue Hero

Telerik UI for Blazor

Develop Blazor applications in half the time with a high-performing Grid and
50+ truly native, easy-to-customize UI components to cover any requirement.

NEW

*Includes access to online technical training to speed-up your onboarding.

ninja-peeking
@using blazor.Data

<TelerikGrid Data=@GridData EditMode="@GridEditMode.Inline" Height="500px"
           Pageable="true" PageSize=@PageSize
           OnCreate="@CreateHandler" OnDelete="@DeleteHandler" OnUpdate="@UpdateHandler">
<GridToolBar>
  <GridCommandButton Command="Add" Icon="add">Add Product</GridCommandButton>
</GridToolBar>
<GridColumns>
  <GridColumn Field=@nameof(Product.ProductName) Width="25%" Title="Product Name" />
  <GridColumn Field=@nameof(Product.ListPrice) Title="Price" Width="20%">
    <Template>
      @(String.Format("{0:C2}", (context as Product).ListPrice))
    </Template>
  </GridColumn>
  <GridColumn Field=@nameof(Product.UnitsInStock) Title="In Stock" Width="20%" >
    <Template>
      @{
        bool isInStock = ( as Product).UnitsInStock > 0 ? true : false;

          if (isInStock)
          {
              <span class="k-badge k-badge-success k-badge-rounded">Available</span>
          }
          else
          {
              <span class="k-badge k-badge-error k-badge-rounded">Not Available</span>
          }
      }
    </Template>
  </GridColumn>
  <GridColumn Field=@nameof(Product.Size) Title="Size" Width="10%" ></GridColumn>
  <GridCommandColumn Width="25%" >
    <GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton>
    <GridCommandButton Command="Delete" Icon="delete">Delete</GridCommandButton>
    <GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</GridCommandButton>
    <GridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</GridCommandButton>
  </GridCommandColumn>
</GridColumns>
</TelerikGrid>

@code {
  public List<Product> GridData { get; set; }
  public Product ProductToEdit { get; set; }
  int PageSize = 10;
  int lastId = 0;

  protected override async Task OnInitializedAsync()
  {
    GridData = GetProducts();
    
    return base.OnInitializedAsync();
  }

  private List<Product> GetProducts()
  {
    List<Product> data = new List();
    
    data.Add(new Product(1, "HL Road Frame - Black, 58 ", 1, "Black ", 1431.5, "58 "));
    data.Add(new Product(2, "HL Road Frame - Red, 58 ", 1, "Red ", 1431.5, "58 "));
    data.Add(new Product(3, "Mountain Bike Socks, M ", 0, "White ", 9.5, "M "));
    data.Add(new Product(4, "Mountain Bike Socks, L ", 0, "White ", 9.5, "L "));
    data.Add(new Product(5, "Long-Sleeve Logo Jersey, S ", 0, "Multi ", 49.99, "S "));
    data.Add(new Product(6, "Long-Sleeve Logo Jersey, M ", 0, "Multi ", 49.99, "M "));
    data.Add(new Product(7, "Long-Sleeve Logo Jersey, L ", 0, "Multi ", 49.99, "L "));
    data.Add(new Product(8, "Long-Sleeve Logo Jersey, XL ", 0, "Multi ", 49.99, "XL "));
    data.Add(new Product(9, "HL Road Frame - Red, 62 ", 1, "Red ", 1431.5, "62 "));
    data.Add(new Product(10, "HL Road Frame - Red, 44 ", 1, "Red ", 1431.5, "44 "));
    data.Add(new Product(11, "HL Road Frame - Red, 48 ", 1, "Red ", 1431.5, "48 "));
    data.Add(new Product(12, "HL Road Frame - Red, 52 ", 1, "Red ", 1431.5, "52 "));
    data.Add(new Product(13, "HL Road Frame - Red, 56 ", 1, "Red ", 1431.5, "56 "));
    data.Add(new Product(14, "LL Road Frame - Black, 58 ", 1, "Black ", 337.22, "58 "));
    data.Add(new Product(15, "LL Road Frame - Black, 60 ", 1, "Black ", 337.22, "60 "));
    data.Add(new Product(16, "LL Road Frame - Black, 62 ", 1, "Black ", 337.22, "62 "));
    data.Add(new Product(17, "LL Road Frame - Red, 44 ", 1, "Red ", 337.22, "44 "));
    data.Add(new Product(18, "LL Road Frame - Red, 48 ", 1, "Red ", 337.22, "48 "));
    data.Add(new Product(19, "LL Road Frame - Red, 52 ", 1, "Red ", 337.22, "52 "));
    data.Add(new Product(20, "LL Road Frame - Red, 58 ", 1, "Red ", 337.22, "58 "));
    data.Add(new Product(21, "LL Road Frame - Red, 60 ", 1, "Red ", 337.22, "60 "));
    data.Add(new Product(22, "LL Road Frame - Red, 62 ", 1, "Red ", 337.22, "62 "));
    data.Add(new Product(23, "ML Road Frame - Red, 44 ", 1, "Red ", 594.83, "44 "));
    data.Add(new Product(24, "ML Road Frame - Red, 48 ", 1, "Red ", 594.83, "48 "));
    data.Add(new Product(25, "ML Road Frame - Red, 52 ", 1, "Red ", 594.83, "52 "));
    data.Add(new Product(26, "ML Road Frame - Red, 58 ", 1, "Red ", 594.83, "58 "));
    data.Add(new Product(27, "ML Road Frame - Red, 60 ", 1, "Red ", 594.83, "60 "));
    data.Add(new Product(28, "LL Road Frame - Black, 44 ", 1, "Black ", 337.22, "44 "));
    data.Add(new Product(29, "LL Road Frame - Black, 48 ", 1, "Black ", 337.22, "48 "));
    data.Add(new Product(30, "LL Road Frame - Black, 52 ", 1, "Black ", 337.22, "52 "));
    data.Add(new Product(31, "HL Mountain Frame - Silver, 42 ", 1, "Silver ", 1364.5, "42 "));
    data.Add(new Product(32, "HL Mountain Frame - Silver, 44 ", 1, "Silver ", 1364.5, "44 "));
    data.Add(new Product(33, "HL Mountain Frame - Silver, 48 ", 1, "Silver ", 1364.5, "48 "));
    data.Add(new Product(34, "HL Mountain Frame - Silver, 46 ", 1, "Silver ", 1364.5, "46 "));
    data.Add(new Product(35, "HL Mountain Frame - Black, 42 ", 1, "Black ", 1349.6, "42 "));
    data.Add(new Product(36, "HL Mountain Frame - Black, 44 ", 1, "Black ", 1349.6, "44 "));
    data.Add(new Product(37, "HL Mountain Frame - Black, 48 ", 1, "Black ", 1349.6, "48 "));
    data.Add(new Product(38, "HL Mountain Frame - Black, 46 ", 1, "Black ", 1349.6, "46 "));
    data.Add(new Product(39, "HL Mountain Frame - Silver, 38 ", 1, "Silver ", 1364.5, "38 "));
    data.Add(new Product(40, "Road-150 Red, 62 ", 1, "Red ", 3578.27, "62 "));
    data.Add(new Product(41, "Road-150 Red, 44 ", 1, "Red ", 3578.27, "44 "));
    data.Add(new Product(42, "Road-150 Red, 48 ", 1, "Red ", 3578.27, "48 "));
    data.Add(new Product(43, "Road-150 Red, 52 ", 1, "Red ", 3578.27, "52 "));
    data.Add(new Product(44, "Road-150 Red, 56 ", 1, "Red ", 3578.27, "56 "));
    data.Add(new Product(45, "Road-450 Red, 58 ", 1, "Red ", 1457.99, "58 "));
    data.Add(new Product(46, "Road-450 Red, 60 ", 1, "Red ", 1457.99, "60 "));
    data.Add(new Product(47, "Road-450 Red, 44 ", 1, "Red ", 1457.99, "44 "));
    data.Add(new Product(48, "Road-450 Red, 48 ", 1, "Red ", 1457.99, "48 "));
    data.Add(new Product(49, "Road-450 Red, 52 ", 1, "Red ", 1457.99, "52 "));
    data.Add(new Product(50, "Road-650 Red, 58 ", 1, "Red ", 782.99, "58 "));
    
    return data;
  }

  private void CreateHandler(GridCommandEventArgs args)
  {
    Product product = (Product)args.Item;

    product.ProductId = ++lastId;
    GridData.Insert(0, product);
  }

  private void DeleteHandler(GridCommandEventArgs args)
  {
    GridData.Remove((Product)args.Item);
  }

  private void UpdateHandler(GridCommandEventArgs args)
  {
    Product product = (Product)args.Item;

    var existing = GridData.FirstOrDefault(p => p.ProductId == product.ProductId);

    if (existing != null)
    {
      existing.ProductName = product.ProductName;
      existing.UnitPrice = product.UnitPrice;
      existing.UnitsInStock = product.UnitsInStock;
      existing.Color = product.Color;
      existing.Size = product.Size;
    }
  }
}
<div style="width:40%; display: inline-block;">
<TelerikChart>
  <ChartTitle Text="Gross domestic product growth /GDP annual %/"></ChartTitle>
  <ChartLegend Visible="false"></ChartLegend>

  <ChartSeriesItems>
    <ChartSeries Type="ChartSeriesType.Column" Data="@Data" Field="@nameof(ModelData.Series1)"></ChartSeries>
    <ChartSeries Type="ChartSeriesType.Column" Data="@Data" Field="@nameof(ModelData.Series2)"></ChartSeries>
    <ChartSeries Type="ChartSeriesType.Column" Data="@Data" Field="@nameof(ModelData.Series3)"></ChartSeries>
    <ChartSeries Type="ChartSeriesType.Column" Data="@Data" Field="@nameof(ModelData.Series4)"></ChartSeries>
  </ChartSeriesItems>

  <ChartCategoryAxes>
    <ChartCategoryAxis Categories="@Categories"></ChartCategoryAxis>
  </ChartCategoryAxes>
</TelerikChart>
</div>

<div style="width:50%; display: inline-block; margin-left:10px;">
<TelerikChart>
  <ChartTitle Text="What is you favourite sport?"></ChartTitle>
  <ChartLegend Visible="true" Position="ChartLegendPosition.Top"></ChartLegend>

  <ChartSeriesItems>
    <ChartSeries Type="ChartSeriesType.Donut" Data="@DataForDonut" Field="@nameof(DonutData.Value)" CategoryField="@nameof(DonutData.Category)">
      <ChartSeriesLabels Position="ChartSeriesLabelsPosition.OutsideEnd"
        Visible="true"
        Background="transparent"
        Template="#= dataItem.Category # - #= percentage*100 #%"></ChartSeriesLabels>
    </ChartSeries>
  </ChartSeriesItems>
</TelerikChart>
</div>

@code {
  public class DonutData
  {
      public string Category { get; set; }
      public Int32 Value { get; set; }
  }

  public List<DonutData> DataForDonut = new List<DonutData>()
  {
      new DonutData()
      {
          Category = "Football",
          Value = 35
      },
      new DonutData()
      {
          Category = "Basketball",
          Value = 25
      },
      new DonutData()
      {
          Category = "Volleyball",
          Value = 20
      },
      new DonutData()
      {
          Category = "Rugby",
          Value = 10
      },
      new DonutData()
      {
          Category = "Tennis",
          Value = 10
      },

  };

  public class ModelData
  {
      public double Series1 { get; set; }
      public double Series2 { get; set; }
      public double Series3 { get; set; }
      public double Series4 { get; set; }
  }

  public string[] Categories = new string[] { "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011" };


  public List<ModelData> Data = new List<ModelData>()
  {
      new ModelData()
      {
          Series1 = 3.907,
          Series2 = 4.743,
          Series3 = 0.01,
          Series4 = 1.988
      },
      new ModelData()
      {
          Series1 = 7.943,
          Series2 = 7.295,
          Series3 = 0.375,
          Series4 = 2.733
      },
      new ModelData()
      {
          Series1 = 7.848,
          Series2 = 7.175,
          Series3 = 1.161,
          Series4 = 3.994
      },
      new ModelData()
      {
          Series1 = 9.284,
          Series2 = 6.376,
          Series3 = 0.684,
          Series4 = 3.464
      },
      new ModelData()
      {
          Series1 = 9.263,
          Series2 = 8.153,
          Series3 = 3.7,
          Series4 = 4.001
      },
      new ModelData()
      {
          Series1 = 9.801,
          Series2 = 8.535,
          Series3 = 3.269,
          Series4 = 3.939
      },
      new ModelData()
      {
          Series1 = 3.89,
          Series2 = 5.247,
          Series3 = 1.083,
          Series4 = 1.333
      },
      new ModelData()
      {
          Series1 = 8.238,
          Series2 = 7.832,
          Series3 = 5.127,
          Series4 = 2.245
      },
      new ModelData()
      {
          Series1 = 9.552,
          Series2 = 4.3,
          Series3 = 3.69,
          Series4 = 4.339
      },
      new ModelData()
      {
          Series1 = 6.855,
          Series2 = 4.3,
          Series3 = 2.995,
          Series4 = 2.727
      }
  };

}
@using blazor.Data

<TelerikScheduler @bind-Date="@StartDate"
                  @bind-View="@CurrView"
                  Data="@Appointments"
                  OnUpdate="@UpdateAppointment"
                  OnDelete="@DeleteAppointment"
                  OnCreate="@AddAppointment"
                  AllowUpdate="true"
                  AllowCreate="true"
                  AllowDelete="true"
                  Height="500px">
  <SchedulerViews>
    <SchedulerDayView StartTime="@DayStart" />
    <SchedulerWeekView StartTime="@DayStart" />
    <SchedulerMultiDayView StartTime="@DayStart" />
  </SchedulerViews>
</TelerikScheduler>

@code {
  List<Appointment> Appointments = new List<Appointment>();
  public DateTime StartDate { get; set; }
  public SchedulerView CurrView { get; set; } = SchedulerView.Week;

  public DateTime DayStart { get; set; } = new DateTime(2000, 1, 1, 8, 0, 0);

  protected override async Task OnInitializedAsync()
  {
    StartDate = GetStart();

    Appointments = GetAppointments();

    return base.OnInitializedAsync();
  }

  private List<Appointment> GetAppointments()
  {
    List<Appointment> data = new List<Appointment>();
    DateTime baselineTime = GetStart();

    data.Add(new Appointment
    {
        Title = "Vet visit",
        Description = "The cat needs vaccinations and her teeth checked.",
        Start = baselineTime.AddHours(2),
        End = baselineTime.AddHours(2).AddMinutes(30)
    });

    data.Add(new Appointment
    {
        Title = "Trip to Hawaii",
        Description = "An unforgettable holiday!",
        IsAllDay = true,
        Start = baselineTime.AddDays(-10),
        End = baselineTime.AddDays(-2)
    });

    data.Add(new Appointment
    {
        Title = "Jane's birthday party",
        Description = "Make sure to get her fresh flowers in addition to the gift.",
        Start = baselineTime.AddDays(5).AddHours(10),
        End = baselineTime.AddDays(5).AddHours(18),
    });

    data.Add(new Appointment
    {
        Title = "One-on-one with the manager",
        Start = baselineTime.AddDays(2).AddHours(3).AddMinutes(30),
        End = baselineTime.AddDays(2).AddHours(3).AddMinutes(45),
    });

    data.Add(new Appointment
    {
        Title = "Brunch with HR",
        Description = "Performance evaluation of the new recruit.",
        Start = baselineTime.AddDays(3).AddHours(3),
        End = baselineTime.AddDays(3).AddHours(3).AddMinutes(45)
    });

    data.Add(new Appointment
    {
        Title = "Interview with new recruit",
        Description = "See if John will be a suitable match for our team.",
        Start = baselineTime.AddDays(3).AddHours(1).AddMinutes(30),
        End = baselineTime.AddDays(3).AddHours(2).AddMinutes(30)
    });

    data.Add(new Appointment
    {
        Title = "Conference",
        Description = "The big important work conference. Don't forget to practice your presentation.",
        Start = baselineTime.AddDays(6),
        End = baselineTime.AddDays(11),
        IsAllDay = true
    });

    data.Add(new Appointment
    {
        Title = "New Project Kickoff",
        Description = "Everyone assemble! We will also have clients on the call from a later time zone.",
        Start = baselineTime.AddDays(3).AddHours(8).AddMinutes(30),
        End = baselineTime.AddDays(3).AddHours(11).AddMinutes(30)
    });

    data.Add(new Appointment
    {
        Title = "Get photos",
        Description = "Get the printed photos from last week's holiday. It's on the way from the vet to work.",
        Start = baselineTime.AddHours(2).AddMinutes(15),
        End = baselineTime.AddHours(2).AddMinutes(30)
    });


    return data;
  }

  public DateTime GetStart()
  {
      DateTime now = DateTime.Now;
      int diff = (7 + (now.DayOfWeek - DayOfWeek.Monday)) % 7;
      DateTime lastMonday = now.AddDays(-1 * diff);
      //return 8 AM on today's date for better visualization of the demos
      return new DateTime(lastMonday.Year, lastMonday.Month, lastMonday.Day, 8, 0, 0);
  }

  void UpdateAppointment(SchedulerUpdateEventArgs args)
  {
    Appointment item = (Appointment)args.Item;
    var matchingItem = Appointments.FirstOrDefault(a => a.Id == item.Id);
    if (matchingItem != null)
    {
      matchingItem.Title = item.Title;
      matchingItem.Description = item.Description;
      matchingItem.Start = item.Start;
      matchingItem.End = item.End;
      matchingItem.IsAllDay = item.IsAllDay;
    }
  }

  void AddAppointment(SchedulerCreateEventArgs args)
  {
    Appointment item = args.Item as Appointment;
    Appointments.Add(item);
  }

  void DeleteAppointment(SchedulerDeleteEventArgs args)
  {
    Appointment item = (Appointment)args.Item;
    Appointments.Remove(item);
  }
}
<div class="calendar-wrap">
<div class="col col-sm">
  <div class="switch-view-wrap">
    <h2>Switch View</h2>

    <ul class="fieldlist">

      @foreach (var possibleCalendarView in Enum.GetValues(typeof(CalendarView)))
      {
        <li>
          <input type="radio" name="calendarView" id="@possibleCalendarView" value="@possibleCalendarView" @onchange="ChangeCalendarView" class="k-radio" checked="@(String.Equals(possibleCalendarView.ToString(), CalendarViewValue.ToString()))" />
          <label class="k-radio-label" for="@possibleCalendarView">@possibleCalendarView View </label>
        </li>
      }
    </ul>
  </div>
</div>

<div class="col col-lg">
  <TelerikCalendar SelectionMode="@CalendarSelectionMode.Multiple"
                   Date="@startDate"
                   @bind-View="@CalendarViewValue">
  </TelerikCalendar>
</div>
</div>

@code {
private DateTime startDate = new DateTime(2019, 4, 1);//set the initial date of the calendar

public CalendarView CalendarViewValue { get; set; } = CalendarView.Month;

public void ChangeCalendarView(ChangeEventArgs args)
{
  CalendarViewValue = (CalendarView)Enum.Parse(typeof(CalendarView), args.Value.ToString());
}
}

<style>
  .calendar-wrap {
  width: 100%;
  height: 340px;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  justify-content: center;
}
.calendar-wrap .col {
  padding: 0 30px;
  box-sizing: border-box;
}
.calendar-wrap h2 {
  margin-top: 0;
  margin-bottom: 1.5em;
}
.col-sm {
  width: 40%;
}
.col-lg {
  width: 60%;
}
.switch-view-wrap {
  width: 150px;
  margin-left: auto;
}
.fieldlist {
  margin-bottom: 0 0 -1em;
}
.fieldlist li {
  padding-bottom: 1.5em;
}
</style>
@using System.ComponentModel.DataAnnotations

<div class="dropdownlist-form">

<div class="header">
  <h3>Product Details</h3>
</div>

<EditForm Model="@category" OnValidSubmit="@HandleValidSubmit">
  <DataAnnotationsValidator />
  <ValidationSummary></ValidationSummary>

  <label>Categories</label>
  <TelerikDropDownList Data="@CategoryData" @bind-Value="@category.CategoryId" DefaultItem="@DefaultCategory" ValueField="CategoryId" TextField="CategoryName">
  </TelerikDropDownList>

  <label>Products</label>
  <TelerikDropDownList Data="@DropDownListData" @bind-Value=@SelectedValue PopupHeight="170" DefaultItem="@DefaultItem" ValueField="ProductId" TextField="ProductName">
  </TelerikDropDownList>

  <label>Shipping Address</label>
  <TelerikDropDownList Data="@OrderData" @bind-Value=@order.OrderId PopupHeight="170" DefaultItem="@DefaultOrder" ValueField="OrderId" TextField="OrderName">
  </TelerikDropDownList>

  <div class="submit-btn-wrap">
    <button class="k-button k-primary" type="submit">Submit</button>
  </div>

  @if (SuccessMessage != string.Empty)
  {
    <div class="k-notification k-notification-success">
      @SuccessMessage
    </div>
  }
</EditForm>
</div>

@code  {

string[] categoriesList = { "Seafood", "Confections", "Dairy Products", "Meat/Poultry", "Beverages" };
string[] productsList = { "Boston Crab Meat", "Teatime Chocolate Biscuits", "Tofu", "Mascarpone", "Chai" };
string[] orderList = { "Marseille", "Rio de Janeiro", "Lyon", "Bern", "Genève" };

public IEnumerable<Product> DropDownListData { get; set; }
public Product DefaultItem { get; set; } = new Product()
{
  ProductId = 0,
  ProductName = "Select a product..."
};

public int SelectedValue { get; set; } = 2;

protected override void OnInitialized()
{

  List<Product> products = new List<Product>();
  for (int i = 0; i < 5; i++)
  {
    products.Add(new Product()
    {
      ProductId = i,
      ProductName = productsList[i],

    });
  }

  DropDownListData = products.AsQueryable();

  List<DropDownValidationModel> categories = new List<DropDownValidationModel>();
  for (int i = 0; i < 5; i++)
  {
    categories.Add(new DropDownValidationModel()
    {
      CategoryId = i,
      CategoryName = categoriesList[i],
    });
  }

  CategoryData = categories.AsQueryable();

  List<Order> orders = new List<Order>();
  for (int i = 0; i < 5; i++)
  {
    orders.Add(new Order()
    {
      OrderId = i,
      OrderName = orderList[i],
    });
  }

  OrderData = orders.AsQueryable();

  base.OnInitialized();
}

class DropDownValidationModel
{
  [Required(ErrorMessage = "Choose a category")]
  public int? CategoryId { get; set; }

  public string CategoryName { get; set; }
}

IEnumerable<DropDownValidationModel> CategoryData { get; set; }
DropDownValidationModel category { get; set; } = new DropDownValidationModel();
DropDownValidationModel DefaultCategory { get; set; } = new DropDownValidationModel()
{
  CategoryName = "Choose a category"
};

string SuccessMessage = string.Empty;

void HandleValidSubmit()
{
  SuccessMessage = "Form Submitted Successfully!";
}

class Order
{
  public int? OrderId { get; set; }

  public string OrderName { get; set; }
}

IEnumerable<Order> OrderData { get; set; }
Order order { get; set; } = new Order();
Order DefaultOrder { get; set; } = new Order()
{
  OrderId = 0,
  OrderName = "Choose a shipping city"
};

}

<style>
  .dropdownlist-form {
  max-width: 340px;
  padding: 20px 0;
}
.dropdownlist-form form {
  padding: 15px 20px;
}
.dropdownlist-form h3 {
  color: #454545;
  font-weight: 700;
}
.dropdownlist-form .header:before {
  bottom: 12px;
}
.dropdownlist-form label {
  font-size: 14px;
}
.dropdownlist-form .k-widget {
  margin-bottom: 20px;
}
.submit-btn-wrap {
  margin-top: 10px;
  text-align: right;
}
.k-notification {
  margin-top: 20px;
}
.validation-errors {
  margin-bottom: 20px;
}
.validation-message {
  color: #f31700;
}
</style>
flows_end_section

Blazor UI Components Key Features

Find truly native Blazor components for every use case

Cut development time and cost in half with the Telerik high-performing Grid and 50+ truly native, easy-to-customize UI components to cover any app scenario. New set of components is added every 6 weeks!

Save months of UI development time with the feature-rich Telerik Grid

100+ features provide flexible data visualization and manipulation, rich API, professional looks and a way to satisfy any design requirement.

“I'm excited to see partners like Telerik creating custom UI controls for Blazor. The Telerik UI controls make building beautiful web apps with lots of rich functionality sooooo easy!”

Daniel Roth

Program Manager, Microsoft

Build any type of app with just one set of UI controls

Easy to customize Telerik Blazor controls through multitude of methods, properties and events, as well as professionally styled built-in themes & the Telerik SAAS Theme Builder enabling you to build your own.

Get support with 97% satisfaction rates

Outstanding support from the developers who build the product to help you work out all challenges promptly.

Get started fast with our interactive learning materials

Get results within hours by experimenting with our extensive Blazor demos, docs & online technical training to help you get started in no time.

Explore our Native UI Blazor Components

ninja-v1-opt

“I've been testing Blazor components from a variety of providers and hands-down, the Telerik ones are the best - great UX, fast, easy to extend/implement.”

Chris Woodard

Technical Consultant, Avisra

“Very happy with the current control set, the progress to release new controls and the extending of current functionality. The controls are fast and easy to implement. Support is one of the best I've had to deal with. Friendly response and they always try to help you with examples, custom made for you examples and if what you want/need is not yet possible they try to find a workaround for you.”

Jurgen Mangé

, SGS Belgium NV

“I saw Telerik UI components in YouTube videos and then I loved it. It is going to be a blast using them!”

M Imamul Hassan Khan

Developer, Xenon Solutions Ltd.

“I'm excited to see partners like Telerik creating custom UI controls for Blazor. The Telerik UI controls make building beautiful web apps with lots of rich functionality sooooo easy!”

Daniel Roth

Program Manager, Microsoft

Upgrade to Telerik DevCraft Complete

Well-equipped for Any Future Project

Get 1,250+ .NET and JavaScript components for
building web, desktop and mobile apps and save up
to 50% in development time.

Get the Best Value for Money

Buy Telerik UI for Blazor plus 15 other products, embedded
reporting, testing and mocking tools and save up to 90%
from the upgrade price.

What's New with Telerik UI for Blazor

Telerik UI for Blazor TileLayout

New Component: TileLayout

Help your users organize their work with the sleek UI of the Telerik UI for Blazor TileLayout control!

Telerik UI for Blazor TreeList

New Component: TreeList

The brand new Telerik UI for Blazor TreeList is a powerful list container displaying hierarchial relationships of the underlying data!

Telerik UI for Blazor Editor

New Component: Editor

With the new Telerik UI for Blazor Editor, users can now create rich text and visual documents without leaving the confines of your app!

Industry-Leading Support

Expert and Timely Support

Get answers to your questions directly from the developers who build this UI suite, even during your trial period.

Contact support

Need Evaluation Help?

If you are not a developer or don't have time to evaluate our product, send us your project requirements. We will evaluate your required features and let you know how our products fit your needs.

Send us your project requirements
Background-NextSteps

Ready to Try it Out?

Download Free Trial