<ElementsWrapper>

# KendoReact Examples & Demos

Explore a variety of KendoReact examples and demos, showcasing powerful React components like grids, charts, and scheduler — designed to help you quickly build modern, high-performance applications.

## Popular KendoReact Elements

<TabStrip>
    <TabStripTab title="Components" href="#explore-all-120-kendoreact-components" linktext="See All Components">
        <SmallCardContainer>
            <SmallCard title="Grid" href="/grid" src="/kendo-react-ui/components/assets/87d0450dc144cd1c2364bc13a9b3a2df/grid.svg" tag="updated" release_tag="Q3 2026"></SmallCard>
            <SmallCard title="Charts" href="/charts" src="/kendo-react-ui/components/assets/8d415fb741a84e8ef24df5add8685e95/charts.svg" tag="updated" release_tag="Q3 2026"></SmallCard>
            <SmallCard title="Form" href="/form" src="/kendo-react-ui/components/assets/00d36791d9162d362cb77b0c1bc04f4e/form.svg"></SmallCard>
            <SmallCard title="Scheduler" href="/scheduler" src="/kendo-react-ui/components/assets/c1e884845616da48b829fd817385e26f/scheduler.svg" tag="updated" release_tag="Q3 2026"></SmallCard>
            <SmallCard title="AIPrompt" href="/conversationalui/ai-prompt" src="/kendo-react-ui/components/assets/84a6ac1f2a6370df580d11b9071b7447/aiprompt.svg"></SmallCard>
            <SmallCard title="Editor" href="/editor" src="/kendo-react-ui/components/assets/07f76872bc812ba72a8a5a0ecb76e411/editor.svg"></SmallCard>
            <SmallCard title="Spreadsheet" href="/spreadsheet" src="/kendo-react-ui/components/assets/c6ff3cbb21582f7f1d3e134097fb06db/spreadsheet.svg"></SmallCard>
            <SmallCard title="DateRangePicker" href="/dateinputs/daterangepicker" src="/kendo-react-ui/components/assets/fa41b6ed502e1fe8742b460ed5972e93/daterangepicker.svg"></SmallCard>
        </SmallCardContainer>
    </TabStripTab>
    <TabStripTab title="AI Components & Features" href="/ai-components" linktext="See All AI Components & Features">
        <SmallCardContainer>
        <SmallCard type="ai" title="DatAInsights Composer" tag="new"
            href="/datainsights-composer" src="/kendo-react-ui/components/assets/3d6e13feb50f5074f4465367f244e948/datainsightscomposer-light.svg" subtitle="UI Component" ></SmallCard>
            <SmallCard type="ai" title="AI Chat"
            href="/conversationalui/chat" src="/kendo-react-ui/components/assets/1a95789349616f5a96ee349e0f03d262/ai-chat-light.svg" subtitle="Chat Feature" ></SmallCard>
            <SmallCard type="ai" title="Semantic Search"
            href="/grid/smart/semantic-search" src="/kendo-react-ui/components/assets/3dbee9513715b6aec7821936def93104/semanticsearch-light.svg" subtitle="Smart Grid Feature"></SmallCard>
            <SmallCard type="ai" title="SmartPaste"
            href="/buttons/smartpaste" src="/kendo-react-ui/components/assets/27e57cf369afea2c55252c988e1c16b2/smartpaste-light.svg" subtitle="UI Component"></SmallCard>
             <SmallCard type="ai" title="AI Data Operations"
            href="/grid/smart/ai-toolbar-assistant" src="/kendo-react-ui/components/assets/66700c3faf7e673443e2a84b0b43c2db/ai-data-operations-light.svg" subtitle="Smart Grid Feature"></SmallCard>
            <SmallCard type="ai" title="AI Column Assistant"
            href="/grid/smart/custom-column" src="/kendo-react-ui/components/assets/5c4fc2a8b69f5c417855a1336159e728/ai-column-assistant-light.svg" subtitle="Smart Grid Feature"></SmallCard>
            <SmallCard type="ai" title="PromptBox"
            href="/conversationalui/promptbox" src="/kendo-react-ui/components/assets/e857947dd4a6f4f40c482b2a2f2e7959/promptbox-light.svg" subtitle="UI Component"></SmallCard>
            <SmallCard type="ai" title="AI Chat Integration"
            href="/grid/smart/ai-chat-assistant" src="/kendo-react-ui/components/assets/6299d205cc45a7495b2fa72b2ac1d5d8/gridaichatintegration-light.svg" subtitle="Grid Integration"></SmallCard>
            <SmallCard type="ai" title="Inline AI Prompt"
            href="/conversationalui/inline-ai-prompt" src="/kendo-react-ui/components/assets/b07e2654c598dbe92d5f9eb14e518b0b/inlineaiprompt-light.svg" subtitle="UI Component"></SmallCard>
        </SmallCardContainer>
    </TabStripTab>
        <TabStripTab title="AI Tools" href="/ai-tools/agentic-ui-generator" linkText="See All AI Tools">
        <DetailedCardContainer>
            <DetailedCard title="Agentic UI Generator" href="/ai-tools/agentic-ui-generator/getting-started" src="/kendo-react-ui/components/assets/ddec1c31fabb6d544c9f56c175bcde5c/agentic-ui-generator.png" description="The Agentic UI Generator integrates specialized tools working together in an agentic flow to deliver beautiful, on-brand, and enterprise-ready UIs." backgroundcolor="#BFAEF8"></DetailedCard>
            <DetailedCard title="WebMCP" href="/ai-tools/web-mcp" src="/kendo-react-ui/components/assets/66a36349d98c1dc7e7cf1f52364972f2/webmcp.png" description="The WebMCP Extension performs operations like data sorting, data filtering, navigation, value changes, and more through natural language user prompts." backgroundcolor="#BFAEF8" ></DetailedCard>
        </DetailedCardContainer>
    </TabStripTab>
    <TabStripTab title="Building Blocks" href="https://www.telerik.com/design-system/docs/ui-templates/overview/#building-blocks" linkText="See All Building Blocks">
        <LargeCardContainer>
            <LargeCard title="Dashboard Card" href="https://www.telerik.com/design-system/docs/ui-templates/building-blocks/dashboard/dashboard-card/" src="/kendo-react-ui/components/assets/88f9555f58c9b969076dc22153494197/dashboard-card.svg"></LargeCard>
            <LargeCard title="Hero" href="https://www.telerik.com/design-system/docs/ui-templates/building-blocks/landing-page/hero/" src="/kendo-react-ui/components/assets/f5dfc4a9351d5da9f4e670d6c62b4327/hero.svg"></LargeCard>
            <LargeCard title="Login" href="https://www.telerik.com/design-system/docs/ui-templates/building-blocks/listing-page/login/" src="/kendo-react-ui/components/assets/17a3352d4b16873d91ebdf09f3415cda/login.svg"></LargeCard>
            <LargeCard title="Top Navbar" href="https://www.telerik.com/design-system/docs/ui-templates/building-blocks/dashboard/top-navbar/" src="/kendo-react-ui/components/assets/73fcf0a1a4289cabb49197ac7bcaf00c/top-navbar.svg"></LargeCard>
            <LargeCard title="Stats" href="https://www.telerik.com/design-system/docs/ui-templates/building-blocks/landing-page/stats/" src="/kendo-react-ui/components/assets/da6c9a047b9e10e158c257b8b97cb7ee/stats.svg"></LargeCard>
            <LargeCard title="Welcome AI" href="https://www.telerik.com/design-system/docs/ui-templates/building-blocks/ai/welcome-ai/" src="/kendo-react-ui/components/assets/d32da3aae9fb319eb5b4150c622ab81d/welcome-ai.svg"></LargeCard>
        </LargeCardContainer>
    </TabStripTab>
    <TabStripTab title="Templates" href="https://www.telerik.com/design-system/docs/ui-templates/overview/#page-templates" linktext="See All Templates">
        <DetailedCardContainer>
            <DetailedCard
            title="Healthcare Admin"
            href="https://www.telerik.com/design-system/docs/ui-templates/templates/healthcare-admin/"
            src="/kendo-react-ui/components/assets/047c7c2220fcf7bff4992181875459bb/healthcare-admin.png"
            description="Get a medical dashboard page that provides information about key performance indicators, essential analytics, and real-time data."
            backgroundcolor="#509EDE"></DetailedCard>
            <DetailedCard
            title="Fintech Dashboard"
            href="https://www.telerik.com/design-system/docs/ui-templates/templates/fintech-dashboard/" src="/kendo-react-ui/components/assets/e20fa92cbc55d3c93e1e498cfbf91b18/fintech-dashboard.png"
            description="Get a fintech dashboard template tailored to provide key performance metrics and analytics for optimal financial results."
            backgroundcolor="#68988E"></DetailedCard>
            <DetailedCard
            title="Project Tracker"
            href="https://www.telerik.com/design-system/docs/ui-templates/templates/project-tracker/" src="/kendo-react-ui/components/assets/3cbc5926be8113e8cb0f96b60ae8f197/project-tracker.png"
            description="Manage tasks, projects and teams efficiently with the Project Tracker App, built entirely with free KendoReact components."
            backgroundcolor="#818FDD"
            label="Built with Free Components Only"></DetailedCard>
        </DetailedCardContainer>
    </TabStripTab>
    <TabStripTab title="Sample Apps" href="/sample-applications" linktext="See All Sample Apps">
        <DetailedCardContainer>
            <DetailedCard title="Healthcare Management System"
            href="https://telerik.github.io/kendo-react/react-health-app/#/"
            src="/kendo-react-ui/components/assets/29bf4687ea3d25a9cd7dad052973c62a/react-health-app.png"
            description="A hospital management application featuring appointment scheduling, patient record management, and monitoring dashboards."
            backgroundcolor="#E2C0FB" ></DetailedCard>
            <DetailedCard title="Ecommerce Jewellery Store"
            href="https://telerik.github.io/kendo-react/ecommerce-jewellery-store/"
            src="/kendo-react-ui/components/assets/76d8283c646297ed7f7c7c8b35a061ff/ecommerce-jewellery-store.png"
            description="An ecommerce storefront app built with KendoReact components showcasing product listings and cart functionality."
            backgroundcolor="#FF8A82"></DetailedCard>
            <DetailedCard title="Personal Finance Dashboard"
            href="https://telerik.github.io/kendo-react/kendo-react-personal-finance/"
            src="/kendo-react-ui/components/assets/829756220f3fc696f1edcf95960adbfe/personal-finance.png"
            description="A financial dashboard app that showcases the Grid, Charts, DateInputs, and ProgressBars for React."
            backgroundcolor="#B7BEE3"></DetailedCard>
        </DetailedCardContainer>
    </TabStripTab>

