90+ Truly Native Blazor UI Components for Any App Scenario

<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)" Name="Canada"></ChartSeries>
            <ChartSeries Type="@ChartSeriesType.Column" Data="@Data" Field="@nameof(ModelData.Series2)" Name="USA"></ChartSeries>
            <ChartSeries Type="@ChartSeriesType.Column" Data="@Data" Field="@nameof(ModelData.Series3)" Name="Bulgaria"></ChartSeries>
            <ChartSeries Type="@ChartSeriesType.Line" Data="@Data" Field="@nameof(ModelData.Series4)" Name="Average Trend"></ChartSeries>
        </ChartSeriesItems>

        <ChartCategoryAxes>
            <ChartCategoryAxis Categories="@Categories">
                <ChartCategoryAxisLabels>
                    <ChartCategoryAxisLabelsRotation Angle="45" Align="@ChartAxisLabelsRotationAlignment.Center" />
                </ChartCategoryAxisLabels>
            </ChartCategoryAxis>
        </ChartCategoryAxes>

        <ChartValueAxes>
            <ChartValueAxis>
                <ChartValueAxisTitle Text="Growth, %"></ChartValueAxisTitle>
                <ChartValueAxisLabels Format="{0:N0}%"></ChartValueAxisLabels>
            </ChartValueAxis>
        </ChartValueAxes>

        <ChartTooltip Visible="true" Shared="true"></ChartTooltip>
    </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)">
            <ChartSeriesTooltip Visible="true">
                <Template>
                    @((context.DataItem as DonutData).Category) - @((context.DataItem as DonutData).Value)%
                </Template>
            </ChartSeriesTooltip>
            <ChartSeriesLabels Position="@ChartSeriesLabelsPosition.OutsideEnd"
                               Visible="true"
                               Background="transparent"
                               Format="{0}%">
            </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
        }
    };

  }

@page "/scheduler"

<TelerikScheduler @bind-Date="@StartDate"
                  @bind-View="@CurrView"
                  Data="@Appointments"
                  OnUpdate="@UpdateAppointment"
                  OnDelete="@DeleteAppointment"
                  OnCreate="@AddAppointment"
                  AllowUpdate="true"
                  AllowCreate="true"
                  AllowDelete="true"
                  Height="500px"
                  Width="100%"
                  IdField="@(nameof(Appointment.Id))"
                  RecurrenceRuleField="@(nameof(Appointment.RecurrenceRule))"
                  RecurrenceExceptionsField="@(nameof(Appointment.RecurrenceExceptions))"
                  RecurrenceIdField="@(nameof(Appointment.RecurrenceId))">
    <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 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);
    }

    public class Appointment
    {
        public Guid Id { get; set; }
        public DateTime Start { get; set; }
        public DateTime End { get; set; }
        public string Title { get; set; }
        public bool IsAllDay { get; set; }
        public string Description { get; set; }
        public string RecurrenceRule { get; set; }
        public List<DateTime> RecurrenceExceptions { get; set; }
        public Guid? RecurrenceId { get; set; }

        public Appointment()
        {
            Id = Guid.NewGuid();
        }
    }
}

<div class="calendar-wrap">
    <div>
        <div class="header">
        <h3>Switch View</h3>
        </div>
        <TelerikRadioGroup Data="@CalendarViews"
                        @bind-Value="@CalendarViewValue"
                        Layout="@RadioGroupLayout.Vertical"></TelerikRadioGroup>
    </div>
    <TelerikCalendar SelectionMode="@CalendarSelectionMode.Multiple"
                     @bind-Date="@startDate"
                     @bind-View="@CalendarViewValue"
                     Views="2">
    </TelerikCalendar>
</div>

