80+ Truly Native Blazor UI Components for Any App Scenario

 <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>      
<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>                       

@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"
                  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);
    }
}
                        

<div class="calendar-wrap">
  <div class="col col-3">
    <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-9">
    <TelerikCalendar SelectionMode="@CalendarSelectionMode.Multiple"
                     @bind-Date="@startDate"
                     @bind-View="@CalendarViewValue"
                     Views="2">
    </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 />
    <TelerikValidationSummary />

    <label>Categories</label>
    <TelerikDropDownList Data="@CategoryData" @bind-Value="@category.CategoryId" PopupHeight="170px"
                         DefaultText="Select Category" ValueField="CategoryId" TextField="CategoryName">
    </TelerikDropDownList>

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

    <label>Shipping Address</label>
    <TelerikDropDownList Data="@OrderData" @bind-Value=@order.OrderId PopupHeight="170px"
                         DefaultText="Select City" ValueField="OrderId" TextField="OrderName">
    </TelerikDropDownList>

    <div class="submit-btn-wrap">
      <TelerikButton Primary="true">Submit</TelerikButton>
    </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>