</TabStrip>

<CtaPanelLanding></CtaPanelLanding>

</ElementsWrapper>

<ComponentsWrapper>

## Explore All 120+ KendoReact Components

120+ premium components, plus five complete, ready-to-use [design themes](https://www.telerik.com/design-system/docs/themes/get-started/introduction/) (Meridian, Bootstrap, Material, Fluent, Default), [page templates and building blocks](https://www.telerik.com/design-system/docs/ui-templates/overview), and [ThemeBuilder](https://www.telerik.com/themebuilder) tool.

<ComponentsTabStrip>
    <ComponentsTabStripTab title="Components" filterable="true">
      <ComponentsTabList>
        <ComponentsLinkGroup>
            <ComponentsLink tier="free" href="/animation" title="Animation"></ComponentsLink>
            <ComponentsLink tier="free" href="/animation/api/expandprops" title="Expand"></ComponentsLink>
            <ComponentsLink tier="free" href="/animation/api/fadeprops" title="Fade"></ComponentsLink>
            <ComponentsLink tier="free" href="/animation/api/pushprops" title="Push"></ComponentsLink>
            <ComponentsLink tier="free" href="/animation/api/revealprops" title="Reveal"></ComponentsLink>
            <ComponentsLink tier="free" href="/animation/api/slideprops" title="Slide"></ComponentsLink>
            <ComponentsLink tier="free" href="/animation/api/zoomprops" title="Zoom"></ComponentsLink>
        </ComponentsLinkGroup>
        <ComponentsLinkGroup>
            <ComponentsLink tier="premium" href="/barcodes" title="Barcodes"></ComponentsLink>
            <ComponentsLink tier="premium" href="/barcodes/barcode" title="Barcode"></ComponentsLink>
            <ComponentsLink tier="premium" href="/barcodes/qrcode" title="QR Code"></ComponentsLink>
        </ComponentsLinkGroup>
        <ComponentsLinkGroup>
            <ComponentsLink tier="mixed" href="/buttons" title="Buttons" ></ComponentsLink>
            <ComponentsLink tier="free" href="/buttons/button" title="Button"></ComponentsLink>
            <ComponentsLink tier="free" href="/buttons/buttongroup" title="ButtonGroup"></ComponentsLink>
            <ComponentsLink tier="free" href="/buttons/chip" title="Chip"></ComponentsLink>
            <ComponentsLink tier="free" href="/buttons/chiplist" title="ChipList"></ComponentsLink>
            <ComponentsLink tier="premium" href="/buttons/dropdownbutton" title="DropDownButton"></ComponentsLink>
            <ComponentsLink tier="free" href="/buttons/floatingactionbutton" title="FloatingActionButton"></ComponentsLink>
            <ComponentsLink tier="premium" href="/buttons/floatingtoolbar" title="FloatingToolbar" tag="new" release_tag="Q4 2026"></ComponentsLink>
            <ComponentsLink tier="free" href="/buttons/segmentedcontrol" title="SegmentedControl" ></ComponentsLink>
            <ComponentsLink tier="premium" href="/buttons/smartpaste" title="SmartPasteButton"></ComponentsLink>
            <ComponentsLink tier="premium" href="/buttons/speechtotextbutton" title="SpeechToTextButton"></ComponentsLink>
            <ComponentsLink tier="premium" href="/buttons/splitbutton" title="SplitButton"></ComponentsLink>
            <ComponentsLink tier="free" href="/buttons/toolbar" title="Toolbar"></ComponentsLink>
        </ComponentsLinkGroup>
        <ComponentsLinkGroup>
            <ComponentsLink tier="premium" href="/charts" title="Charts" tag="updated" release_tag="Q3 2026"></ComponentsLink>
            <ComponentsLink tier="premium" href="/charts/chart" title="Chart"></ComponentsLink>
            <ComponentsLink tier="premium" href="/charts/sankey" title="Sankey"></ComponentsLink>
            <ComponentsLink tier="premium" href="/charts/sparkline" title="Sparkline"></ComponentsLink>
            <ComponentsLink tier="premium" href="/charts/stockchart" title="Stockchart"></ComponentsLink>
            <ComponentsLink tier="premium" href="/charts/series-types/area" title="Area"></ComponentsLink>
            <ComponentsLink tier="premium" href="/charts/series-types/bar" title="Bar"></ComponentsLink>
            <ComponentsLink tier="premium" href="/charts/series-types/box-plot" title="Box Plot"></ComponentsLink>
            <ComponentsLink tier="premium" href="/charts/series-types/bubble" title="Bubble"></ComponentsLink>
            <ComponentsLink tier="premium" href="/charts/series-types/bullet" title="Bullet"></ComponentsLink>
            <ComponentsLink tier="premium" href="/charts/series-types/combination" title="Combination" tag="new" release_tag="Q3 2026"></ComponentsLink>
            <ComponentsLink tier="premium" href="/charts/series-types/donut" title="Donut"></ComponentsLink>
            <ComponentsLink tier="premium" href="/charts/drill-down" title="Drilldown"></ComponentsLink>
            <ComponentsLink tier="premium" href="/charts/series-types/funnel" title="Funnel"></ComponentsLink>
            <ComponentsLink tier="premium" href="/charts/series-types/heatmap" title="Heatmap"></ComponentsLink>
            <ComponentsLink tier="premium" href="/charts/series-types/line" title="Line"></ComponentsLink>
            <ComponentsLink tier="premium" href="/charts/series-types/pie" title="Pie"></ComponentsLink>
            <ComponentsLink tier="premium" href="/charts/series-types/polar" title="Polar"></ComponentsLink>
            <ComponentsLink tier="premium" href="/charts/series-types/pyramid" title="Pyramid"></ComponentsLink>
            <ComponentsLink tier="premium" href="/charts/series-types/radar" title="Radar"></ComponentsLink>
            <ComponentsLink tier="premium" href="/charts/series-types/range-area" title="RangeArea"></ComponentsLink>
            <ComponentsLink tier="premium" href="/charts/series-types/range-bar" title="RangeBar"></ComponentsLink>
            <ComponentsLink tier="premium" href="/charts/series-types/scatter" title="Scatter"></ComponentsLink>
            <ComponentsLink tier="premium" href="/charts/series-types/waterfall" title="Waterfall"></ComponentsLink>
        </ComponentsLinkGroup>
        <ComponentsLinkGroup>
            <ComponentsLink tier="premium" href="/chart-wizard" title="Chart Wizard"></ComponentsLink>
        </ComponentsLinkGroup>
        <ComponentsLinkGroup>
            <ComponentsLink tier="premium" href="/dataquery" title="Data Query"></ComponentsLink>
        </ComponentsLinkGroup>
        <ComponentsLinkGroup>
            <ComponentsLink tier="mixed" href="/conversationalui" title="Conversational UI" tag="updated" release_tag="Q3 2026"></ComponentsLink>
            <ComponentsLink tier="premium" href="/conversationalui/ai-prompt" title="AIPrompt"></ComponentsLink>
            <ComponentsLink tier="premium" href="/conversationalui/chat" title="Chat" ></ComponentsLink>
            <ComponentsLink tier="premium" href="/conversationalui/inline-ai-prompt" title="InlineAIPrompt"></ComponentsLink>
            <ComponentsLink tier="premium" href="/conversationalui/promptbox" title="PromptBox" ></ComponentsLink>
            <ComponentsLink tier="free" href="/conversationalui/llm-kit" title="LLM Kit" tag="new" release_tag="Q3 2026"></ComponentsLink>
        </ComponentsLinkGroup>
        <ComponentsLinkGroup>
            <ComponentsLink tier="mixed" href="/datatools" title="Data Tools"></ComponentsLink>
            <ComponentsLink tier="free" href="/datatools/pager" title="Pager"></ComponentsLink>
            <ComponentsLink tier="premium" href="/datatools/filter" title="Filter"></ComponentsLink>
            <ComponentsLink tier="premium" href="/datatools/datasource" title="DataSource"></ComponentsLink>
        </ComponentsLinkGroup>
        <ComponentsLinkGroup>
            <ComponentsLink tier="premium" href="/datainsights-composer" title="DatAInsights Composer" tag="new" release_tag="Q4 2026"></ComponentsLink>
        </ComponentsLinkGroup>
        <ComponentsLinkGroup>
            <ComponentsLink tier="mixed" href="/dateinputs" title="Date Inputs"></ComponentsLink>
            <ComponentsLink tier="free" href="/dateinputs/calendar" title="Calendar"></ComponentsLink>
            <ComponentsLink tier="free" href="/dateinputs/dateinput" title="DateInput"></ComponentsLink>
            <ComponentsLink tier="free" href="/dateinputs/datepicker" title="DatePicker"></ComponentsLink>
            <ComponentsLink tier="premium" href="/dateinputs/daterangepicker" title="DateRangePicker"></ComponentsLink>
            <ComponentsLink tier="free" href="/dateinputs/datetimepicker" title="DateTimePicker"></ComponentsLink>
            <ComponentsLink tier="premium" href="/dateinputs/multiviewcalendar" title="MultiViewCalendar"></ComponentsLink>
            <ComponentsLink tier="premium" href="/dateinputs/timepicker" title="TimePicker"></ComponentsLink>
        </ComponentsLinkGroup>
                <ComponentsLinkGroup>
            <ComponentsLink tier="premium" href="/datemath" title="Date Math"></ComponentsLink>
        </ComponentsLinkGroup>
        <ComponentsLinkGroup>
            <ComponentsLink tier="free" href="/dialogs" title="Dialogs"></ComponentsLink>
            <ComponentsLink tier="free" href="/dialogs/dialog" title="Dialog"></ComponentsLink>
            <ComponentsLink tier="free" href="/dialogs/window" title="Window"></ComponentsLink>
        </ComponentsLinkGroup>
        <ComponentsLinkGroup>
            <ComponentsLink tier="premium" href="/diagram" title="Diagram" tag="updated" release_tag="Q4 2026"></ComponentsLink>
        </ComponentsLinkGroup>
        <ComponentsLinkGroup>
            <ComponentsLink tier="premium" href="/drawing" title="Drawing"></ComponentsLink>
        </ComponentsLinkGroup>
        <ComponentsLinkGroup>
            <ComponentsLink tier="mixed" href="/dropdowns" title="Dropdowns" tag="updated" release_tag="Q3 2026"></ComponentsLink>
            <ComponentsLink tier="mixed" href="/dropdowns/autocomplete" title="AutoComplete"></ComponentsLink>
            <ComponentsLink tier="premium" href="/dropdowns/combobox" title="ComboBox"></ComponentsLink>
            <ComponentsLink tier="mixed" href="/dropdowns/dropdownlist" title="DropDownList"></ComponentsLink>
            <ComponentsLink tier="premium" href="/dropdowns/dropdowntree" title="DropDownTree"></ComponentsLink>
            <ComponentsLink tier="premium" href="/dropdowns/multicolumncombobox" title="MultiColumnComboBox"></ComponentsLink>
            <ComponentsLink tier="mixed" href="/dropdowns/multiselect" title="MultiSelect" tag="updated" release_tag="Q3 2026"></ComponentsLink>
            <ComponentsLink tier="premium" href="/dropdowns/multiselecttree" title="MultiSelectTree"></ComponentsLink>
        </ComponentsLinkGroup>
        <ComponentsLinkGroup>
            <ComponentsLink tier="premium" href="/editor" title="Editor"></ComponentsLink>
        </ComponentsLinkGroup>
        <ComponentsLinkGroup>
            <ComponentsLink tier="premium" href="/excelexport" title="Excel Export"></ComponentsLink>
        </ComponentsLinkGroup>
        <ComponentsLinkGroup>
            <ComponentsLink tier="premium" href="/filesaver" title="File Saver"></ComponentsLink>
        </ComponentsLinkGroup>
        <ComponentsLinkGroup>
            <ComponentsLink tier="premium" href="/form" title="Form"></ComponentsLink>
            <ComponentsLink tier="premium" href="/form/wizard" title="Form Wizard"></ComponentsLink>
        </ComponentsLinkGroup>
        <ComponentsLinkGroup>
            <ComponentsLink tier="premium" href="/gantt" title="Gantt"></ComponentsLink>
        </ComponentsLinkGroup>        <ComponentsLinkGroup>
            <ComponentsLink tier="premium" href="/gauges" title="Gauges"></ComponentsLink>
            <ComponentsLink tier="premium" href="/gauges/arcgauge" title="ArcGauge"></ComponentsLink>
            <ComponentsLink tier="premium" href="/gauges/lineargauge" title="LinearGauge"></ComponentsLink>
            <ComponentsLink tier="premium" href="/gauges/radialgauge" title="RadialGauge"></ComponentsLink>
            <ComponentsLink tier="premium" href="/gauges/circulargauge" title="CircularGauge"></ComponentsLink>
        </ComponentsLinkGroup>
        <ComponentsLinkGroup>
            <ComponentsLink tier="mixed" href="/grid" title="Grid" tag="updated" release_tag="Q3 2026"></ComponentsLink>
        </ComponentsLinkGroup>
        <ComponentsLinkGroup>
            <ComponentsLink tier="free" href="/common/icon" title="Icons" ></ComponentsLink>
            <ComponentsLink tier="free" href="/common/icon" title="Icon" ></ComponentsLink>
            <ComponentsLink tier="free" href="/common/svgicon" title="SVGIcon" ></ComponentsLink>
        </ComponentsLinkGroup>
        <ComponentsLinkGroup>
            <ComponentsLink tier="free" href="/indicators" title="Indicators"></ComponentsLink>
            <ComponentsLink tier="free" href="/indicators/badge" title="Badge"></ComponentsLink>
            <ComponentsLink tier="free" href="/indicators/loader" title="Loader"></ComponentsLink>
            <ComponentsLink tier="free" href="/indicators/skeleton" title="Skeleton"></ComponentsLink>
        </ComponentsLinkGroup>
        <ComponentsLinkGroup>
            <ComponentsLink tier="mixed" href="/inputs" title="Inputs" tag="updated" release_tag="Q3 2026"></ComponentsLink>
            <ComponentsLink tier="free" href="/inputs/checkbox" title="Checkbox"></ComponentsLink>
            <ComponentsLink tier="premium" href="/inputs/colorpicker" title="ColorPicker"></ComponentsLink>
            <ComponentsLink tier="premium" href="/inputs/colorgradient" title="ColorGradient"></ComponentsLink>
            <ComponentsLink tier="free" href="/inputs/colorpalette" title="ColorPalette"></ComponentsLink>
            <ComponentsLink tier="premium" href="/inputs/flatcolorpicker" title="FlatColorPicker"></ComponentsLink>
            <ComponentsLink tier="free" href="/inputs/input" title="Input"></ComponentsLink>
            <ComponentsLink tier="free" href="/inputs/maskedtextbox" title="MaskedTextBox"></ComponentsLink>
            <ComponentsLink tier="free" href="/inputs/numerictextbox" title="NumericTextBox"></ComponentsLink>
            <ComponentsLink tier="free" href="/inputs/otpinput" title="OTPInput" tag="new" release_tag="Q3 2026"></ComponentsLink>
            <ComponentsLink tier="free" href="/inputs/radiobutton" title="RadioButton"></ComponentsLink>
            <ComponentsLink tier="free" href="/inputs/radiogroup" title="RadioGroup"></ComponentsLink>
            <ComponentsLink tier="premium" href="/inputs/rangeslider" title="RangeSlider"></ComponentsLink>
            <ComponentsLink tier="free" href="/inputs/rating" title="Rating"></ComponentsLink>
            <ComponentsLink tier="premium" href="/inputs/signature" title="Signature"></ComponentsLink>
            <ComponentsLink tier="free" href="/inputs/slider" title="Slider"></ComponentsLink>
            <ComponentsLink tier="free" href="/inputs/switch" title="Switch"></ComponentsLink>
            <ComponentsLink tier="free" href="/inputs/textarea" title="TextArea"></ComponentsLink>
            <ComponentsLink tier="free" href="/inputs/textbox" title="TextBox"></ComponentsLink>
        </ComponentsLinkGroup>
        <ComponentsLinkGroup>
            <ComponentsLink tier="mixed" href="/labels" title="Labels"></ComponentsLink>
            <ComponentsLink tier="free" href="/labels/error" title="Error"></ComponentsLink>
            <ComponentsLink tier="free" href="/labels/floating-label" title="FloatingLabel"></ComponentsLink>
            <ComponentsLink tier="free" href="/labels/hint" title="Hint"></ComponentsLink>
            <ComponentsLink tier="free" href="/labels/label" title="Label"></ComponentsLink>
        </ComponentsLinkGroup>
        <ComponentsLinkGroup>
            <ComponentsLink tier="mixed" href="/layout" title="Layout" tag="updated" release_tag="Q4 2026"></ComponentsLink>
            <ComponentsLink tier="free" href="/layout/actionsheet" title="ActionSheet"></ComponentsLink>
            <ComponentsLink tier="free" href="/layout/appbar" title="AppBar"></ComponentsLink>
            <ComponentsLink tier="free" href="/layout/avatar" title="Avatar"></ComponentsLink>
            <ComponentsLink tier="free" href="/layout/bottomnavigation" title="BottomNavigation"></ComponentsLink>
            <ComponentsLink tier="free" href="/layout/breadcrumb" title="Breadcrumb"></ComponentsLink>
            <ComponentsLink tier="free" href="/layout/card" title="Card"></ComponentsLink>
            <ComponentsLink tier="free" href="/layout/contextmenu" title="ContextMenu"></ComponentsLink>
            <ComponentsLink tier="free" href="/layout/drawer" title="Drawer"></ComponentsLink>
            <ComponentsLink tier="free" href="/layout/expansionpanel" title="ExpansionPanel"></ComponentsLink>
            <ComponentsLink tier="free" href="/layout/gridlayout" title="GridLayout"></ComponentsLink>
            <ComponentsLink tier="free" href="/layout/menu" title="Menu" tag="updated" release_tag="Q4 2026"></ComponentsLink>
            <ComponentsLink tier="free" href="/layout/panelbar" title="PanelBar"></ComponentsLink>
            <ComponentsLink tier="premium" href="/layout/splitter" title="Splitter"></ComponentsLink>
            <ComponentsLink tier="free" href="/layout/stacklayout" title="StackLayout"></ComponentsLink>
            <ComponentsLink tier="free" href="/layout/stepper" title="Stepper"></ComponentsLink>
            <ComponentsLink tier="free" href="/layout/tabstrip" title="TabStrip"></ComponentsLink>
            <ComponentsLink tier="free" href="/layout/tilelayout" title="TileLayout"></ComponentsLink>
            <ComponentsLink tier="premium" href="/layout/timeline" title="TimeLine"></ComponentsLink>
        </ComponentsLinkGroup>
        <ComponentsLinkGroup>
            <ComponentsLink tier="free" href="/listbox" title="ListBox"></ComponentsLink>
        </ComponentsLinkGroup>
        <ComponentsLinkGroup>
            <ComponentsLink tier="premium" href="/listview" title="ListView"></ComponentsLink>
        </ComponentsLinkGroup>
        <ComponentsLinkGroup>
            <ComponentsLink tier="premium" href="/map" title="Map"></ComponentsLink>
        </ComponentsLinkGroup>
        <ComponentsLinkGroup>
            <ComponentsLink tier="free" href="/notification" title="Notification"></ComponentsLink>
        </ComponentsLinkGroup>
        <ComponentsLinkGroup>
            <ComponentsLink tier="premium" href="/orgchart" title="OrgChart"></ComponentsLink>
        </ComponentsLinkGroup>
        <ComponentsLinkGroup>
            <ComponentsLink tier="premium" href="/pdfprocessing" title="PDF Processing"></ComponentsLink>
        </ComponentsLinkGroup>
        <ComponentsLinkGroup>
            <ComponentsLink tier="premium" href="/pdfviewer" title="PDF Viewer"></ComponentsLink>
        </ComponentsLinkGroup>
        <ComponentsLinkGroup>
            <ComponentsLink tier="premium" href="/pivotgrid" title="PivotGrid"></ComponentsLink>
        </ComponentsLinkGroup>
        <ComponentsLinkGroup>
            <ComponentsLink tier="free" href="/popup" title="Popup"></ComponentsLink>
        </ComponentsLinkGroup>
        <ComponentsLinkGroup>
            <ComponentsLink tier="mixed" href="/progressbars" title="Progress Bars"></ComponentsLink>
            <ComponentsLink tier="free" href="/progressbars/progressbar" title="ProgressBar"></ComponentsLink>
            <ComponentsLink tier="premium" href="/progressbars/chunkprogressbar" title="ChunkProgressBar"></ComponentsLink>
        </ComponentsLinkGroup>
        <ComponentsLinkGroup>
            <ComponentsLink tier="premium" href="/ripple" title="Ripple"></ComponentsLink>
        </ComponentsLinkGroup>
        <ComponentsLinkGroup>
            <ComponentsLink tier="premium" href="/scheduler" title="Scheduler" tag="updated" release_tag="Q3 2026"></ComponentsLink>
        </ComponentsLinkGroup>
        <ComponentsLinkGroup>
            <ComponentsLink tier="premium" href="/scrollview" title="ScrollView"></ComponentsLink>
        </ComponentsLinkGroup>
        <ComponentsLinkGroup>
            <ComponentsLink tier="premium" href="/sortable" title="Sortable"></ComponentsLink>
        </ComponentsLinkGroup>
        <ComponentsLinkGroup>
            <ComponentsLink tier="premium" href="/spreadsheet" title="Spreadsheet"></ComponentsLink>
        </ComponentsLinkGroup>
        <ComponentsLinkGroup>
            <ComponentsLink tier="premium" href="/taskboard" title="TaskBoard"></ComponentsLink>
        </ComponentsLinkGroup>
        <ComponentsLinkGroup>
            <ComponentsLink tier="free" href="/tooltip" title="Tooltips"></ComponentsLink>
            <ComponentsLink tier="free" href="/tooltip/tooltip" title="Tooltip"></ComponentsLink>
            <ComponentsLink tier="free" href="/tooltip/popover" title="Popover"></ComponentsLink>
        </ComponentsLinkGroup>
        <ComponentsLinkGroup>
            <ComponentsLink tier="premium" href="/treelist" title="TreeList"></ComponentsLink>
        </ComponentsLinkGroup>
        <ComponentsLinkGroup>
            <ComponentsLink tier="premium" href="/treeview" title="TreeView"></ComponentsLink>
        </ComponentsLinkGroup>
        <ComponentsLinkGroup>
            <ComponentsLink tier="premium" href="/upload" title="Upload"></ComponentsLink>
            <ComponentsLink tier="premium" href="/upload/external-drop-zone" title="ExternalDropZone"></ComponentsLink>
        </ComponentsLinkGroup>
        <ComponentsLinkGroup>
            <ComponentsLink tier="mixed" href="/common" title="Utilities"></ComponentsLink>
            <ComponentsLink tier="premium" href="/common/drag-and-drop" title="Drag and Drop"></ComponentsLink>
            <ComponentsLink tier="free" href="/common/typography" title="Typography"></ComponentsLink>
            <ComponentsLink tier="free" href="/common/navigation" title="Keyboard Navigation"></ComponentsLink>
            <ComponentsLink tier="free" href="/common/adaptive-mode" title="AdaptiveModeContext"></ComponentsLink>
        </ComponentsLinkGroup>
      </ComponentsTabList>
    </ComponentsTabStripTab>
    <ComponentsTabStripTab title="Building Blocks">
      <ComponentsTabList>
        <ComponentsLinkGroup>
            <ComponentsLink title="Landing Page Blocks"></ComponentsLink>
            <ComponentsLink href="https://www.telerik.com/design-system/docs/ui-templates/building-blocks/landing-page/cards/" title="Cards"></ComponentsLink>
            <ComponentsLink href="https://www.telerik.com/design-system/docs/ui-templates/building-blocks/landing-page/contact-form/" title="Contact Form"></ComponentsLink>
            <ComponentsLink href="https://www.telerik.com/design-system/docs/ui-templates/building-blocks/landing-page/features/" title="Features"></ComponentsLink>
            <ComponentsLink href="https://www.telerik.com/design-system/docs/ui-templates/building-blocks/landing-page/footer/" title="Footer"></ComponentsLink>
            <ComponentsLink href="https://www.telerik.com/design-system/docs/ui-templates/building-blocks/landing-page/hero/" title="Hero"></ComponentsLink>
            <ComponentsLink href="https://www.telerik.com/design-system/docs/ui-templates/building-blocks/landing-page/incentives/" title="Incentives"></ComponentsLink>
            <ComponentsLink href="https://www.telerik.com/design-system/docs/ui-templates/building-blocks/landing-page/locations/" title="Locations"></ComponentsLink>
            <ComponentsLink href="https://www.telerik.com/design-system/docs/ui-templates/building-blocks/landing-page/newsletter/" title="Newsletter"></ComponentsLink>
            <ComponentsLink href="https://www.telerik.com/design-system/docs/ui-templates/building-blocks/landing-page/partners/" title="Partners"></ComponentsLink>
            <ComponentsLink href="https://www.telerik.com/design-system/docs/ui-templates/building-blocks/landing-page/pricing-section/" title="Pricing Section"></ComponentsLink>
            <ComponentsLink href="https://www.telerik.com/design-system/docs/ui-templates/building-blocks/landing-page/stats/" title="Stats"></ComponentsLink>
            <ComponentsLink href="https://www.telerik.com/design-system/docs/ui-templates/building-blocks/landing-page/testimonials/" title="Testimonials"></ComponentsLink>
        </ComponentsLinkGroup>
        <ComponentsLinkGroup>
            <ComponentsLink title="Dashboard Blocks"></ComponentsLink>
            <ComponentsLink href="https://www.telerik.com/design-system/docs/ui-templates/building-blocks/dashboard/compact-card/" title="Compact Card"></ComponentsLink>
            <ComponentsLink href="https://www.telerik.com/design-system/docs/ui-templates/building-blocks/dashboard/dashboard-card/" title="Dashboard Card"></ComponentsLink>
            <ComponentsLink href="https://www.telerik.com/design-system/docs/ui-templates/building-blocks/dashboard/top-navbar/" title="Top Navbar"></ComponentsLink>
             
            <ComponentsLink title=""></ComponentsLink>
            <ComponentsLink title=""></ComponentsLink>
            <ComponentsLink title=""></ComponentsLink>
        </ComponentsLinkGroup>
        <ComponentsLinkGroup>
            <ComponentsLink title="Listing Page Blocks"></ComponentsLink>
            <ComponentsLink href="https://www.telerik.com/design-system/docs/ui-templates/building-blocks/listing-page/filter/" title="Filter"></ComponentsLink>
            <ComponentsLink href="https://www.telerik.com/design-system/docs/ui-templates/building-blocks/listing-page/flyout-navigation/" title="Flyout Navigation"></ComponentsLink>
            <ComponentsLink href="https://www.telerik.com/design-system/docs/ui-templates/building-blocks/listing-page/login/" title="Login"></ComponentsLink>
            <ComponentsLink href="https://www.telerik.com/design-system/docs/ui-templates/building-blocks/listing-page/product-card/" title="Product Card"></ComponentsLink>
            <ComponentsLink href="https://www.telerik.com/design-system/docs/ui-templates/building-blocks/listing-page/sign-up/" title="Sign Up"></ComponentsLink>
            <ComponentsLink href="https://www.telerik.com/design-system/docs/ui-templates/building-blocks/listing-page/sorting/" title="Sorting"></ComponentsLink>
            
            <ComponentsLink title=""></ComponentsLink>
            <ComponentsLink title=""></ComponentsLink>
            <ComponentsLink title=""></ComponentsLink>
        </ComponentsLinkGroup>
        <ComponentsLinkGroup>
            <ComponentsLink title="AI Blocks"></ComponentsLink>
            <ComponentsLink href="https://www.telerik.com/design-system/docs/ui-templates/building-blocks/ai/ai-powered-editor/" title="AI-Powered Editor"></ComponentsLink>
            <ComponentsLink href="https://www.telerik.com/design-system/docs/ui-templates/building-blocks/ai/conversational-sources/" title="Conversational Sources"></ComponentsLink>
            <ComponentsLink href="https://www.telerik.com/design-system/docs/ui-templates/building-blocks/ai/welcome-ai/" title="Welcome AI"></ComponentsLink>
        </ComponentsLinkGroup>
      </ComponentsTabList>
    </ComponentsTabStripTab>
    <ComponentsTabStripTab title="Templates">
      <ComponentsTabList>
        <ComponentsLinkGroup>
            <ComponentsLink title="Landing Pages"></ComponentsLink>
            <ComponentsLink href="https://www.telerik.com/design-system/docs/ui-templates/templates/automotive-industry/" title="Automotive Industry"></ComponentsLink>
            <ComponentsLink href="https://www.telerik.com/design-system/docs/ui-templates/templates/international-bank/" title="International Bank"></ComponentsLink>
            <ComponentsLink href="https://www.telerik.com/design-system/docs/ui-templates/templates/saas-product/" title="SaaS Product"></ComponentsLink>
            <ComponentsLink href="https://www.telerik.com/design-system/docs/ui-templates/templates/travel/" title="Travel"></ComponentsLink>
        </ComponentsLinkGroup>
        <ComponentsLinkGroup>
            <ComponentsLink title="Listing Pages"></ComponentsLink>
            <ComponentsLink href="https://www.telerik.com/design-system/docs/ui-templates/templates/fashion-catalog/" title="Fashion Catalogue"></ComponentsLink>
            <ComponentsLink href="https://www.telerik.com/design-system/docs/ui-templates/templates/real-estate/" title="Real Estate"></ComponentsLink>
        </ComponentsLinkGroup>
        <ComponentsLinkGroup>
            <ComponentsLink title="Dashboards"></ComponentsLink>
            <ComponentsLink href="https://www.telerik.com/design-system/docs/ui-templates/templates/ai-usage-monitoring/" title="AI Usage Monitoring"></ComponentsLink>
            <ComponentsLink href="https://www.telerik.com/design-system/docs/ui-templates/templates/fintech-dashboard/" title="Fintech Dashboard"></ComponentsLink>
            <ComponentsLink href="https://www.telerik.com/design-system/docs/ui-templates/templates/healthcare-admin/" title="Healthcare Admin"></ComponentsLink>
            <ComponentsLink href="https://www.telerik.com/design-system/docs/ui-templates/templates/machine-manufacturing/" title="Machine Manufacturing"></ComponentsLink>
            <ComponentsLink href="https://www.telerik.com/design-system/docs/ui-templates/templates/project-tracker/" title="Project Tracker"></ComponentsLink>
            <ComponentsLink href="https://www.telerik.com/design-system/docs/ui-templates/templates/social-management/" title="Social Media Management"></ComponentsLink>
        </ComponentsLinkGroup>
      </ComponentsTabList>
    </ComponentsTabStripTab>
</ComponentsTabStrip>

<WebFrameworks title="Check out other framework examples and demos" hidden="React"></WebFrameworks>

</ComponentsWrapper>

## More KendoReact Resources

<MoreResources>
    <MoreResourcesWrapper type="cards">
        <MoreResourcesSection title="Getting Started" type="cards">
            <MoreResourcesCard title="Introduction to KendoReact" href="/getting-started" src="/kendo-react-ui/components/assets/bf11cc0753a5e419e851ff87ebf6c68b/introduction.svg"></MoreResourcesCard>
            <MoreResourcesCard title="Set up License Key" href="/my-license" src="/kendo-react-ui/components/assets/9e53627fb4c2b978dc56d407d2c77bbe/license-key.svg"></MoreResourcesCard>
            <MoreResourcesCard title="Video Onboarding" href="/getting-started/video-onboarding" src="/kendo-react-ui/components/assets/9f61d3ee1e389a537cd4e1f3720ed9fa/video.svg"></MoreResourcesCard>
            <MoreResourcesCard title="System Requirements" href="/installation/requirements" src="/kendo-react-ui/components/assets/9faeaa8dc474e6e8b2489b68e16c8124/first-steps.svg"></MoreResourcesCard>
        </MoreResourcesSection>
         <MoreResourcesSection title="Styling & Themes" type="cards">
            <MoreResourcesCard title="Customizing Themes" href="/styling/customizing" src="/kendo-react-ui/components/assets/f45a26158302304483346b05ccdd034e/customizing-themes.svg"></MoreResourcesCard>
            <MoreResourcesCard title="Icons" href="/styling/icons" src="/kendo-react-ui/components/assets/46179486faea526315c01f90e38ba49e/icons.svg"></MoreResourcesCard>
            <MoreResourcesCard title="Design Kits for Figma" href="https://www.telerik.com/design-system/docs/resources/figma-ui-kits/" src="/kendo-react-ui/components/assets/bdd26445f08a5957564cb98374ed1bb7/figma-kits.svg"></MoreResourcesCard>
            <MoreResourcesCard title="Theme Builder" href="/styling/theme-builder" src="/kendo-react-ui/components/assets/747b258e03ed077add230decddb314cc/themebuilder.svg"></MoreResourcesCard>
        </MoreResourcesSection>
    </MoreResourcesWrapper>
    <MoreResourcesWrapper type="links">
       <MoreResourcesSection title="Project Setup" type="links">
            <MoreResourcesLink href="/installation/requirements" iscategory="true" title="System Requirements"></MoreResourcesLink>
            <MoreResourcesLink href="/installation/development-builds" iscategory="true" title="Obtaining Development Builds"></MoreResourcesLink>
                <MoreResourcesLink href="/getting-started" iscategory="true" title="Using with Next.js"></MoreResourcesLink>
                <MoreResourcesLink href="/getting-started" iscategory="true" title="Using with Astro"></MoreResourcesLink>
                <MoreResourcesLink href="/getting-started" iscategory="true" title="Using with Server Side Rendering"></MoreResourcesLink>
            <MoreResourcesLink href="/installation/vscode-extensions" iscategory="true" title="VS Code Extension"></MoreResourcesLink>
            <MoreResourcesLink href="https://www.telerik.com/kendo-react-ui/components/changelogs/ui-for-react" iscategory="true" title="KendoReact Changelog"></MoreResourcesLink>
        </MoreResourcesSection>
        <MoreResourcesSection title="Migration Guide" type="links">
            <MoreResourcesLink title="Updating KendReact" href="/migration/up-to-date" iscategory="true"></MoreResourcesLink>
            <MoreResourcesLink title="Assisted Migration Tooling" href="/migration/assisted-migration" iscategory="true"></MoreResourcesLink>
        </MoreResourcesSection>
         <MoreResourcesSection title="Common Features" type="links">
            <MoreResourcesLink href="/ai-tools/web-mcp"  iscategory="true" title="WebMCP Browser Extension"></MoreResourcesLink>
            <MoreResourcesLink href="/ai-tools/agentic-ui-generator/getting-started" iscategory="true" title="Agentic UI Generator" tag="updated" release_tag="Q3 2026"></MoreResourcesLink>
            <MoreResourcesLink tier="premium" href="/ai-components" iscategory="true" title="AI Components & Features"></MoreResourcesLink>
            <MoreResourcesLink href="/accessibility" iscategory="true" title="Accessibility"></MoreResourcesLink>
            <MoreResourcesLink href="/intl" iscategory="true" title="Globalization"></MoreResourcesLink>
            <MoreResourcesLink href="/intl/i18n" title="Internationalization"></MoreResourcesLink>
            <MoreResourcesLink href="/intl/l10n" title="Message Translation"></MoreResourcesLink>
            <MoreResourcesLink href="/data-binding" iscategory="true" title="Data Binding"></MoreResourcesLink>
            <MoreResourcesLink href="/integration" iscategory="true" title="Third-Party Integration"></MoreResourcesLink>
            <MoreResourcesLink href="/cloud" iscategory="true" title="Cloud Integration"></MoreResourcesLink>
            <MoreResourcesLink href="/security/overview" iscategory="true" title="Security"></MoreResourcesLink>
        </MoreResourcesSection>
        <MoreResourcesSection title="WebMCP Enabled Apps" type="links">
            <MoreResourcesLink title="WebMCP Operations Hub" href="https://demos.telerik.com/kendo-react-ui/ai-tools/webmcp/operations-hub?theme=meridian-main-dark" iscategory="true"></MoreResourcesLink>
            <MoreResourcesLink title="Zero Click Dashboard" href="https://demos.telerik.com/kendo-react-ui/ai-tools/webmcp/zero-click-dashboard?theme=meridian-main-dark" iscategory="true"></MoreResourcesLink>
        </MoreResourcesSection>
        <MoreResourcesSection title="Learning" type="links">
            <MoreResourcesLink title="Knowledge Base" href="/knowledge-base" iscategory="true"></MoreResourcesLink>
            <MoreResourcesLink title="Sample Applications" href="/sample-applications" iscategory="true"></MoreResourcesLink>
        </MoreResourcesSection>
    </MoreResourcesWrapper>

</MoreResources>

<ContactSupportLanding src="/kendo-react-ui/components/assets/d476ec84bf7fc137a8e1e750b6b779cc/mascot-react-contact-support.svg"></ContactSupportLanding>
