├── next.config.mjs ├── src ├── app │ ├── favicon.ico │ ├── not-found.tsx │ └── (pages) │ │ └── components │ │ ├── layout.tsx │ │ └── page.tsx ├── utils │ ├── cmp-url.ts │ ├── count-components.ts │ ├── theme-providers.tsx │ └── zust-store.ts ├── dev-components-txt │ ├── navigation │ │ ├── dev-menu-bar │ │ │ ├── dev-menu-bar-jsx.txt │ │ │ └── dev-menu-bar-usage.txt │ │ └── responsive-navbar │ │ │ ├── responsive-navbar-jsx.txt │ │ │ └── responsive-navbar-tsx.txt │ ├── emoji-pickers │ │ ├── dev-emoji-picker-v1 │ │ │ ├── dev-emoji-picker-v1-usage.txt │ │ │ ├── dev-emoji-picker-v1-jsx.txt │ │ │ └── dev-emoji-picker-v1-tsx.txt │ │ ├── dev-emoji-picker-v3 │ │ │ ├── dev-emoji-picker-v3-jsx.txt │ │ │ ├── dev-emoji-picker-v3-tsx.txt │ │ │ └── dev-emoji-picker-v3-usage.txt │ │ └── dev-emoji-picker-v2 │ │ │ └── dev-emoji-picker-v2-usage.txt │ ├── tooltips │ │ ├── dev-tooltip-v1 │ │ │ ├── dev-tooltip-v1-usage.txt │ │ │ └── dev-tooltip-v1-jsx.txt │ │ └── dev-tooltip-v2 │ │ │ ├── dev-tooltip-v2-usage.txt │ │ │ ├── dev-tooltip-v2-jsx.txt │ │ │ └── dev-tooltip-v2-tsx.txt │ ├── date │ │ ├── dev-calendar │ │ │ └── dev-calendar-usage.txt │ │ └── dev-date-picker │ │ │ └── dev-date-picker-usage.txt │ ├── miscellaneous │ │ ├── responsive-grid-layout │ │ │ └── responsive-grid-layout-usage.txt │ │ ├── resizable-panels │ │ │ └── resizable-panels-usage.txt │ │ ├── react-resizable-panels │ │ │ ├── react-resizable-panels-usage.txt │ │ │ ├── react-resizable-panels-jsx.txt │ │ │ └── react-resizable-panels-tsx.txt │ │ ├── react-share │ │ │ └── react-share-usage.txt │ │ ├── dev-chip-input │ │ │ └── dev-chip-input-usage.txt │ │ └── react-movable │ │ │ ├── react-movable-usage.txt │ │ │ ├── react-movable-jsx.txt │ │ │ └── react-movable-tsx.txt │ ├── pagination │ │ ├── dev-pagination-v1 │ │ │ └── dev-pagination-v1-usage.txt │ │ └── dev-pagination-v2 │ │ │ ├── dev-pagination-v2-usage.txt │ │ │ └── dev-pagination-v2-jsx.txt │ ├── visual-codes │ │ └── dev-qrcode │ │ │ └── dev-qrcode-usage.txt │ ├── inputs │ │ ├── dev-password-input │ │ │ └── dev-password-input-usage.txt │ │ └── dev-input-v2 │ │ │ └── dev-input-v2-usage.txt │ ├── dropdowns │ │ ├── dev-dropdown-v1 │ │ │ ├── dev-dropdown-v1-usage.txt │ │ │ └── dev-dropdown-v1-jsx.txt │ │ └── dev-dropdown-v2 │ │ │ ├── dev-dropdown-v2-usage.txt │ │ │ ├── dev-dropdown-v2-jsx.txt │ │ │ └── dev-dropdown-v2-tsx.txt │ ├── carousels │ │ ├── brand-carousel │ │ │ ├── brand-carousel-usage.txt │ │ │ ├── brand-carousel-jsx.txt │ │ │ └── brand-carousel-tsx.txt │ │ ├── dev-carousel-v1 │ │ │ └── dev-carousel-v1-usage.txt │ │ └── product-gallery │ │ │ └── product-gallery-usage.txt │ ├── color-pickers │ │ ├── dev-color-picker-v3 │ │ │ └── dev-color-picker-v3-usage.txt │ │ ├── dev-color-picker-v1 │ │ │ └── dev-color-picker-v1-usage.txt │ │ └── dev-color-picker-v2 │ │ │ ├── dev-color-picker-v2-usage.txt │ │ │ └── dev-color-picker-v2-jsx.txt │ ├── toggles │ │ ├── dev-toggle-v1 │ │ │ ├── dev-toggle-v1-usage.txt │ │ │ └── dev-toggle-v1-jsx.txt │ │ └── dev-toggle-v2 │ │ │ └── dev-toggle-v2-usage.txt │ ├── range-sliders │ │ ├── dev-range-slider-v2 │ │ │ ├── dev-range-slider-v2-usage.txt │ │ │ ├── dev-range-slider-v2-jsx.txt │ │ │ └── dev-range-slider-v2-tsx.txt │ │ └── dev-range-slider-v1 │ │ │ ├── dev-range-slider-v1-usage.txt │ │ │ ├── dev-range-slider-v1-jsx.txt │ │ │ └── dev-range-slider-v1-tsx.txt │ ├── popovers │ │ ├── dev-popover-v1 │ │ │ ├── dev-popover-v1-usage.txt │ │ │ └── dev-popover-v1-jsx.txt │ │ └── dev-popover-v2 │ │ │ ├── dev-popover-v2-usage.txt │ │ │ ├── dev-popover-v2-jsx.txt │ │ │ └── dev-popover-v2-tsx.txt │ ├── radios │ │ └── dev-radio-v1 │ │ │ └── dev-radio-v1-usage.txt │ ├── checkboxes │ │ ├── dev-checkbox-v1 │ │ │ ├── dev-checkbox-v1-usage.txt │ │ │ ├── dev-checkbox-v1-jsx.txt │ │ │ └── dev-checkbox-v1-tsx.txt │ │ └── dev-checkbox-v2 │ │ │ ├── dev-checkbox-v2-usage.txt │ │ │ ├── dev-checkbox-v2-jsx.txt │ │ │ └── dev-checkbox-v2-tsx.txt │ ├── tabs │ │ ├── dev-tab-v1 │ │ │ ├── dev-tab-v1-usage.txt │ │ │ ├── dev-tab-v1-jsx.txt │ │ │ └── dev-tab-v1-tsx.txt │ │ ├── dev-tab-v2 │ │ │ ├── dev-tab-v2-usage.txt │ │ │ ├── dev-tab-v2-jsx.txt │ │ │ └── dev-tab-v2-tsx.txt │ │ └── dev-tab-v3 │ │ │ ├── dev-tab-v3-usage.txt │ │ │ ├── dev-tab-v3-jsx.txt │ │ │ └── dev-tab-v3-tsx.txt │ ├── selects │ │ ├── dev-select-v1 │ │ │ └── dev-select-v1-usage.txt │ │ ├── dev-select-v2 │ │ │ ├── dev-select-v2-usage.txt │ │ │ ├── dev-select-v2-jsx.txt │ │ │ └── dev-select-v2-tsx.txt │ │ └── dev-select-v3 │ │ │ └── dev-select-v3-usage.txt │ ├── uploader │ │ └── dev-file-uploader │ │ │ └── dev-file-uploader-usage.txt │ ├── clipboards │ │ └── dev-clipboard-v1 │ │ │ ├── dev-clipboard-v1-usage.txt │ │ │ ├── dev-clipboard-v1-jsx.txt │ │ │ └── dev-clipboard-v1-tsx.txt │ ├── multiselect │ │ └── dev-multiselect-v1 │ │ │ └── dev-multiselect-v1-usage.txt │ ├── autocompletes │ │ ├── dev-autocomplete │ │ │ └── dev-autocomplete-usage.txt │ │ └── dev-autocomplete-v1 │ │ │ └── dev-autocomplete-v1-usage.txt │ ├── drawers │ │ └── dev-drawer-v1 │ │ │ └── dev-drawer-v1-usage.txt │ ├── accordions │ │ ├── dev-accordion-v2 │ │ │ ├── dev-accordion-v2-usage.txt │ │ │ └── dev-accordion-v2-jsx.txt │ │ └── dev-accordion-v1 │ │ │ └── dev-accordion-v1-usage.txt │ ├── modals │ │ ├── dev-modal-v1 │ │ │ └── dev-modal-v1-usage.txt │ │ └── dev-modal-v2 │ │ │ └── dev-modal-v2-usage.txt │ ├── rich-text-editor │ │ └── dev-rich-text-editor-v1 │ │ │ └── dev-rich-text-editor-v1-usage.txt │ └── tables │ │ └── dev-table │ │ └── dev-table-usage.txt └── components │ ├── ui │ ├── header-cmp │ │ ├── footer.tsx │ │ ├── toggle-hamburger.tsx │ │ └── drawer.tsx │ ├── loaders │ │ ├── componentInfoLdr.tsx │ │ ├── sidebar-ldr.tsx │ │ └── sidenav-ldr.tsx │ └── theme-switch.tsx │ ├── home-cmp │ ├── render-components.tsx │ └── component-card.tsx │ ├── components-cmp │ ├── copy-code.tsx │ └── side-navigation.tsx │ └── swatch │ └── color-popover.tsx ├── public ├── assets │ ├── logo.png │ ├── og-logo.png │ ├── cmp-icons │ │ ├── tab.png │ │ ├── date.png │ │ ├── form.png │ │ ├── input.png │ │ ├── modal.png │ │ ├── radio.png │ │ ├── table.png │ │ ├── toast.png │ │ ├── button.png │ │ ├── carousel.png │ │ ├── checkbox.png │ │ ├── drawer.png │ │ ├── dropdown.png │ │ ├── layout.png │ │ ├── navbar.png │ │ ├── popover.png │ │ ├── select.png │ │ ├── toggle.png │ │ ├── tooltip.png │ │ ├── uploader.png │ │ ├── accordion.png │ │ ├── clipboard.png │ │ ├── pagination.png │ │ ├── autocomplete.png │ │ ├── color-picker.png │ │ ├── emoji-picker.png │ │ ├── miscellaneous.png │ │ ├── multiselect.png │ │ ├── range-slider.png │ │ ├── tree-dropdown.png │ │ ├── visual-code.png │ │ └── rich-txt-editor.png │ ├── readme-banner.png │ ├── img-placeholder.png │ └── logo.svg └── dev-components │ ├── emoji-pickers │ ├── (dev-emoji-picker-v1) │ │ ├── page.tsx │ │ ├── dev-emoji-picker-v1.jsx │ │ └── dev-emoji-picker-v1.tsx │ └── (dev-emoji-picker-v2) │ │ └── page.tsx │ ├── tooltips │ ├── (dev-tooltip-v1) │ │ ├── page.tsx │ │ └── dev-tooltip-v1.jsx │ └── (dev-tooltip-v2) │ │ ├── page.tsx │ │ ├── dev-tooltip-v2.jsx │ │ └── dev-tooltip-v2.tsx │ ├── miscellaneous │ ├── (responsive-grid-layout) │ │ └── page.tsx │ ├── (react-resizable-panels) │ │ ├── page.tsx │ │ ├── react-resizable-panels.jsx │ │ └── react-resizable-panels.tsx │ ├── (react-share) │ │ └── page.tsx │ ├── (dev-chip-input) │ │ └── page.tsx │ └── (react-movable) │ │ ├── page.tsx │ │ ├── react-movable.jsx │ │ └── react-movable.tsx │ ├── date │ ├── (dev-calendar) │ │ └── page.tsx │ └── (dev-date-picker) │ │ └── page.tsx │ ├── pagination │ ├── (dev-pagination-v1) │ │ └── page.tsx │ └── (dev-pagination-v2) │ │ ├── page.tsx │ │ └── dev-pagination-v2.jsx │ ├── visual-codes │ └── (dev-qrcode) │ │ └── page.tsx │ ├── inputs │ ├── (dev-password-input) │ │ └── page.tsx │ └── (dev-input-v2) │ │ └── page.tsx │ ├── dropdowns │ ├── (dev-dropdown-v1) │ │ ├── page.tsx │ │ └── dev-dropdown-v1.jsx │ └── (dev-dropdown-v2) │ │ ├── page.tsx │ │ ├── dev-dropdown-v2.jsx │ │ └── dev-dropdown-v2.tsx │ ├── carousels │ ├── (brand-carousel) │ │ ├── page.tsx │ │ ├── brand-carousel.jsx │ │ └── brand-carousel.tsx │ ├── (dev-carousel-v1) │ │ └── page.tsx │ └── (product-gallery) │ │ └── page.tsx │ ├── color-pickers │ ├── (dev-color-picker-v3) │ │ └── page.tsx │ ├── (dev-color-picker-v1) │ │ └── page.tsx │ └── (dev-color-picker-v2) │ │ ├── page.tsx │ │ └── dev-color-picker-v2.jsx │ ├── toggles │ ├── (dev-toggle-v1) │ │ ├── page.tsx │ │ └── dev-toggle-v1.jsx │ └── (dev-toggle-v2) │ │ └── page.tsx │ ├── range-sliders │ ├── (dev-range-slider-v2) │ │ ├── page.tsx │ │ ├── dev-range-slider-v2.jsx │ │ └── dev-range-slider-v2.tsx │ └── (dev-range-slider-v1) │ │ ├── page.tsx │ │ ├── dev-range-slider-v1.jsx │ │ └── dev-range-slider-v1.tsx │ ├── popovers │ ├── (dev-popover-v1) │ │ ├── page.tsx │ │ └── dev-popover-v1.jsx │ └── (dev-popover-v2) │ │ ├── page.tsx │ │ ├── dev-popover-v2.jsx │ │ └── dev-popover-v2.tsx │ ├── radios │ └── (dev-radio-v1) │ │ └── page.tsx │ ├── checkboxes │ ├── (dev-checkbox-v1) │ │ ├── page.tsx │ │ ├── dev-checkbox-v1.jsx │ │ └── dev-checkbox-v1.tsx │ └── (dev-checkbox-v2) │ │ ├── page.tsx │ │ ├── dev-checkbox-v2.jsx │ │ └── dev-checkbox-v2.tsx │ ├── tabs │ ├── (dev-tab-v1) │ │ ├── page.tsx │ │ ├── dev-tab-v1.jsx │ │ └── dev-tab-v1.tsx │ ├── (dev-tab-v2) │ │ ├── page.tsx │ │ ├── dev-tab-v2.jsx │ │ └── dev-tab-v2.tsx │ └── (dev-tab-v3) │ │ ├── page.tsx │ │ ├── dev-tab-v3.jsx │ │ └── dev-tab-v3.tsx │ ├── selects │ ├── (dev-select-v1) │ │ ├── page.tsx │ │ └── dev-select-v1.jsx │ ├── (dev-select-v2) │ │ ├── page.tsx │ │ ├── dev-select-v2.jsx │ │ └── dev-select-v2.tsx │ └── (dev-select-v3) │ │ └── page.tsx │ ├── toast │ └── toast-info.ts │ ├── uploader │ └── (dev-file-uploader) │ │ └── page.tsx │ ├── clipboards │ └── (dev-clipboard-v1) │ │ ├── page.tsx │ │ ├── dev-clipboard-v1.jsx │ │ └── dev-clipboard-v1.tsx │ ├── multiselect │ └── (dev-multiselect-v1) │ │ ├── page.tsx │ │ └── dev-multiselect-v1.jsx │ ├── autocompletes │ └── (dev-autocomplete-v1) │ │ └── page.tsx │ ├── drawers │ └── (dev-drawer-v1) │ │ └── page.tsx │ ├── accordions │ ├── (dev-accordion-v2) │ │ ├── page.tsx │ │ └── dev-accordion-v2.jsx │ └── (dev-accordion-v1) │ │ └── page.tsx │ ├── modals │ └── (dev-modal-v1) │ │ └── page.tsx │ ├── rich-text-editor │ ├── (dev-rich-text-editor-v1) │ │ └── page.tsx │ └── rich-text-editor-info.ts │ ├── navigation │ └── (responsive-navbar) │ │ ├── responsive-navbar.jsx │ │ └── responsive-navbar.tsx │ └── tables │ └── (dev-table) │ └── page.tsx ├── postcss.config.mjs ├── .gitignore ├── tailwind.config.ts └── tsconfig.json /next.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = {}; 3 | 4 | export default nextConfig; 5 | -------------------------------------------------------------------------------- /src/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakVerse/componento-readymade-component-library/HEAD/src/app/favicon.ico -------------------------------------------------------------------------------- /public/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakVerse/componento-readymade-component-library/HEAD/public/assets/logo.png -------------------------------------------------------------------------------- /public/assets/og-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakVerse/componento-readymade-component-library/HEAD/public/assets/og-logo.png -------------------------------------------------------------------------------- /src/utils/cmp-url.ts: -------------------------------------------------------------------------------- 1 | const CmpUrl=(name:string)=>{ 2 | return name.toLowerCase().replace(/\s+/g, "-").trim() 3 | } 4 | export default CmpUrl -------------------------------------------------------------------------------- /public/assets/cmp-icons/tab.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakVerse/componento-readymade-component-library/HEAD/public/assets/cmp-icons/tab.png -------------------------------------------------------------------------------- /public/assets/readme-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakVerse/componento-readymade-component-library/HEAD/public/assets/readme-banner.png -------------------------------------------------------------------------------- /src/utils/count-components.ts: -------------------------------------------------------------------------------- 1 | function countComponents(obj : any[]) { 2 | return obj.length; 3 | } 4 | export default countComponents; 5 | -------------------------------------------------------------------------------- /public/assets/cmp-icons/date.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakVerse/componento-readymade-component-library/HEAD/public/assets/cmp-icons/date.png -------------------------------------------------------------------------------- /public/assets/cmp-icons/form.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakVerse/componento-readymade-component-library/HEAD/public/assets/cmp-icons/form.png -------------------------------------------------------------------------------- /public/assets/cmp-icons/input.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakVerse/componento-readymade-component-library/HEAD/public/assets/cmp-icons/input.png -------------------------------------------------------------------------------- /public/assets/cmp-icons/modal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakVerse/componento-readymade-component-library/HEAD/public/assets/cmp-icons/modal.png -------------------------------------------------------------------------------- /public/assets/cmp-icons/radio.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakVerse/componento-readymade-component-library/HEAD/public/assets/cmp-icons/radio.png -------------------------------------------------------------------------------- /public/assets/cmp-icons/table.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakVerse/componento-readymade-component-library/HEAD/public/assets/cmp-icons/table.png -------------------------------------------------------------------------------- /public/assets/cmp-icons/toast.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakVerse/componento-readymade-component-library/HEAD/public/assets/cmp-icons/toast.png -------------------------------------------------------------------------------- /public/assets/img-placeholder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakVerse/componento-readymade-component-library/HEAD/public/assets/img-placeholder.png -------------------------------------------------------------------------------- /public/assets/cmp-icons/button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakVerse/componento-readymade-component-library/HEAD/public/assets/cmp-icons/button.png -------------------------------------------------------------------------------- /public/assets/cmp-icons/carousel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakVerse/componento-readymade-component-library/HEAD/public/assets/cmp-icons/carousel.png -------------------------------------------------------------------------------- /public/assets/cmp-icons/checkbox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakVerse/componento-readymade-component-library/HEAD/public/assets/cmp-icons/checkbox.png -------------------------------------------------------------------------------- /public/assets/cmp-icons/drawer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakVerse/componento-readymade-component-library/HEAD/public/assets/cmp-icons/drawer.png -------------------------------------------------------------------------------- /public/assets/cmp-icons/dropdown.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakVerse/componento-readymade-component-library/HEAD/public/assets/cmp-icons/dropdown.png -------------------------------------------------------------------------------- /public/assets/cmp-icons/layout.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakVerse/componento-readymade-component-library/HEAD/public/assets/cmp-icons/layout.png -------------------------------------------------------------------------------- /public/assets/cmp-icons/navbar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakVerse/componento-readymade-component-library/HEAD/public/assets/cmp-icons/navbar.png -------------------------------------------------------------------------------- /public/assets/cmp-icons/popover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakVerse/componento-readymade-component-library/HEAD/public/assets/cmp-icons/popover.png -------------------------------------------------------------------------------- /public/assets/cmp-icons/select.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakVerse/componento-readymade-component-library/HEAD/public/assets/cmp-icons/select.png -------------------------------------------------------------------------------- /public/assets/cmp-icons/toggle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakVerse/componento-readymade-component-library/HEAD/public/assets/cmp-icons/toggle.png -------------------------------------------------------------------------------- /public/assets/cmp-icons/tooltip.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakVerse/componento-readymade-component-library/HEAD/public/assets/cmp-icons/tooltip.png -------------------------------------------------------------------------------- /public/assets/cmp-icons/uploader.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakVerse/componento-readymade-component-library/HEAD/public/assets/cmp-icons/uploader.png -------------------------------------------------------------------------------- /public/assets/cmp-icons/accordion.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakVerse/componento-readymade-component-library/HEAD/public/assets/cmp-icons/accordion.png -------------------------------------------------------------------------------- /public/assets/cmp-icons/clipboard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakVerse/componento-readymade-component-library/HEAD/public/assets/cmp-icons/clipboard.png -------------------------------------------------------------------------------- /public/assets/cmp-icons/pagination.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakVerse/componento-readymade-component-library/HEAD/public/assets/cmp-icons/pagination.png -------------------------------------------------------------------------------- /public/assets/cmp-icons/autocomplete.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakVerse/componento-readymade-component-library/HEAD/public/assets/cmp-icons/autocomplete.png -------------------------------------------------------------------------------- /public/assets/cmp-icons/color-picker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakVerse/componento-readymade-component-library/HEAD/public/assets/cmp-icons/color-picker.png -------------------------------------------------------------------------------- /public/assets/cmp-icons/emoji-picker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakVerse/componento-readymade-component-library/HEAD/public/assets/cmp-icons/emoji-picker.png -------------------------------------------------------------------------------- /public/assets/cmp-icons/miscellaneous.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakVerse/componento-readymade-component-library/HEAD/public/assets/cmp-icons/miscellaneous.png -------------------------------------------------------------------------------- /public/assets/cmp-icons/multiselect.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakVerse/componento-readymade-component-library/HEAD/public/assets/cmp-icons/multiselect.png -------------------------------------------------------------------------------- /public/assets/cmp-icons/range-slider.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakVerse/componento-readymade-component-library/HEAD/public/assets/cmp-icons/range-slider.png -------------------------------------------------------------------------------- /public/assets/cmp-icons/tree-dropdown.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakVerse/componento-readymade-component-library/HEAD/public/assets/cmp-icons/tree-dropdown.png -------------------------------------------------------------------------------- /public/assets/cmp-icons/visual-code.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakVerse/componento-readymade-component-library/HEAD/public/assets/cmp-icons/visual-code.png -------------------------------------------------------------------------------- /public/assets/cmp-icons/rich-txt-editor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MainakVerse/componento-readymade-component-library/HEAD/public/assets/cmp-icons/rich-txt-editor.png -------------------------------------------------------------------------------- /postcss.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('postcss-load-config').Config} */ 2 | const config = { 3 | plugins: { 4 | tailwindcss: {}, 5 | }, 6 | }; 7 | 8 | export default config; 9 | -------------------------------------------------------------------------------- /src/dev-components-txt/navigation/dev-menu-bar/dev-menu-bar-jsx.txt: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const DevMenuBar = () => { 4 | return ( 5 |
DevMenuBar
6 | ) 7 | } 8 | 9 | export default DevMenuBar -------------------------------------------------------------------------------- /public/dev-components/emoji-pickers/(dev-emoji-picker-v1)/page.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import React from "react"; 3 | import DevEmojiPickerV1 from "./dev-emoji-picker-v1"; 4 | 5 | const DevEmojiPickerV1Usage = () => { 6 | return console.log(e)} />; 7 | }; 8 | 9 | export default DevEmojiPickerV1Usage; 10 | -------------------------------------------------------------------------------- /src/components/ui/header-cmp/footer.tsx: -------------------------------------------------------------------------------- 1 | import Link from 'next/link' 2 | import React from 'react' 3 | 4 | 5 | 6 | const Footer = () => { 7 | return ( 8 |
© Supernova 2025. All rights reserved
9 | ) 10 | } 11 | 12 | export default Footer -------------------------------------------------------------------------------- /src/dev-components-txt/emoji-pickers/dev-emoji-picker-v1/dev-emoji-picker-v1-usage.txt: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import React from "react"; 3 | import DevEmojiPickerV1 from "./dev-emoji-picker-v1"; 4 | 5 | const DevEmojiPickerV1Usage = () => { 6 | return console.log(e)} />; 7 | }; 8 | 9 | export default DevEmojiPickerV1Usage; 10 | -------------------------------------------------------------------------------- /public/dev-components/tooltips/(dev-tooltip-v1)/page.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import DevTooltipV1 from "./dev-tooltip-v1"; 3 | 4 | const DevTooltipV1Usage = () => { 5 | return ( 6 | 7 |

Hover on me

8 | 9 | ); 10 | }; 11 | 12 | export default DevTooltipV1Usage; 13 | -------------------------------------------------------------------------------- /public/dev-components/miscellaneous/(responsive-grid-layout)/page.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ResponsiveGridLayout from './responsive-grid-layout' 3 | 4 | const ResponsiveGridLayoutUsage = () => { 5 | return ( 6 |
7 | 8 |
9 | ) 10 | } 11 | 12 | export default ResponsiveGridLayoutUsage 13 | 14 | -------------------------------------------------------------------------------- /public/dev-components/date/(dev-calendar)/page.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import React, { useState } from "react"; 3 | import DevCalendar from "./dev-calendar"; 4 | 5 | const DevCalendarUsage = () => { 6 | const [date, setDate] = useState(new Date()); 7 | return setDate(e as Date)} defaultValue={date} />; 8 | }; 9 | 10 | export default DevCalendarUsage; 11 | -------------------------------------------------------------------------------- /public/dev-components/pagination/(dev-pagination-v1)/page.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | import React from 'react' 3 | import DevPaginationV1 from './dev-pagination-v1' 4 | 5 | const DevPaginationV1Usage = () => { 6 | return ( 7 | console.log(`Page changed to ${page}`)} /> 8 | ) 9 | } 10 | 11 | export default DevPaginationV1Usage 12 | -------------------------------------------------------------------------------- /public/dev-components/tooltips/(dev-tooltip-v2)/page.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import DevTooltipV2 from "./dev-tooltip-v2"; 3 | 4 | const DevTooltipV2Usage = () => { 5 | return ( 6 | 7 |

Hover on me

8 | 9 | ); 10 | }; 11 | 12 | export default DevTooltipV2Usage; 13 | -------------------------------------------------------------------------------- /public/dev-components/date/(dev-date-picker)/page.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | import React from "react"; 3 | import DevDatePicker from "./dev-date-picker"; 4 | 5 | const DevDatePickerUsage = () => { 6 | return ( 7 | console.log(date)} 10 | /> 11 | ); 12 | }; 13 | 14 | export default DevDatePickerUsage; 15 | -------------------------------------------------------------------------------- /src/dev-components-txt/tooltips/dev-tooltip-v1/dev-tooltip-v1-usage.txt: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import DevTooltipV1 from "./dev-tooltip-v1"; 3 | 4 | const DevTooltipV1Usage = () => { 5 | return ( 6 | 7 |

Hover on me

8 | 9 | ); 10 | }; 11 | 12 | export default DevTooltipV1Usage; 13 | -------------------------------------------------------------------------------- /src/dev-components-txt/date/dev-calendar/dev-calendar-usage.txt: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import React, { useState } from "react"; 3 | import DevCalendar from "./dev-calendar"; 4 | 5 | const DevCalendarUsage = () => { 6 | const [date, setDate] = useState(new Date()); 7 | return setDate(e as Date)} defaultValue={date} />; 8 | }; 9 | 10 | export default DevCalendarUsage; 11 | -------------------------------------------------------------------------------- /src/dev-components-txt/miscellaneous/responsive-grid-layout/responsive-grid-layout-usage.txt: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ResponsiveGridLayout from './responsive-grid-layout' 3 | 4 | const ResponsiveGridLayoutUsage = () => { 5 | return ( 6 |
7 | 8 |
9 | ) 10 | } 11 | 12 | export default ResponsiveGridLayoutUsage 13 | 14 | -------------------------------------------------------------------------------- /src/dev-components-txt/tooltips/dev-tooltip-v2/dev-tooltip-v2-usage.txt: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import DevTooltipV2 from "./dev-tooltip-v2"; 3 | 4 | const DevTooltipV2Usage = () => { 5 | return ( 6 | 7 |

Hover on me

8 | 9 | ); 10 | }; 11 | 12 | export default DevTooltipV2Usage; 13 | -------------------------------------------------------------------------------- /public/dev-components/visual-codes/(dev-qrcode)/page.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | import React from "react"; 3 | import DevQrCode from "./dev-qrcode"; 4 | 5 | const DevQrCodeUsage = () => { 6 | return ( 7 | console.log(value)} 10 | /> 11 | ); 12 | }; 13 | 14 | export default DevQrCodeUsage; 15 | -------------------------------------------------------------------------------- /src/dev-components-txt/date/dev-date-picker/dev-date-picker-usage.txt: -------------------------------------------------------------------------------- 1 | 'use client' 2 | import React from "react"; 3 | import DevDatePicker from "./dev-date-picker"; 4 | 5 | const DevDatePickerUsage = () => { 6 | return ( 7 | console.log(date)} 10 | /> 11 | ); 12 | }; 13 | 14 | export default DevDatePickerUsage; 15 | -------------------------------------------------------------------------------- /src/dev-components-txt/pagination/dev-pagination-v1/dev-pagination-v1-usage.txt: -------------------------------------------------------------------------------- 1 | 'use client' 2 | import React from 'react' 3 | import DevPaginationV1 from './dev-pagination-v1' 4 | 5 | const DevPaginationV1Usage = () => { 6 | return ( 7 | console.log(`Page changed to ${page}`)} /> 8 | ) 9 | } 10 | 11 | export default DevPaginationV1Usage 12 | -------------------------------------------------------------------------------- /src/dev-components-txt/emoji-pickers/dev-emoji-picker-v3/dev-emoji-picker-v3-jsx.txt: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import React from "react"; 3 | import data from '@emoji-mart/data' 4 | import Picker from '@emoji-mart/react' 5 | const DevEmojiPickerV3 = ({ 6 | onSelect, 7 | }) => { 8 | return ( 9 | onSelect(e)} /> 10 | ); 11 | }; 12 | 13 | export default DevEmojiPickerV3; 14 | -------------------------------------------------------------------------------- /src/dev-components-txt/visual-codes/dev-qrcode/dev-qrcode-usage.txt: -------------------------------------------------------------------------------- 1 | 'use client' 2 | import React from "react"; 3 | import DevQrCode from "./dev-qrcode"; 4 | 5 | const DevQrCodeUsage = () => { 6 | return ( 7 | console.log(value)} 10 | /> 11 | ); 12 | }; 13 | 14 | export default DevQrCodeUsage; 15 | -------------------------------------------------------------------------------- /public/dev-components/inputs/(dev-password-input)/page.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import React from "react"; 3 | import DevPasswordInput from "./dev-password-input"; 4 | 5 | const DevPasswordInputUsage = () => { 6 | return ( 7 | console.log(e.target.value)} 9 | placeholder="Enter Password" 10 | /> 11 | ); 12 | }; 13 | 14 | export default DevPasswordInputUsage; 15 | -------------------------------------------------------------------------------- /public/dev-components/miscellaneous/(react-resizable-panels)/page.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactResizablePanels from "./react-resizable-panels"; 3 | 4 | const ReactResizablePanelsUsage = () => { 5 | return ( 6 |
7 | 8 |
9 | ); 10 | }; 11 | 12 | export default ReactResizablePanelsUsage; 13 | -------------------------------------------------------------------------------- /src/dev-components-txt/inputs/dev-password-input/dev-password-input-usage.txt: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import React from "react"; 3 | import DevPasswordInput from "./dev-password-input"; 4 | 5 | const DevPasswordInputUsage = () => { 6 | return ( 7 | console.log(e.target.value)} 9 | placeholder="Enter Password" 10 | /> 11 | ); 12 | }; 13 | 14 | export default DevPasswordInputUsage; 15 | -------------------------------------------------------------------------------- /src/dev-components-txt/miscellaneous/resizable-panels/resizable-panels-usage.txt: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactResizablePanels from "./react-resizable-panels"; 3 | 4 | const ReactResizablePanelsUsage = () => { 5 | return ( 6 |
7 | 8 |
9 | ); 10 | }; 11 | 12 | export default ReactResizablePanelsUsage; 13 | -------------------------------------------------------------------------------- /public/dev-components/dropdowns/(dev-dropdown-v1)/page.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import DevDropdownV1 from './dev-dropdown-v1' 3 | 4 | const DevDropdownV1Usage = () => { 5 | return ( 6 | Open}> 7 |

Dropdown Content

8 | 9 | ) 10 | } 11 | 12 | export default DevDropdownV1Usage 13 | 14 | -------------------------------------------------------------------------------- /src/dev-components-txt/miscellaneous/react-resizable-panels/react-resizable-panels-usage.txt: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactResizablePanels from "./react-resizable-panels"; 3 | 4 | const ReactResizablePanelsUsage = () => { 5 | return ( 6 |
7 | 8 |
9 | ); 10 | }; 11 | 12 | export default ReactResizablePanelsUsage; 13 | -------------------------------------------------------------------------------- /src/dev-components-txt/emoji-pickers/dev-emoji-picker-v3/dev-emoji-picker-v3-tsx.txt: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import React from "react"; 3 | import data from '@emoji-mart/data' 4 | import Picker from '@emoji-mart/react' 5 | const DevEmojiPickerV3 = ({ 6 | onSelect, 7 | }: { 8 | onSelect: (emoji: string) => void; 9 | }) => { 10 | return ( 11 | onSelect(e)} /> 12 | ); 13 | }; 14 | 15 | export default DevEmojiPickerV3; 16 | -------------------------------------------------------------------------------- /public/dev-components/carousels/(brand-carousel)/page.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import BrandCarousel from "./brand-carousel"; 3 | 4 | const BrandCarouselUsage = () => { 5 | const brands = [ 6 |

Brand 1

, 7 |

Brand 2

, 8 |

Brand 3

, 9 |

Brand 4

, 10 |

Brand 5

, 11 |

Brand 6

, 12 | ]; 13 | return ; 14 | }; 15 | 16 | export default BrandCarouselUsage; 17 | -------------------------------------------------------------------------------- /public/dev-components/pagination/(dev-pagination-v2)/page.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | import React, { useState } from 'react' 3 | import DevPaginationV2 from './dev-pagination-v2' 4 | 5 | const DevPaginationV2Usage = () => { 6 | const [initialPage, setInitialPage] = useState(1) 7 | return ( 8 | 9 | ) 10 | } 11 | 12 | export default DevPaginationV2Usage 13 | 14 | -------------------------------------------------------------------------------- /src/dev-components-txt/dropdowns/dev-dropdown-v1/dev-dropdown-v1-usage.txt: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import DevDropdownV1 from './dev-dropdown-v1' 3 | 4 | const DevDropdownV1Usage = () => { 5 | return ( 6 | Open}> 7 |

Dropdown Content

8 | 9 | ) 10 | } 11 | 12 | export default DevDropdownV1Usage 13 | 14 | -------------------------------------------------------------------------------- /src/dev-components-txt/carousels/brand-carousel/brand-carousel-usage.txt: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import BrandCarousel from "./brand-carousel"; 3 | 4 | const BrandCarouselUsage = () => { 5 | const brands = [ 6 |

Brand 1

, 7 |

Brand 2

, 8 |

Brand 3

, 9 |

Brand 4

, 10 |

Brand 5

, 11 |

Brand 6

, 12 | ]; 13 | return ; 14 | }; 15 | 16 | export default BrandCarouselUsage; 17 | -------------------------------------------------------------------------------- /public/dev-components/color-pickers/(dev-color-picker-v3)/page.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | import React from 'react' 3 | import DevColorPickerV3 from './dev-color-picker-v3' 4 | 5 | const DevColorPickerV3Usage = () => { 6 | return ( 7 |
8 | console.log(e)} /> 9 |
10 | ) 11 | } 12 | 13 | export default DevColorPickerV3Usage 14 | 15 | -------------------------------------------------------------------------------- /src/dev-components-txt/pagination/dev-pagination-v2/dev-pagination-v2-usage.txt: -------------------------------------------------------------------------------- 1 | 'use client' 2 | import React, { useState } from 'react' 3 | import DevPaginationV2 from './dev-pagination-v2' 4 | 5 | const DevPaginationV2Usage = () => { 6 | const [initialPage, setInitialPage] = useState(1) 7 | return ( 8 | 9 | ) 10 | } 11 | 12 | export default DevPaginationV2Usage 13 | 14 | -------------------------------------------------------------------------------- /src/dev-components-txt/color-pickers/dev-color-picker-v3/dev-color-picker-v3-usage.txt: -------------------------------------------------------------------------------- 1 | 'use client' 2 | import React from 'react' 3 | import DevColorPickerV3 from './dev-color-picker-v3' 4 | 5 | const DevColorPickerV3Usage = () => { 6 | return ( 7 |
8 | console.log(e)} /> 9 |
10 | ) 11 | } 12 | 13 | export default DevColorPickerV3Usage 14 | 15 | -------------------------------------------------------------------------------- /src/utils/theme-providers.tsx: -------------------------------------------------------------------------------- 1 | import Footer from "@/components/ui/header-cmp/footer"; 2 | import Header from "@/components/ui/header-cmp/header"; 3 | import { ThemeProvider } from "next-themes"; 4 | 5 | export function ThemeProviders({ children }: { children: React.ReactNode }) { 6 | return ( 7 | 8 |
9 |
10 | {children} 11 |
12 |