REUSABLE FILES EXAMPLES

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.
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.
    
    
    
    
    
        export const Lineseries = [{
            name: "Desktops",
            data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
        }]
      export const Lineoptions: any = {
        chart: {
            height: 320,
            type: 'line',
            toolbar: {
                show: false,
            },
            zoom: {
                enabled: false
            },
            events: {
                mounted: (chart: any) => {
                    chart.windowResizeHandler();
                }
            },
        },
        colors: ['#845adf'],
        dataLabels: {
            enabled: false
        },
        stroke: {
            curve: 'straight',
            width: 3,
        },
        grid: {
            borderColor: '#f2f5f7',
        },
        title: {
            text: 'Product Trends 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 WYSIWYG (What You See Is What You Get) 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.
Type URL
Plugin Link https://www.npmjs.com/package/suneditor-react
React FlatPicker
React Flatpickr is a React wrapper for the Flatpickr 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-flatpicker work.
Type URL
Plugin Link https://www.npmjs.com/package/react-flatpickr
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.
    
    
    
    
    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
React GridJs :
React Grid.js is a React wrapper for the Grid.js table library, enabling the creation of interactive, customizable, and responsive data tables. It supports features like sorting, filtering, pagination, and inline editing, with a focus on performance and easy integration into React projects.
1. You need to add below files to make basic gridjs table work.
    
    
    
    
    
    export const Data = [
        ["24-10-2022 12:47", "john", "john123@gmail.com", "#12012", "$1799", "1", "$1799"],
        ["12-09-2022 04:24", "mark", "markzenner23@gmail.com", "#12013", "$2479", "2", "$4958"],
        ["18-11-2022 18:43", "eoin", "eoin1992@gmail.com", "#12014", "$769", "1", "$769"],
        ["10-09-2022 10:35", "sarahcdd", "sarahcdd129@gmail.com", "#12015", "$1299", "3", "$3997"],
        ["27-10-2022 09:55", "afshin", "afshin@example.com", "#12016", "$1449", "1", "$1449"]
    ];
    type GridData = Array<[string, string, string, string, string, string, string]>;
    export const Data1 = (): Promise<GridData> => {
        return new Promise(resolve => {
            setTimeout(() =>
                resolve([
                    ["24-10-2022 12:47", "john", "john123@gmail.com", "#12012", "$1799", "1", "$1799"],
                    ["12-09-2022 04:24", "mark", "markzenner23@gmail.com", "#12013", "$2479", "2", "$4958"],
                    ["18-11-2022 18:43", "eoin", "eoin1992@gmail.com", "#12014", "$769", "1", "$769"],
                    ["10-09-2022 10:35", "sarahcdd", "sarahcdd129@gmail.com", "#12015", "$1299", "3", "$3997"],
                    ["27-10-2022 09:55", "afshin", "afshin@example.com", "#12016", "$1449", "1", "$1449"]
                ]), 2000);
        });
    };
Type URL
Plugin Link https://www.npmjs.com/package/gridjs-react
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.
    
    
    
    
    
    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 2023", number:"+1234-12340", status:"Completed", color:"primary"},
        {id:2, name:"Monika", date:"29,April 2023", number:"+1523-12459", status:"Failed", color:"secondary"},
        {id:3, name:"Madina", date:"30,Nov 2023", number:"+1982-16234", status:"Successful", color:"success"},
        {id:4, name:"Bhamako", date:"18,Mar 2023", number:"+1526-10729", status:"Pending", color:"warning"},
    ]
React Data Tables :
React DataTables is a flexible, feature-rich table component for React that simplifies the process of displaying and managing large datasets. It includes built-in support for sorting, pagination, search, and filtering, and can be easily customized for a seamless integration into React applications.
1. You need to add these files to make React data-table work.
Type URL
Plugin Link https://www.npmjs.com/package/react-table
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.
Type URL
Plugin Link https://mui.com/material-ui/react-rating/
Alerts :
Preline Alerts are pre-styled, customizable alert components built with Tailwind CSS utility classes and provided by the Preline UI library. They make it easy to display important messages or notifications, offering built-in support for various styles (success, error, info, etc.), dismissible functionality, and seamless integration with React.
1. You need to add these files to make alerts work.
Buttons :
Preline Buttons are pre-styled, responsive button components built with Tailwind CSS utility classes. They offer a customizable solution for creating interactive buttons in React applications, supporting various styles, sizes, colors, and loading states. Preline Buttons also integrate easily with React,providing options for icons, hover effects, and more.
1. You need to add these files to make buttons work.
Badges :
Preline Badges are small, customizable components built with Tailwind CSS utility classes, designed to display labels, notifications, or counters in your React application. They support various styles, colors, and positions, making them perfect 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.
Cards :
Preline Cards are versatile, customizable components built with Tailwind CSS, designed for displaying content in a flexible, structured layout. They offer options for images, headers, footers, and more, making them perfect for creating rich, responsive UI elements in your React application. Preline Cards integrate seamlessly with React and provide an easy way to organize and present content in a visually appealing way.
1. You need to add these files to make cards work.
Breadcrumb :
Preline Breadcrumb is a navigation component built with Tailwind CSS, designed to display a series of links that help users understand their location within a hierarchical structure. It offers customizable options for separators, active links, and responsive behavior, making it an ideal choice for creating intuitive and accessible navigation in React applications.
1. You need to add these files to make breadcrumb work.
Dropdown :
Preline Dropdown is a component built with Tailwind CSS that provides an easy way to create dropdown menus in React applications. It supports single or multi-level menus, alignment options, and customizable triggers (e.g., buttons or links), making it simple to build responsive, interactive dropdowns with minimal effort while maintaining a clean and modern design.
1. You need to add these files to make dropdown work.
Tooltips :
Preline Tooltips and Popovers are small, customizable pop-up elements built with Tailwind CSS, providing additional information when users hover over or focus on an element. Both can be integrated easily into React applications with support for various customization options, including positioning, trigger events, and animations. For Popovers, the --trigger: click property is used, making it possible to reuse the same component for both Tooltips and Popovers for a smoother, more efficient implementation.
1. You need to add these files to make tooltipss work.
Popover:
    
    
    
    
    
    interface colortooltip2 {
        id:number;
        color:string;
        text:string;
        class:string;
        class1:string;
        class2:string;
    }
    export const colortooltip:colortooltip2[] = [
        {id:1, color:"primary-full", text:"Primary Tooltip", class:"[--placement:top]", class1:"primary", class2:"white"},
        {id:2, color:"secondary-full", text:"Secondary Tooltip", class:"[--placement:right]", class1:"secondary", class2:"white"},
        {id:3, color:"warning-full", text:"Warning Tooltip", class:"[--placement:bottom]", class1:"warning", class2:"white"},
        {id:4, color:"info-full", text:"Info Tooltip", class:"[--placement:left]", class1:"info", class2:"white"},
        {id:5, color:"success-full", text:"Success Tooltip", class:"[--placement:top]", class1:"success", class2:"white"},
        {id:6, color:"danger-full", text:"Danger Tooltip", class:"[--placement:bottom]", class1:"danger", class2:"white"},
        {id:7, color:"light", text:"Light Tooltip", class:"[--placement:bottom]", class1:"light", class2:"black"},
        {id:8, color:"dark", text:"Dark Tooltip", class:"[--placement:bottom]", class1:"black", class2:"white"},
    ]
Toast:
Preline Toast is a component built with Tailwind CSS for displaying lightweight, non-blocking notifications or messages in React applications. It offers features like auto-dismiss, customizable timing, and various styling options for success, error, or info messages, making it simple to provide responsive and visually appealing feedback to users in a clean and unobtrusive way.
1. You need to add these files to make toast work.
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 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.