@code {
    private DateTime startDate = DateTime.Now;

    public CalendarView CalendarViewValue { get; set; } = CalendarView.Month;    
    public List<CalendarViewModel> CalendarViews { get; set; } = new List<CalendarViewModel>()
    {
        new CalendarViewModel() { Text = "Month View", Value = CalendarView.Month },
        new CalendarViewModel() { Text = "Year View", Value = CalendarView.Year },
        new CalendarViewModel() { Text = "Decade View", Value = CalendarView.Decade },
        new CalendarViewModel() { Text = "Century View", Value = CalendarView.Century }
    };

    public class CalendarViewModel
    {
        public string Text { get; set; }
        public CalendarView Value { get; set; }

        public CalendarViewModel()
        {
        }
    }
}

<style>
    .calendar-wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 30px;
        width: 100%;
    }
    .header {
      color: #454545;
    }
        .header h3 {
            font-weight: 700;
            font-size: 18px;
        }
</style>

@using System.ComponentModel.DataAnnotations

<div class="dropdownlist-form">

  <TelerikForm Model="@ValidationModel" OnValidSubmit="@HandleValidSubmit" Class="margin-top">
    <FormValidation>
    <DataAnnotationsValidator />
    <TelerikValidationSummary />
    </FormValidation>
    <FormItems>
        <FormItem>
            <Template>
              <div class="header">
              <h3>Product Details</h3>
              </div>
            </Template>
        </FormItem>
    <FormItem Field="CategoryId">
      <Template>
                <label for="category" class="k-label k-form-label">Category*:</label>
                        
        <TelerikDropDownList Id="category"
                   Data="@CategoryData"
                   @bind-Value="@ValidationModel.CategoryId"
                   OnChange="@OnCategoryChange"
                   PopupHeight=""
                   DefaultText="Select Category" ValueField="CategoryId" TextField="CategoryName">
        </TelerikDropDownList>

                <TelerikValidationMessage For="@(() => ValidationModel.CategoryId)"></TelerikValidationMessage>
            </Template>
    </FormItem>
    <FormItem>
      <Template>
                <label for="product" class="k-label k-form-label">Product*:</label>
                        
        <TelerikDropDownList Id="product"
                   Data="@ProductData"
                   Enabled="@ProductEnabled"
                   @bind-Value=@ValidationModel.ProductId
                   PopupHeight="170px"
                   DefaultText="Select Product"
                   ValueField="ProductId"
                   TextField="ProductName">
        </TelerikDropDownList>

                <TelerikValidationMessage For="@(() => ValidationModel.ProductId)"></TelerikValidationMessage>
            </Template>
    </FormItem>
    </FormItems>
  </TelerikForm>
  

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

