(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[281],{7533:function(e,t,n){Promise.resolve().then(n.bind(n,7211))},7211:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return _}});var i=n(4004);n(4978);var s=n(6551),r=n(4300),o=n(6739),a=n(2433),d=n(721),l=n(5227),c=n(4669),h=n(988),m=n(8314),j=n(9850),f=n(2682),p=n(3375),u=n(1041),x=n(6581),Z=n(5864),g=n(9362),y=n(5123),v=n(5891);let b=[{id:0,count:0,description:(0,i.jsx)(s.Z,{variant:"filled",notched:!0,textAlign:"left",fileName:(0,i.jsxs)(r.Z,{variant:"small",fs:1,display:"flex",alignItems:"center",children:[(0,i.jsx)(p.Z,{height:"1.2rem",width:"1.5rem"})," Example.jsx"]}),children:"import React from 'react' \nimport { CodeEditor, Layout } from '@modjs/core'\nimport { ModThemeProvider } from '@modjs/utils'\n\nconst App = () => {\n    return (\n         <ModThemeProvider theme={theme}>\n            <Layout>\n                <CodeEditor>\n                    {codeEditorContent}\n                </CodeEditor>\n            </Layout>\n        </ModThemeProvider>\n    )\n}\nexport default App"})}];function _(){return(0,i.jsx)(g.Z,{children:(0,i.jsxs)(o.Z,{children:[(0,i.jsx)(v.Z,{currentPage:"root"}),(0,i.jsx)(a.Z,{id:"intro",children:(0,i.jsx)(d.Z,{children:(0,i.jsxs)(l.Z,{pt:30,pb:64,children:[(0,i.jsxs)(c.Z,{columns:2,gap:32,children:[(0,i.jsxs)(l.Z,{children:[(0,i.jsx)(r.Z,{variant:"h1",children:"Production-Ready React Component Library"}),(0,i.jsx)(r.Z,{variant:"body1",children:"Create scalable and polished user interfaces with a Production-Ready React Component Library by Mod.js. Elevate your projects with robust, customizable components designed for seamless integration and optimal performance."}),(0,i.jsx)(s.Z,{notched:!0,type:"script",fileName:(0,i.jsx)(i.Fragment,{children:(0,i.jsxs)(r.Z,{variant:"small",fs:1,display:"flex",alignItems:"center",children:[(0,i.jsx)(u.Z,{fill:"#5a6b31"}),"Terminal"]})}),children:"npm install @modjs/core @modjs/icons @modjs/utils @modjs/helpers"}),(0,i.jsxs)(l.Z,{display:"flex",gap:8,mt:16,mb:64,children:[(0,i.jsxs)(h.Z,{variant:"filled",notched:!0,href:"/core/installation","data-testid":"getting_started",children:["Getting Started",(0,i.jsx)(x.Z,{fill:"#ffffff"})]}),(0,i.jsxs)(h.Z,{variant:"outlined",notched:!0,href:"/core/api/react-accordion","data-testid":"view_core_components_api",children:["View Core Components API",(0,i.jsx)(x.Z,{})]})]})]}),(0,i.jsx)(m.Z,{data:b,children:b.map(e=>(0,i.jsx)(j.Z,{children:(0,i.jsx)(f.Z,{children:e.description})},e.id))})]}),(0,i.jsxs)(c.Z,{columns:4,gap:16,children:[(0,i.jsxs)(l.Z,{children:[(0,i.jsx)(r.Z,{variant:"h3",children:"@modjs/core"}),(0,i.jsx)(r.Z,{variant:"body2",color:"light",children:"@modjs/core offers a suite of essential UI components designed for seamless integration and high customization. Perfect for building modern, interactive interfaces with ease and consistency."}),(0,i.jsxs)(h.Z,{variant:"transparent",href:"/core",ml:-8,"data-testid":"core_learn_more",children:["Learn More",(0,i.jsx)(x.Z,{})]})]}),(0,i.jsxs)(l.Z,{children:[(0,i.jsx)(r.Z,{variant:"h3",children:"@modjs/icons"}),(0,i.jsx)(r.Z,{variant:"body2",children:"@modjs/icons provides a comprehensive collection of versatile SVG icons, designed to integrate effortlessly into your projects. Enhance your UI with a wide range of customizable SVG icons to fit any design need."}),(0,i.jsxs)(h.Z,{variant:"transparent",href:"/icons",ml:-8,"data-testid":"icons_learn_more",children:["Learn More",(0,i.jsx)(x.Z,{})]})]}),(0,i.jsxs)(l.Z,{children:[(0,i.jsx)(r.Z,{variant:"h3",children:"@modjs/utils"}),(0,i.jsx)(r.Z,{variant:"body2",children:"@modjs/utils delivers a set of powerful utilities for managing themes, and global styles. Streamline your development with tools that ensure consistent design and efficient styling across your application."}),(0,i.jsxs)(h.Z,{variant:"transparent",href:"https://github.com/modjs-org/modjs/tree/main/packages/utils",target:"_blank",ml:-8,"data-testid":"utils_github_repository",children:["Github Repository",(0,i.jsx)(Z.Z,{})]})]}),(0,i.jsxs)(l.Z,{children:[(0,i.jsx)(r.Z,{variant:"h3",children:"@modjs/helpers"}),(0,i.jsx)(r.Z,{variant:"body2",children:"@modjs/helpers offers a collection of useful utility functions. Simplify your code and enhance functionality with these essential tools for common tasks and data formatting."}),(0,i.jsxs)(h.Z,{variant:"transparent",href:"https://github.com/modjs-org/modjs/tree/main/packages/helpers",target:"_blank",ml:-8,"data-testid":"helpers_github_repository",children:["Github Repository",(0,i.jsx)(Z.Z,{})]})]})]})]})})}),(0,i.jsx)(y.Z,{})]})})}}},function(e){e.O(0,[4293,65,6071,4663,8322,3375,5597,8470,9594,1744],function(){return e(e.s=7533)}),_N_E=e.O()}]);