Udon – Typescript React Bootstrap Premium Admin Dashboard Template

React Swiper JS :

React Swiper is a modern, feature-packed carousel component for React, offering smooth transitions, touch support, and advanced features like autoplay and lazy loading. It’s a flexible, performance-driven alternative to traditional carousels like Bootstrap.

1. You need to add these files to make it work.

React
Data

Type	URL
Plugin Link	https://swiperjs.com/get-started/

React-Apexcharts

React-ApexCharts is a React wrapper for the popular ApexCharts library, enabling the easy creation of interactive, responsive charts. It offers a wide range of chart types and customization options with seamless React integration.

1. You need to add these files to make react-apexchart work.

React
Data


      export const BasicLineSeries = [{
        name: "Desktops",
        data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
      }];

      export const BasicLineOptions = {
        chart: {
          height: 320,
          type: 'line',
          zoom: {
            enabled: false
          }
        },
        colors: ['#8b7eff'],
        dataLabels: {
          enabled: false
        },
        stroke: {
          curve: 'straight',
          width: 3,
        },
        grid: {
          borderColor: '#f2f5f7',
        },
        title: {
          text: 'Orders by Month',
          align: 'left',
          style: {
            fontSize: '13px',
            fontWeight: 'bold',
            color: '#8c9097'
          },
        },
        xaxis: {
          categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
          labels: {
            show: true,
            style: {
              colors: "#8c9097",
              fontSize: '11px',
              fontWeight: 600,
              cssClass: 'apexcharts-xaxis-label',
            },
          }
        },
        yaxis: {
          labels: {
            show: true,
            style: {
              colors: "#8c9097",
              fontSize: '11px',
              fontWeight: 600,
              cssClass: 'apexcharts-yaxis-label',
            },
          }
        },
      }

Type	URL
Plugin Link	https://apexcharts.com/react-chart-demos/

React Suneditor :

React SunEditor is a lightweight, customizable editor for React, providing rich text editing features. It supports various formats, plugins, and is highly extensible for smooth integration into React applications.

1. You need to add these files to make basic react-suneditor work.

React
Data

Type	URL
Plugin Link	https://www.npmjs.com/package/suneditor-react

React DatePicker

React Datepicker is a React wrapper for the Datepicker date picker library, offering a lightweight and customizable solution for selecting dates and times. It provides smooth integration, supports various date formats, and includes features like range selection, time picking, and more.

1. You need to add these files to make basic react-datepicker work.

React

Type	URL
Plugin Link	https://www.npmjs.com/package/react-datepicker

React Select :

React Select is a flexible, customizable dropdown/select input component for React, offering features like multi-select, search, and async options. It provides an intuitive, user-friendly interface with advanced styling and accessibility support.

1. You need to add these files to make basic react-select work.

React
Data

interface Selectoption {
        value: string;
        label: string;
    }
    export const Selectoption1: Selectoption[] = [
        { value: "Selection-1", label: "Selection-1" },
        { value: "Selection-2", label: "Selection-2" },
        { value: "Selection-3", label: "Selection-3" },
        { value: "Selection-4", label: "Selection-4" },
        { value: "Selection-5", label: "Selection-5" }
    ];

Type	URL
Plugin Link	https://www.npmjs.com/package/react-select

Basic Table :

React Basic tables are simple, customizable table components for displaying structured data in a clean and responsive layout

1. You need to add these files to make basic default table work.

React
Data


interface Basic {
    id:number;
    name:string;
    date:string;
    number:string;
    status:string;
    color:string;
}
export const Basictable: Basic[] = [
    { id: 1, name: "Mark", date: "21,Dec 2021", number: "+1234-12340", status: "Completed", color: "primary" },
    { id: 2, name: "Monika", date: "29,April 2024", number: "+1523-12459", status: "Failed", color: "warning" },
    { id: 3, name: "Madina", date: "30,Nov 2024", number: "+1982-16234", status: "Successful", color: "success" },
    { id: 4, name: "Bhamako", date: "18,Mar 2024", number: "+1526-10729", status: "Pending", color: "secondary" },
]

React Toastify :

React Toastify is a lightweight and easy-to-use notification library for React that allows you to display customizable, non-blocking toast messages. It supports various notification types, automatic dismissal, and seamless integration, enhancing the user experience with minimal setup.

1. You need to add these files to make react toastify work.

React

Type	URL
Plugin Link	https://www.npmjs.com/package/react-toastify

React Ratings(MUI) :

React Material-UI Ratings is a component that integrates Material-UI's design system to create customizable, interactive rating systems in React applications. It allows users to easily select a rating through stars or other symbols, with built-in support for customization, accessibility, and styling.