@code  {
  string[] categoriesList = { "Beverages", "Condiments", "Dairy Products", "Meat/Poultry" };

  string SuccessMessage = string.Empty;
  
  public IEnumerable<Product> ProductSourceData { get; set; }
  public IEnumerable<Product> ProductData { get; set; }
  public IEnumerable<Category> CategoryData { get; set; }
  
  DropDownValidationModel ValidationModel { get; set; } = new DropDownValidationModel();

  public bool ProductEnabled => ValidationModel.CategoryId != null;

  protected override void OnInitialized()
  {
    ProductSourceData = GetProducts();

    List<Category> categories = new List<Category>();

    for (int i = 0; i < 4; i++)
    {
      categories.Add(new Category()
      {
        CategoryId = i + 1,
        CategoryName = categoriesList[i]
      });
    }

    CategoryData = categories;

    base.OnInitialized();
  }

  void OnCategoryChange(object value)
  {   
    ValidationModel.ProductId = default;

    if (value != null)
    {
      ProductData = ProductSourceData.Where(p => p.CategoryId == ValidationModel.CategoryId).ToList();
    }
  }

  async Task HandleValidSubmit()
  {
    SuccessMessage = "Form Submitted Successfully!";

    await Task.Delay(2000);

    SuccessMessage = string.Empty;
  }

  List<Product> GetProducts()
  { 
        List<Product> data = new List<Product>();
    
    data.Add(new Product() { ProductId = 1, ProductName = "Chai", CategoryId = 1 });
    data.Add(new Product() { ProductId = 2, ProductName = "Chang", CategoryId = 1 });
    data.Add(new Product() { ProductId = 3, ProductName = "Guaraná Fantástica" });
    data.Add(new Product() { ProductId = 4, ProductName = "Sasquatch Ale" });
    data.Add(new Product() { ProductId = 5, ProductName = "Steeleye Stout"});
    data.Add(new Product() { ProductId = 6, ProductName = "Côte de Blaye"});
    data.Add(new Product() { ProductId = 7, ProductName = "Chartreuse verte"});
    data.Add(new Product() { ProductId = 8, ProductName = "Ipoh Coffee"});
        
    data.Add(new Product() { ProductId = 9, ProductName = "Aniseed Syrup", CategoryId = 2});
    data.Add(new Product() { ProductId = 10, ProductName = "Chef Anton's Cajun Seasoning", CategoryId = 2 });
    data.Add(new Product() { ProductId = 11, ProductName = "Chef Anton's Gumbo Mix", CategoryId = 2 });
    data.Add(new Product() { ProductId = 12, ProductName = "Grandma's Boysenberry Spread", CategoryId = 2 });
    data.Add(new Product() { ProductId = 13, ProductName = "Northwoods Cranberry Sauce", CategoryId = 2 });
    data.Add(new Product() { ProductId = 14, ProductName = "Genen Shouyu", CategoryId = 2 });
    data.Add(new Product() { ProductId = 15, ProductName = "Gula Malacca", CategoryId = 2 });
    data.Add(new Product() { ProductId = 16, ProductName = "Vegie-spread", CategoryId = 2 });

    data.Add(new Product() { ProductId = 25, ProductName = "Queso Cabrales", CategoryId = 3 });
    data.Add(new Product() { ProductId = 26, ProductName = "Mascarpone Fabioli", CategoryId = 3 });
    data.Add(new Product() { ProductId = 27, ProductName = "Geitost", CategoryId = 3 });
    data.Add(new Product() { ProductId = 28, ProductName = "Raclette Courdavault", CategoryId = 3 });
    data.Add(new Product() { ProductId = 29, ProductName = "Camembert Pierrot", CategoryId = 3 });
    data.Add(new Product() { ProductId = 30, ProductName = "Gudbrandsdalsost", CategoryId = 3 });
    data.Add(new Product() { ProductId = 31, ProductName = "Flotemysost", CategoryId = 3 });
    data.Add(new Product() { ProductId = 32, ProductName = "Mozzarella di Giovanni", CategoryId = 3 });
        
    data.Add(new Product() { ProductId = 40, ProductName = "Mishi Kobe Niku", CategoryId = 4 });
    data.Add(new Product() { ProductId = 41, ProductName = "Alice Mutton", CategoryId = 4 });
    data.Add(new Product() { ProductId = 42, ProductName = "Thüringer Rostbratwurst", CategoryId = 4 });
    data.Add(new Product() { ProductId = 43, ProductName = "Perth Pasties", CategoryId = 4 });
    data.Add(new Product() { ProductId = 44, ProductName = "Tourtière", CategoryId = 4 });
    data.Add(new Product() { ProductId = 45, ProductName = "Pâté chinois", CategoryId = 4});
    data.Add(new Product() { ProductId = 46, ProductName = "Uncle Bob's Organic Dried Pears", CategoryId = 4 });
    data.Add(new Product() { ProductId = 47, ProductName = "Tofu", CategoryId = 4 });

    return data;
  } 

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

  public class Product
  {
  public int? ProductId { get; set; }

  public string ProductName { get; set; }
  
  public int? CategoryId { get; set; }
  }

  public class Category
  {
  public int? CategoryId { get; set; }

  public string CategoryName { get; set; }
  }
}

<style>

  .dropdownlist-form {
  padding: 20px;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .header {
    color: #454545;
    font-weight: 700;
  }
        .header h3 {
            font-weight: 500;
            font-size: 18px;
        }

  .margin-top {
    margin-top: 8px;
  }
</style>