1. You need to add these files to make react rating work.

React

Type	URL
Plugin Link	https://mui.com/material-ui/react-rating/

Alerts :

React Bootstrap Alerts are pre-styled, customizable alert components that integrate Bootstrap's alert system with React. They provide an easy way to display important messages or notifications, with built-in support for different styles (success, error, info, etc.), dismissible functionality, and seamless React integration.

1. You need to add these files to make alerts work.

React
Data

Buttons :

React Bootstrap Buttons are pre-styled, responsive button components that follow React Bootstrap’s design system, offering various styles, sizes, and colors. They provide an easy-to-use and customizable solution for creating interactive buttons in React applications, with support for icons, loading states, and more.

1. You need to add these files to make buttons work.

React
Data

Badges :

React Bootstrap Badges are small, customizable components used to display labels, notifications, or counters within your React application. They integrate seamlessly with React Bootstrap’s design system and support various styles, colors, and positions, making them ideal for highlighting important information or adding context to UI elements like buttons, links, or navigation items.

1. You need to add these files to make badges work.

React
Data

Button Group :

React Bootstrap Button Group is a component that allows you to group multiple buttons together, providing a clean, unified look and facilitating interactions like toggling or switching between options. It integrates seamlessly with React Bootstrap's button styles and offers customization options for size, alignment, and behavior within React applications.

1. You need to add these files to make button group work.

React

Cards :

React Bootstrap Cards are versatile, customizable components for displaying content in a flexible, structured layout. They integrate Bootstrap’s card system with React, allowing you to create various types of content containers with options for images, headers, footers, and more, making them ideal for building rich, responsive UI elements.

1. You need to add these files to make cards work.

React

Breadcrumb :

React Bootstrap Breadcrumb is a navigation component that displays a series of links to help users understand their location within a hierarchical structure. It seamlessly integrates with React Bootstrap’s breadcrumb styling, offering customizable options for separators, active links, and responsive behavior in React applications.

1. You need to add these files to make breadcrumb work.

React

Dropdown :

React Bootstrap Dropdown is a component that provides a simple way to create dropdown menus in React applications, following React Bootstrap's design conventions. It supports various options like single or multi-level menus, alignment, and customization of triggers (e.g., buttons or links), making it easy to build responsive, interactive dropdowns with minimal effort.

1. You need to add these files to make dropdown work.

React
Data

Tooltips :

React Bootstrap Tooltips are small, customizable pop-up elements that provide additional information when users hover over or focus on an element. Built on React Bootstrap’s tooltip system, they offer easy integration in React applications, supporting various customization options like positioning, trigger events, and animations for a better user experience.

1. You need to add these files to make tooltips work.

React
Data


interface direction {
	id: number
	text: string
}
export const Tooltipdirtooltip: direction[] = [
	{ id: 1, text: "top" },
	{ id: 2, text: "right" },
	{ id: 3, text: "bottom" },
	{ id: 4, text: "left" }
];

Popovers :

React Bootstrap Popovers are interactive components that display additional content or information when users click or hover over an element. Built on React Bootstrap’s popover system, they offer easy integration in React applications, with support for customizable content, placement, and triggers, allowing you to enhance the user interface with rich, contextual overlays.

1. You need to add these files to make popovers work.

React
Data

Progress :

React Bootstrap Progress is a component that allows you to display progress bars in React applications, indicating the completion status of tasks or operations. It integrates seamlessly with React Bootstrap’s progress bar styles, supporting features like custom labels, striped animations, and varying bar colors for easy customization and responsiveness.

1. You need to add these files to make Progress work.

React
Data

List Group :

React Bootstrap ListGroup is a component for creating lists of items with consistent styling and behavior, using Bootstrap's list group system. It supports features like custom item content, active states, badges, and links, making it easy to build interactive and organized lists in React applications with full customization options.

1. You need to add these files to make List Group work.

React
Data

Accordions :

React Bootstrap Accordion is a component that allows you to display collapsible content panels in a stack, ideal for organizing large amounts of content in a compact, interactive layout. It integrates with React Bootstrap’s accordion system, supporting features like multiple or single panel expansion, custom styling, and smooth animations, making it easy to create dynamic, space-efficient UIs in React applications.

1. You need to add these files to make accordions work.

React
Data

Carousel :

React Bootstrap Carousel is a component for creating responsive, interactive image sliders or carousels in React applications. It integrates seamlessly with React Bootstrap’s carousel system, offering features like slide transitions, controls, indicators, and automatic cycling, allowing you to display a series of content in an engaging and user-friendly way.

1. You need to add these files to make carousel work.

React
Data