Repository: RubixCube-Innovations/mantine-theme-builder Branch: main Commit: 111cdb99b5ba Files: 334 Total size: 2.4 MB Directory structure: gitextract_fz6l1qv3/ ├── .gitignore ├── .prettierrc ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── _mantine.scss ├── eslint.config.js ├── js/ │ ├── generated/ │ │ ├── colors.cjs │ │ ├── colors.js │ │ └── theme-functions.cjs │ └── scripts/ │ ├── compileTS.cjs │ ├── components.cjs │ ├── generateCssVariableResolver.cjs │ ├── generateStyles.cjs │ └── generateThemes.cjs ├── next.config.js ├── package.json ├── postcss.config.js ├── public/ │ ├── _redirects │ └── robots.txt ├── src/ │ ├── _mantine.scss │ ├── app/ │ │ ├── about/ │ │ │ └── page.tsx │ │ ├── blocks/ │ │ │ ├── [slug]/ │ │ │ │ └── page.tsx │ │ │ ├── layout.tsx │ │ │ └── page.tsx │ │ ├── feedback/ │ │ │ └── page.tsx │ │ ├── how-to-use/ │ │ │ └── page.tsx │ │ ├── layout.tsx │ │ ├── loading.tsx │ │ ├── page.tsx │ │ ├── playground/ │ │ │ └── page.tsx │ │ └── sitemap.ts │ ├── components/ │ │ ├── GoogleAnalytics.tsx │ │ ├── MicrosoftClarity.tsx │ │ ├── custom/ │ │ │ ├── about/ │ │ │ │ └── about.tsx │ │ │ ├── blocks/ │ │ │ │ └── coming-soon/ │ │ │ │ ├── coming-soon.module.css │ │ │ │ └── coming-soon.tsx │ │ │ ├── change-theme-section/ │ │ │ │ ├── change-theme-button.tsx │ │ │ │ ├── change-theme-section.tsx │ │ │ │ └── copy-theme-code-button.tsx │ │ │ ├── components-demo/ │ │ │ │ ├── buttons/ │ │ │ │ │ ├── action-icon-demo.tsx │ │ │ │ │ ├── button-demo.tsx │ │ │ │ │ └── close-button-demo.tsx │ │ │ │ ├── charts/ │ │ │ │ │ ├── area-chart-demo.tsx │ │ │ │ │ ├── bar-chart-demo.tsx │ │ │ │ │ ├── bubble-chart-demo.tsx │ │ │ │ │ ├── composite-chart-demo.tsx │ │ │ │ │ ├── data/ │ │ │ │ │ │ ├── _area-data.ts │ │ │ │ │ │ ├── _bar-data.ts │ │ │ │ │ │ ├── _bubble-data.ts │ │ │ │ │ │ ├── _donut-data.ts │ │ │ │ │ │ ├── _pie-data.ts │ │ │ │ │ │ ├── _radar-data.ts │ │ │ │ │ │ └── _scatter-data.ts │ │ │ │ │ ├── donot-chart-demo.tsx │ │ │ │ │ ├── line-chart-demo.tsx │ │ │ │ │ ├── pie-chart-demo.tsx │ │ │ │ │ ├── radar-chart-demo.tsx │ │ │ │ │ ├── scatter-chart-demo.tsx │ │ │ │ │ └── sparkline-demo.tsx │ │ │ │ ├── combobox/ │ │ │ │ │ ├── autocomplete-demo.tsx │ │ │ │ │ ├── multi-select-demo.tsx │ │ │ │ │ ├── pills-input-demo.tsx │ │ │ │ │ ├── select-demo.tsx │ │ │ │ │ └── tags-input-demo.tsx │ │ │ │ ├── components-demo.module.css │ │ │ │ ├── components-demo.tsx │ │ │ │ ├── data-display/ │ │ │ │ │ ├── accordion-demo.tsx │ │ │ │ │ ├── avatar-demo.tsx │ │ │ │ │ ├── background-image-demo.tsx │ │ │ │ │ ├── badge-demo.tsx │ │ │ │ │ ├── card-demo.tsx │ │ │ │ │ ├── color-swatch-demo.tsx │ │ │ │ │ ├── image-demo.tsx │ │ │ │ │ ├── indicator-demo.tsx │ │ │ │ │ ├── spoiler-demo.tsx │ │ │ │ │ ├── theme-icon-demo.tsx │ │ │ │ │ └── timeline-demo.tsx │ │ │ │ ├── feedback/ │ │ │ │ │ ├── alert-demo.tsx │ │ │ │ │ ├── loader-demo.tsx │ │ │ │ │ ├── notification-demo.tsx │ │ │ │ │ ├── progress-demo.tsx │ │ │ │ │ ├── ring-progress-demo.tsx │ │ │ │ │ ├── semi-circle-progress-demo.tsx │ │ │ │ │ └── skeleton-demo.tsx │ │ │ │ ├── inputs/ │ │ │ │ │ ├── checkbox-demo.tsx │ │ │ │ │ ├── checkbox-group-demo.tsx │ │ │ │ │ ├── chip-demo.tsx │ │ │ │ │ ├── color-input-demo.tsx │ │ │ │ │ ├── fieldset-demo.tsx │ │ │ │ │ ├── file-input.tsx │ │ │ │ │ ├── native-select-demo.tsx │ │ │ │ │ ├── pin-input-demo.tsx │ │ │ │ │ ├── radio-demo.tsx │ │ │ │ │ ├── radio-group-demo.tsx │ │ │ │ │ ├── rating-demo.tsx │ │ │ │ │ ├── segmented-control-demo.tsx │ │ │ │ │ ├── slider-demo.tsx │ │ │ │ │ ├── switch-demo.tsx │ │ │ │ │ ├── switch-group-demo.tsx │ │ │ │ │ ├── text-input-demo.tsx │ │ │ │ │ └── textarea-demo.tsx │ │ │ │ ├── miscellaneous/ │ │ │ │ │ ├── date-picker-input-demo.tsx │ │ │ │ │ ├── divider-demo.tsx │ │ │ │ │ ├── paper-demo.tsx │ │ │ │ │ └── scroll-area-demo.tsx │ │ │ │ ├── navigation/ │ │ │ │ │ ├── anchor-demo.tsx │ │ │ │ │ ├── nav-link-demo.tsx │ │ │ │ │ ├── pagination-demo.tsx │ │ │ │ │ ├── stepper-demo.tsx │ │ │ │ │ └── tabs-demo.tsx │ │ │ │ ├── overlays/ │ │ │ │ │ ├── authentication-form.tsx │ │ │ │ │ ├── dialog-demo.tsx │ │ │ │ │ ├── drawer-demo.tsx │ │ │ │ │ ├── hover-card-demo.tsx │ │ │ │ │ ├── loading-overlay-demo.tsx │ │ │ │ │ ├── menu-demo.tsx │ │ │ │ │ ├── modal-demo.tsx │ │ │ │ │ ├── overlay-demo.tsx │ │ │ │ │ ├── popover-demo.tsx │ │ │ │ │ └── tooltip-demo.tsx │ │ │ │ └── typography/ │ │ │ │ ├── blockquote-demo.tsx │ │ │ │ ├── code-demo.tsx │ │ │ │ ├── highlight-demo.tsx │ │ │ │ ├── list-demo.tsx │ │ │ │ ├── mark-demo.tsx │ │ │ │ ├── table-demo.tsx │ │ │ │ ├── text-demo.tsx │ │ │ │ └── title-demo.tsx │ │ │ ├── how-to-use/ │ │ │ │ └── how-to-use.tsx │ │ │ ├── testimonial/ │ │ │ │ ├── testimonial-grid.tsx │ │ │ │ └── testimonial-item.tsx │ │ │ └── theme-example-cards/ │ │ │ ├── activity-goal.tsx │ │ │ ├── calendar.tsx │ │ │ ├── chat.tsx │ │ │ ├── cookie-settings.tsx │ │ │ ├── create-account.tsx │ │ │ ├── data-table.tsx │ │ │ ├── mantine-cards.tsx │ │ │ ├── metric.tsx │ │ │ ├── payment-method.tsx │ │ │ ├── report-issue.tsx │ │ │ ├── share.tsx │ │ │ ├── stats.tsx │ │ │ └── team-members.tsx │ │ ├── layouts/ │ │ │ └── page-layout.tsx │ │ ├── mantine/ │ │ │ └── demo/ │ │ │ ├── CodeDemo/ │ │ │ │ └── CodeDemo.tsx │ │ │ ├── ConfiguratorDemo/ │ │ │ │ ├── ConfiguratorDemo.module.css │ │ │ │ ├── ConfiguratorDemo.tsx │ │ │ │ ├── clear-props.ts │ │ │ │ ├── controls/ │ │ │ │ │ ├── ColorWheelIcon.tsx │ │ │ │ │ ├── ConfiguratorBoolean.control.tsx │ │ │ │ │ ├── ConfiguratorColor.control.module.css │ │ │ │ │ ├── ConfiguratorColor.control.tsx │ │ │ │ │ ├── ConfiguratorNumber.control.tsx │ │ │ │ │ ├── ConfiguratorSegmented.control.tsx │ │ │ │ │ ├── ConfiguratorSelect.control.tsx │ │ │ │ │ ├── ConfiguratorSize.control.tsx │ │ │ │ │ ├── ConfiguratorString.control.tsx │ │ │ │ │ ├── get-control-label.ts │ │ │ │ │ ├── index.ts │ │ │ │ │ ├── transform-select-data.ts │ │ │ │ │ └── types.ts │ │ │ │ ├── get-code-array.ts │ │ │ │ └── inject-props.tsx │ │ │ ├── Demo/ │ │ │ │ └── Demo.tsx │ │ │ ├── DemoArea/ │ │ │ │ ├── DemoArea.module.css │ │ │ │ ├── DemoArea.tsx │ │ │ │ └── index.ts │ │ │ ├── DemoCode/ │ │ │ │ ├── DemoCode.module.scss │ │ │ │ ├── DemoCode.tsx │ │ │ │ └── index.ts │ │ │ ├── DemoColumns/ │ │ │ │ ├── DemoColumns.module.css │ │ │ │ ├── DemoColumns.tsx │ │ │ │ └── index.ts │ │ │ ├── DemoRoot/ │ │ │ │ ├── DemoRoot.module.css │ │ │ │ ├── DemoRoot.tsx │ │ │ │ └── index.ts │ │ │ ├── StylesApiDemo/ │ │ │ │ ├── StylesApiDemo.module.css │ │ │ │ └── StylesApiDemo.tsx │ │ │ └── index.ts │ │ └── ui/ │ │ ├── chart-tooltip.tsx │ │ ├── color-scheme-switch/ │ │ │ ├── color-scheme-switch.module.css │ │ │ ├── color-scheme-switch.tsx │ │ │ └── index.ts │ │ ├── header/ │ │ │ ├── header.module.scss │ │ │ └── header.tsx │ │ ├── icons.tsx │ │ └── navbar/ │ │ ├── navbar-links-group.tsx │ │ ├── navbar.module.scss │ │ └── navbar.tsx │ ├── feature/ │ │ └── blocks/ │ │ ├── components/ │ │ │ ├── block-components/ │ │ │ │ └── block-components.tsx │ │ │ ├── categories/ │ │ │ │ ├── category-card.module.css │ │ │ │ ├── category-card.tsx │ │ │ │ ├── category-list.module.css │ │ │ │ ├── category-list.tsx │ │ │ │ └── category-page.tsx │ │ │ ├── component-canvas/ │ │ │ │ ├── canvas-header.module.css │ │ │ │ ├── canvas-header.tsx │ │ │ │ ├── color-control.tsx │ │ │ │ ├── component-canvas.module.css │ │ │ │ └── component-canvas.tsx │ │ │ ├── component-preview/ │ │ │ │ └── component-preview.tsx │ │ │ └── shell/ │ │ │ ├── shell.module.css │ │ │ └── shell.tsx │ │ ├── data/ │ │ │ ├── categories.ts │ │ │ ├── components.ts │ │ │ ├── fn.ts │ │ │ ├── images/ │ │ │ │ └── index.ts │ │ │ └── types.ts │ │ └── lib/ │ │ ├── coming-soon/ │ │ │ ├── attributes.json │ │ │ ├── coming-soon.module.css │ │ │ └── coming-soon.tsx │ │ ├── faq1/ │ │ │ ├── attributes.json │ │ │ ├── faq1.module.css │ │ │ └── faq1.tsx │ │ ├── faq2/ │ │ │ ├── attributes.json │ │ │ ├── faq2.module.css │ │ │ └── faq2.tsx │ │ ├── faq3/ │ │ │ ├── attributes.json │ │ │ ├── faq3.module.css │ │ │ └── faq3.tsx │ │ ├── feature1/ │ │ │ ├── attributes.json │ │ │ ├── feature1.module.css │ │ │ └── feature1.tsx │ │ ├── feature2/ │ │ │ ├── attributes.json │ │ │ ├── feature2.module.css │ │ │ └── feature2.tsx │ │ ├── feature3/ │ │ │ ├── attributes.json │ │ │ ├── feature3.module.css │ │ │ └── feature3.tsx │ │ ├── feature4/ │ │ │ ├── attributes.json │ │ │ ├── feature4.module.css │ │ │ └── feature4.tsx │ │ ├── feature5/ │ │ │ ├── attributes.json │ │ │ ├── feature5.module.css │ │ │ └── feature5.tsx │ │ ├── hero1/ │ │ │ ├── attributes.json │ │ │ ├── hero1.module.css │ │ │ └── hero1.tsx │ │ ├── hero2/ │ │ │ ├── attributes.json │ │ │ ├── hero2.module.css │ │ │ └── hero2.tsx │ │ ├── hero3/ │ │ │ ├── attributes.json │ │ │ ├── hero3.module.css │ │ │ └── hero3.tsx │ │ ├── hero4/ │ │ │ ├── attributes.json │ │ │ ├── hero4.module.css │ │ │ └── hero4.tsx │ │ ├── hero5/ │ │ │ ├── attributes.json │ │ │ ├── hero5.module.css │ │ │ └── hero5.tsx │ │ ├── hero6/ │ │ │ ├── attributes.json │ │ │ ├── hero6.module.css │ │ │ └── hero6.tsx │ │ ├── index.ts │ │ ├── meet-our-team-1/ │ │ │ ├── attributes.json │ │ │ ├── meet-our-team-1.module.css │ │ │ └── meet-our-team-1.tsx │ │ ├── meet-our-team-2/ │ │ │ ├── attributes.json │ │ │ ├── meet-our-team-2.module.css │ │ │ └── meet-our-team-2.tsx │ │ ├── meet-our-team-3/ │ │ │ ├── attributes.json │ │ │ ├── meet-our-team-3.module.css │ │ │ └── meet-our-team-3.tsx │ │ ├── meet-our-team-4/ │ │ │ ├── attributes.json │ │ │ ├── meet-our-team-4.module.css │ │ │ └── meet-our-team-4.tsx │ │ ├── newsletter1/ │ │ │ ├── attributes.json │ │ │ ├── newsletter1.module.css │ │ │ └── newsletter1.tsx │ │ ├── newsletter2/ │ │ │ ├── attributes.json │ │ │ ├── newsletter2.module.css │ │ │ └── newsletter2.tsx │ │ ├── pricing1/ │ │ │ ├── attributes.json │ │ │ ├── pricing1.module.css │ │ │ └── pricing1.tsx │ │ ├── pricing2/ │ │ │ ├── attributes.json │ │ │ ├── pricing2.module.css │ │ │ └── pricing2.tsx │ │ ├── pricing3/ │ │ │ ├── attributes.json │ │ │ ├── pricing3.module.css │ │ │ └── pricing3.tsx │ │ ├── pricing4/ │ │ │ ├── attributes.json │ │ │ ├── pricing4.module.css │ │ │ └── pricing4.tsx │ │ ├── pricing5/ │ │ │ ├── attributes.json │ │ │ ├── pricing5.module.css │ │ │ └── pricing5.tsx │ │ ├── testimonials1/ │ │ │ ├── attributes.json │ │ │ ├── testimonials1.module.css │ │ │ └── testimonials1.tsx │ │ ├── testimonials2/ │ │ │ ├── attributes.json │ │ │ ├── testimonials2.module.css │ │ │ └── testimonials2.tsx │ │ └── testimonials3/ │ │ ├── attributes.json │ │ ├── testimonials3.module.css │ │ └── testimonials3.tsx │ ├── routeTree.gen.ts │ ├── styles/ │ │ ├── _mantine.scss │ │ ├── fonts.css │ │ ├── index.scss │ │ ├── mantine-styles.css │ │ └── shadcn-styles.css │ ├── theme-context.tsx │ ├── themes/ │ │ ├── generated/ │ │ │ ├── generatedMantineCssStyles.ts │ │ │ ├── generatedMantineCssVariableResolver.ts │ │ │ ├── generatedMantineTheme.ts │ │ │ ├── generatedShadcnCssStyles.ts │ │ │ ├── generatedShadcnCssVariableResolver.ts │ │ │ └── generatedShadcnTheme.ts │ │ ├── mantine/ │ │ │ ├── mantine-css-variable-resolver.ts │ │ │ └── mantine-theme.ts │ │ ├── shadcn/ │ │ │ ├── shadcn-css-variable-resolver.ts │ │ │ └── shadcn-theme.ts │ │ └── test/ │ │ ├── shadcn-css-variable-resolver-test.ts │ │ ├── shadcn-styles-test.css │ │ └── shadcn-theme-test.ts │ ├── utils/ │ │ ├── colors.ts │ │ ├── cssTemplate.ts │ │ ├── data.ts │ │ ├── functions.ts │ │ ├── input-controls.ts │ │ ├── testimonials.ts │ │ ├── theme-functions.ts │ │ ├── themeTemplate.ts │ │ └── variants-data.ts │ └── vite-env.d.ts ├── tailwind.config.js ├── tsconfig.app.json ├── tsconfig.app.tsbuildinfo ├── tsconfig.json ├── tsconfig.node.tsbuildinfo └── tsconfig.tsbuildinfo ================================================ FILE CONTENTS ================================================ ================================================ FILE: .gitignore ================================================ # Logs logs *.log npm-debug.log* yarn-debug.log* yarn-error.log* pnpm-debug.log* lerna-debug.log* node_modules dist dist-ssr *.local .next next-env.d.ts dist docs # Editor directories and files .vscode/* !.vscode/extensions.json .idea .DS_Store *.suo *.ntvs* *.njsproj *.sln *.sw? .claude ================================================ FILE: .prettierrc ================================================ { "semi": true, "singleQuote": false, "trailingComma": "es5", "printWidth": 120 } ================================================ FILE: CONTRIBUTING.md ================================================ # Contributing to Mantine Theme Builder We are excited that you're interested in contributing to **Mantine Theme Builder**! This guide will help you get started with contributing code, reporting issues, or suggesting new features. ## How to Contribute There are many ways to contribute to this project: - **Reporting Bugs**: If you've found a bug, please open an issue with a clear description of the problem, steps to reproduce, and any error messages. - **Feature Requests**: Got an idea for a new feature? We welcome suggestions. Please provide a detailed description of the feature and how it would improve the project. - **Code Contributions**: We love receiving pull requests! Check out our guidelines for contributing code below. ## Getting Started To start contributing, follow these steps: 1. **Fork the repository**: Click the "Fork" button at the top of this repo and clone it to your local machine. ```bash git clone https://github.com/your-username/mantine-theme-builder.git cd mantine-theme-builder ``` 2. **Install dependencies**: Install the necessary dependencies to run the project. ```bash npm install ``` 3. **Make your changes**: Create a new branch for your feature or bug fix. ```bash git checkout -b your-branch-name ``` 4. **Test your changes**: Run the project locally to ensure everything works as expected. ```bash npm start ``` 5. **Generate updated themes**: If you have updated any theme or style files, run the following command to regenerate the updated themes. ```bash npm run generate ``` 6. **Commit your changes**: Once you're satisfied with your changes, commit them. ```bash git commit -m "Description of your changes" ``` 7. **Push your changes**: Push your changes to your forked repo. ```bash git push origin your-branch-name ``` 8. **Submit a pull request**: Go to the original repo on GitHub and submit a pull request with a clear description of your changes. ## Code Style Please ensure your code follows these guidelines: - Use [Prettier](https://prettier.io/) for code formatting to keep the codebase clean and consistent. - Follow the standard JavaScript or TypeScript best practices. - Ensure that your code is properly documented and tested where applicable. ## Issue Reporting When reporting issues, please ensure that you include: - A detailed description of the issue. - Steps to reproduce the bug. - Screenshots or code snippets (if applicable). ## License By contributing to **Mantine Theme Builder**, you agree that your contributions will be licensed under the MIT License. ================================================ FILE: LICENSE ================================================ MIT License Copyright (c) 2024 RubixCube Innovations Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ================================================ FILE: README.md ================================================ # Mantine Hub - Modern Themes, UI Blocks, Templates and much more for [Mantine UI Library](https://mantine.dev) **Mantine Hub(previously Theme Builder)** is a complimentary tool for developers to make UI development with Mantine much more faster and easier. Initially created as an experimental project to simplify the process of modernizing Mantine's styling, MantineHub offers pre-configured themes inspired by Shadcn. With MantineHub, developers can quickly integrate modern styling into their projects by copying and pasting the theme configuration. Due to the overwhelming positive feedback and community endorsment we’ve received, MantineHub has evolved into a comprehensive toolkit. It now supports all Mantine components and introduces exciting new features like Blocks—pre-built UI components designed to seamlessly work with the generated themes. ![image](https://github.com/user-attachments/assets/0b673eec-ed49-4928-a021-5bee7d0ec8e3) ## Deep Wiki [Visit Documentation](https://deepwiki.com/RubixCube-Innovations/mantine-theme-builder) ## Features - **Customizable Styles**: Choose from a selection of predefined styles to quickly update the look of your UI. - **Color Palette**: Pick from a wide range of color themes like Zinc, Slate, Gray, and more. - **Radius Control**: Adjust the border radius to match your desired look, from sharp corners to fully rounded elements. - **Light/Dark Mode**: Toggle between light and dark themes for quick previews and real-time visualizations. - **Export Theme**: Copy the generated Mantine theme object and integrate it directly into your project. ## Getting Started To use **Mantine Theme Builder** in your project, follow these steps: 1. Set up a new project with Mantine by following the [official Mantine documentation](https://mantine.dev/getting-started/): 2. Once your project is set up, open the `MantineProvider` (usually in `src/App.js` or `src/App.tsx`). 3. Copy the generated theme object from the **Mantine Theme Builder** website. 4. Replace or extend the theme object in your `MantineProvider` as follows: ```javascript import { MantineProvider } from '@mantine/core'; import { yourCustomTheme } from './your-custom-theme'; function App() { return ( ); } export default App; ``` 5. That's it! Your project will now use the customized theme. ## How to Use 1. Open **Mantine Theme Builder** and select from the available style presets or color themes to start building your Mantine theme. 2. Customize the border radius values for rounded corners. 3. Toggle between light and dark modes for your UI components. 4. Once you're satisfied, copy the theme object code and use it in your project. ## Contribution We welcome contributions from the community! Feel free to submit issues or pull requests to improve this project. See our [Contribution Guide](CONTRIBUTING.md) for more details. ## License This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details. ## Star History [![Star History Chart](https://api.star-history.com/svg?repos=rubixcube-innovations/mantine-theme-builder&type=Date)](https://star-history.com/#rubixcube-innovations/mantine-theme-builder&Date) ## Keywords - Mantine Theme Builder - Mantine Custom Theme - Mantine UI Components - Mantine Light/Dark Mode - Mantine Customizable Themes - Mantine Modern UI Themes - Mantine Style Presets - shadcn-like Mantine Themes - Mantine Theme Exporter - Mantine Theme Generator - Mantine Shadcn Themes - Shadcn Themes for Mantine ================================================ FILE: _mantine.scss ================================================ @use "sass:math"; // Define variables for your breakpoints, // values must be the same as in your theme $mantine-breakpoint-xs: "36em"; $mantine-breakpoint-sm: "48em"; $mantine-breakpoint-md: "62em"; $mantine-breakpoint-lg: "75em"; $mantine-breakpoint-xl: "88em"; @function rem($value) { @return #{math.div(math.div($value, $value * 0 + 1), 16)}rem; } @mixin light { [data-mantine-color-scheme="light"] & { @content; } } @mixin dark { [data-mantine-color-scheme="dark"] & { @content; } } @mixin hover { @media (hover: hover) { &:hover { @content; } } @media (hover: none) { &:active { @content; } } } @mixin smaller-than($breakpoint) { @media (max-width: $breakpoint) { @content; } } @mixin larger-than($breakpoint) { @media (min-width: $breakpoint) { @content; } } // Add direction mixins if you need rtl support @mixin rtl { [dir="rtl"] & { @content; } } @mixin ltr { [dir="ltr"] & { @content; } } ================================================ FILE: eslint.config.js ================================================ import js from "@eslint/js"; import globals from "globals"; import reactHooks from "eslint-plugin-react-hooks"; import reactRefresh from "eslint-plugin-react-refresh"; import tseslint from "typescript-eslint"; import eslintConfigPrettier from "eslint-config-prettier"; export default tseslint.config( { ignores: ["dist"] }, { extends: [js.configs.recommended, ...tseslint.configs.recommended], files: ["**/*.{ts,tsx}"], languageOptions: { ecmaVersion: 2020, globals: globals.browser, }, plugins: { "react-hooks": reactHooks, "react-refresh": reactRefresh, }, rules: { ...reactHooks.configs.recommended.rules, "react-refresh/only-export-components": ["warn", { allowConstantExport: true }], "@typescript-eslint/no-explicit-any": 0, }, }, eslintConfigPrettier ); ================================================ FILE: js/generated/colors.cjs ================================================ "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.SHADCN_DEFAULT_COLORS = exports.MANTINE_DEFAULT_COLORS = exports.pinkColors = exports.fuchsiaColors = exports.purpleColors = exports.indigoColors = exports.skyColors = exports.cyanColors = exports.tealColors = exports.emeraldColors = exports.limeColors = exports.amberColors = exports.violetColors = exports.yellowColors = exports.blueColors = exports.greenColors = exports.orangeColors = exports.roseColors = exports.redColors = exports.neutralColors = exports.grayColors = exports.stoneColors = exports.slateColors = exports.zincColors = void 0; // Note: 500 shade in tailwind color is not included in the color palette except for orange, green and blue // Color shades in tailwind are 50, 100, 200, 300, 400, 600, 700, 800, 900, 950 exports.zincColors = [ "#fafafa", // [0] -> shade 50 "#f4f4f5", // [1] -> shade 100 "#e4e4e7", // [2] -> shade 200 "#d4d4d8", // [3] -> shade 300 "#a1a1aa", // [4] -> shade 400 "#52525b", // [5] -> shade 600 "#3f3f46", // [6] -> shade 700 "#27272a", // [7] -> shade 800 "#18181b", // [8] -> shade 900 "#09090b", // [9] -> shade 950 "#71717A" // [10] -> zinc base ]; exports.slateColors = [ "#f8fafc", // [0] -> shade 50 "#f1f5f9", // [1] -> shade 100 "#e2e8f0", // [2] -> shade 200 "#cbd5e1", // [3] -> shade 300 "#94a3b8", // [4] -> shade 400 "#475569", // [5] -> shade 600 "#334155", // [6] -> shade 700 "#1e293b", // [7] -> shade 800 "#0f172a", // [8] -> shade 900 "#020817", // [9] -> shade 950 (original tailwind color was #020617) "#64748B" // [10] -> slate base ]; exports.stoneColors = [ "#fafaf9", // [0] -> shade 50 "#f5f5f4", // [1] -> shade 100 "#e7e5e4", // [2] -> shade 200 "#d6d3d1", // [3] -> shade 300 "#a8a29e", // [4] -> shade 400 "#57534e", // [5] -> shade 600 "#44403c", // [6] -> shade 700 "#292524", // [7] -> shade 800 "#1c1917", // [8] -> shade 900 "#0c0a09", // [9] -> shade 950 "#78716C" // [10] -> stone base ]; exports.grayColors = [ "#f9fafb", // [0] -> shade 50 "#f3f4f6", // [1] -> shade 100 "#e5e7eb", // [2] -> shade 200 "#d1d5db", // [3] -> shade 300 "#9ca3af", // [4] -> shade 400 "#4b5563", // [5] -> shade 600 "#374151", // [6] -> shade 700 "#1f2937", // [7] -> shade 800 "#111827", // [8] -> shade 900 "#030712", // [9] -> shade 950 "#6B7280" // [10] -> gray base ]; exports.neutralColors = [ "#fafafa", // [0] -> shade 50 "#f5f5f5", // [1] -> shade 100 "#e5e5e5", // [2] -> shade 200 "#d4d4d4", // [3] -> shade 300 "#a3a3a3", // [4] -> shade 400 "#525252", // [5] -> shade 600 "#404040", // [6] -> shade 700 "#262626", // [7] -> shade 800 "#171717", // [8] -> shade 900 "#0a0a0a", // [9] -> shade 950 "#737373" // [10] -> neutral base ]; exports.redColors = [ "#FEF2F2", // [0] -> shade 50 "#FEE2E2", // [1] -> shade 100 "#FECACA", // [2] -> shade 200 "#FCA5A5", // [3] -> shade 300 "#F87171", // [4] -> shade 400 "#DC2626", // [5] -> shade 600 "#B91C1C", // [6] -> shade 700 "#991B1B", // [7] -> shade 800 "#7F1D1D", // [8] -> shade 900 "#450A0A", // [9] -> shade 950 "#EF4444" // [10] -> red base ]; exports.roseColors = [ "#fff1f2", // [0] -> shade 50 "#ffe4e6", // [1] -> shade 100 "#fecdd3", // [2] -> shade 200 "#fda4af", // [3] -> shade 300 "#fb7185", // [4] -> shade 400 "#e11d48", // [5] -> shade 600 "#be123c", // [6] -> shade 700 "#9f1239", // [7] -> shade 800 "#881337", // [8] -> shade 900 "#4c0519", // [9] -> shade 950 "#F43F5E" // [10] -> base color as rose[10] ]; exports.orangeColors = [ "#fff7ed", // [0] -> shade 50 "#ffedd5", // [1] -> shade 100 "#fed7aa", // [2] -> shade 200 "#fdba74", // [3] -> shade 300 "#fb923c", // [4] -> shade 400 "#f97316", // [5] -> shade 500 "#ea580c", // [6] -> shade 600 "#9a3412", // [7] -> shade 800 "#7c2d12", // [8] -> shade 900 "#431407", // [9] -> shade 950 "#F97316", // [10] -> orange base ]; exports.greenColors = [ "#F0FDF4", // [0] -> shade 50 "#DCFCE7", // [1] -> shade 100 "#BBF7D0", // [2] -> shade 200 "#86EFAC", // [3] -> shade 300 "#4ADE80", // [4] -> shade 400 "#22c55e", // [5] -> shade 500 "#16A34A", // [6] -> shade 600 "#166534", // [7] -> shade 800 "#14532D", // [8] -> shade 900 "#052E16", // [9] -> shade 950 "#10B981", // [10] -> green base ]; exports.blueColors = [ "#eff6ff", // [0] -> shade 50 "#dbeafe", // [1] -> shade 100 "#bfdbfe", // [2] -> shade 200 "#93c5fd", // [3] -> shade 300 "#60a5fa", // [4] -> shade 400 "#3b82f6", // [5] -> shade 500 "#2563eb", // [6] -> shade 600 "#1e40af", // [7] -> shade 800 "#1e3a8a", // [8] -> shade 900 "#172554", // [9] -> shade 950 "#3B82F6", // [10] -> blue base ]; exports.yellowColors = [ "#fefce8", // [0] -> shade 50 "#fef9c3", // [1] -> shade 100 "#fef08a", // [2] -> shade 200 "#fde047", // [3] -> shade 300 "#facc15", // [4] -> shade 400 "#ca8a04", // [5] -> shade 500 "#a16207", // [6] -> shade 600 "#854d0e", // [7] -> shade 700 "#713f12", // [8] -> shade 800 "#3f2c06", // [9] -> shade 950 "#F59E0B", // [10] -> yellow base ]; exports.violetColors = [ "#f5f3ff", // [0] -> shade 50 "#ede9fe", // [1] -> shade 100 "#ddd6fe", // [2] -> shade 200 "#c4b5fd", // [3] -> shade 300 "#a78bfa", // [4] -> shade 400 "#7c3aed", // [5] -> shade 500 "#6d28d9", // [6] -> shade 600 "#5b21b6", // [7] -> shade 700 "#4c1d95", // [8] -> shade 800 "#1e1b4b", // [9] -> shade 950 "#8B5CF6", // [10] -> violet base ]; exports.amberColors = [ "#FFFBEB", // [0] -> shade 50 "#FEF3C7", // [1] -> shade 100 "#FDE68A", // [2] -> shade 200 "#FCD34D", // [3] -> shade 300 "#FBBF24", // [4] -> shade 400 "#f59e0b", // [5] -> shade 500 "#D97706", // [6] -> shade 600 "#92400E", // [7] -> shade 800 "#78350F", // [8] -> shade 900 "#451A03", // [9] -> shade 950 "#F59E0B", // [10] -> amber base ]; exports.limeColors = [ "#f7fee7", // [0] -> shade 50 "#ecfccb", // [1] -> shade 100 "#d9f99d", // [2] -> shade 200 "#bef264", // [3] -> shade 300 "#a3e635", // [4] -> shade 400 "#4d7c0f", // [5] -> shade 600 "#3f6212", // [6] -> shade 700 "#365314", // [7] -> shade 800 "#1a2e05", // [8] -> shade 900 "#0f1903", // [9] -> shade 950 "#84CC16" // [10] -> lime base ]; exports.emeraldColors = [ "#ecfdf5", // [0] -> shade 50 "#d1fae5", // [1] -> shade 100 "#a7f3d0", // [2] -> shade 200 "#6ee7b7", // [3] -> shade 300 "#34d399", // [4] -> shade 400 "#059669", // [5] -> shade 600 "#047857", // [6] -> shade 700 "#065f46", // [7] -> shade 800 "#064e3b", // [8] -> shade 900 "#022c22", // [9] -> shade 950 "#10B981" // [10] -> emerald base ]; exports.tealColors = [ "#f0fdfa", // [0] -> shade 50 "#ccfbf1", // [1] -> shade 100 "#99f6e4", // [2] -> shade 200 "#5eead4", // [3] -> shade 300 "#2dd4bf", // [4] -> shade 400 "#0d9488", // [5] -> shade 600 "#0f766e", // [6] -> shade 700 "#115e59", // [7] -> shade 800 "#134e4a", // [8] -> shade 900 "#042f2e", // [9] -> shade 950 "#14B8A6" // [10] -> teal base ]; exports.cyanColors = [ "#ecfeff", // [0] -> shade 50 "#cffafe", // [1] -> shade 100 "#a5f3fc", // [2] -> shade 200 "#67e8f9", // [3] -> shade 300 "#22d3ee", // [4] -> shade 400 "#0891b2", // [5] -> shade 600 "#0e7490", // [6] -> shade 700 "#155e75", // [7] -> shade 800 "#164e63", // [8] -> shade 900 "#083344", // [9] -> shade 950 "#06B6D4" // [10] -> cyan base ]; exports.skyColors = [ "#f0f9ff", // [0] -> shade 50 "#e0f2fe", // [1] -> shade 100 "#bae6fd", // [2] -> shade 200 "#7dd3fc", // [3] -> shade 300 "#38bdf8", // [4] -> shade 400 "#0284c7", // [5] -> shade 600 "#0369a1", // [6] -> shade 700 "#075985", // [7] -> shade 800 "#0c4a6e", // [8] -> shade 900 "#082f49", // [9] -> shade 950 "#0EA5E9" // [10] -> sky base ]; exports.indigoColors = [ "#eef2ff", // [0] -> shade 50 "#e0e7ff", // [1] -> shade 100 "#c7d2fe", // [2] -> shade 200 "#a5b4fc", // [3] -> shade 300 "#818cf8", // [4] -> shade 400 "#4f46e5", // [5] -> shade 600 "#4338ca", // [6] -> shade 700 "#3730a3", // [7] -> shade 800 "#312e81", // [8] -> shade 900 "#1e1b4b", // [9] -> shade 950 "#6366F1" // [10] -> indigo base ]; exports.purpleColors = [ "#faf5ff", // [0] -> shade 50 "#f3e8ff", // [1] -> shade 100 "#e9d5ff", // [2] -> shade 200 "#d8b4fe", // [3] -> shade 300 "#c084fc", // [4] -> shade 400 "#9333ea", // [5] -> shade 600 "#7e22ce", // [6] -> shade 700 "#6b21a8", // [7] -> shade 800 "#581c87", // [8] -> shade 900 "#2e1065", // [9] -> shade 950 "#A855F7" // [10] -> purple base ]; exports.fuchsiaColors = [ "#fdf4ff", // [0] -> shade 50 "#fae8ff", // [1] -> shade 100 "#f5d0fe", // [2] -> shade 200 "#f0abfc", // [3] -> shade 300 "#e879f9", // [4] -> shade 400 "#c026d3", // [5] -> shade 600 "#a21caf", // [6] -> shade 700 "#86198f", // [7] -> shade 800 "#701a75", // [8] -> shade 900 "#4a044e", // [9] -> shade 950 "#D946EF" // [10] -> fuchsia base ]; exports.pinkColors = [ "#fdf2f8", // [0] -> shade 50 "#fce7f3", // [1] -> shade 100 "#fbcfe8", // [2] -> shade 200 "#f9a8d4", // [3] -> shade 300 "#f472b6", // [4] -> shade 400 "#db2777", // [5] -> shade 600 "#be185d", // [6] -> shade 700 "#9d174d", // [7] -> shade 800 "#831843", // [8] -> shade 900 "#500724", // [9] -> shade 950 "#EC4899" // [10] -> pink base ]; // export const SHADCN_DEFAULT_COLORS = [ // { id: "zinc", name: "Zinc", color: "#71717A", primaryPalette: zincColors, primaryShade: { light: 8, dark: 0 }, secondary: "zinc", secondaryPalette: zincColors }, // { id: "slate", name: "Slate", color: "#64748B", primaryPalette: slateColors, primaryShade: { light: 8, dark: 0 }, secondary: "slate", secondaryPalette: slateColors }, // { id: "stone", name: "Stone", color: "#78716C", primaryPalette: stoneColors, primaryShade: { light: 8, dark: 0 }, secondary: "stone", secondaryPalette: stoneColors}, // { id: "gray", name: "Gray", color: "#6B7280", primaryPalette: grayColors, primaryShade: { light: 8, dark: 0 }, secondary: "gray", secondaryPalette: grayColors }, // { id: "neutral", name: "Neutral", color: "#737373", primaryPalette: neutralColors, primaryShade: { light: 8, dark: 0 }, secondary: "neutral", secondaryPalette: neutralColors }, // { id: "red", name: "Red", color: "#EF4444", primaryPalette: redColors, primaryShade: { light: 5, dark: 5 }, secondary: "neutral", secondaryPalette: neutralColors }, // { id: "rose", name: "Rose", color: "#F43F5E", primaryPalette: roseColors, primaryShade: { light: 5, dark: 5 }, secondary: "stone", secondaryPalette: stoneColors }, // { id: "orange", name: "Orange", color: "#F97316", primaryPalette: orangeColors, primaryShade: { light: 5, dark: 6 }, secondary: "stone", secondaryPalette: stoneColors }, // { id: "green", name: "Green", color: "#10B981", primaryPalette: greenColors, primaryShade: { light: 6, dark: 5 }, secondary: 'stone', secondaryPalette: stoneColors }, // { id: "blue", name: "Blue", color: "#3B82F6", primaryPalette: blueColors, primaryShade: { light: 6, dark: 5 }, secondary: "slate", secondaryPalette: slateColors }, // { id: "yellow", name: "Yellow", color: "#F59E0B", primaryPalette: yellowColors, primaryShade: { light: 4, dark: 4 }, secondary: "stone", secondaryPalette: stoneColors }, // { id: "violet", name: "Violet", color: "#8B5CF6", primaryPalette: violetColors, primaryShade: { light: 5, dark: 6 }, secondary: "gray", secondaryPalette: grayColors }, // ]; exports.MANTINE_DEFAULT_COLORS = [ { id: "blue", name: "Blue", color: "#3B82F6", primaryPalette: [], primaryShade: { light: 6, dark: 6 } }, { id: "gray", name: "Gray", color: "#6B7280", primaryPalette: [], primaryShade: { light: 6, dark: 6 } }, { id: "red", name: "Red", color: "#EF4444", primaryPalette: [], primaryShade: { light: 6, dark: 6 } }, { id: "pink", name: "Pink", color: "#F43F5E", primaryPalette: [], primaryShade: { light: 6, dark: 6 } }, { id: "grape", name: "Grape", color: "#8B5CF6", primaryPalette: [], primaryShade: { light: 6, dark: 6 } }, { id: "violet", name: "Violet", color: "#8B5CF6", primaryPalette: [], primaryShade: { light: 6, dark: 6 } }, { id: "indigo", name: "Indigo", color: "#6366F1", primaryPalette: [], primaryShade: { light: 6, dark: 6 } }, { id: "cyan", name: "Cyan", color: "#22D3EE", primaryPalette: [], primaryShade: { light: 6, dark: 6 } }, { id: "teal", name: "Teal", color: "#14B8A6", primaryPalette: [], primaryShade: { light: 6, dark: 6 } }, { id: "green", name: "Green", color: "#10B981", primaryPalette: [], primaryShade: { light: 6, dark: 6 } }, { id: "lime", name: "Lime", color: "#65A30D", primaryPalette: [], primaryShade: { light: 6, dark: 6 } }, { id: "yellow", name: "Yellow", color: "#F59E0B", primaryPalette: [], primaryShade: { light: 6, dark: 6 } }, { id: "orange", name: "Orange", color: "#F97316", primaryPalette: [], primaryShade: { light: 6, dark: 6 } }, ]; exports.SHADCN_DEFAULT_COLORS = [ { id: "zinc", name: "Zinc", color: "#71717A", primaryPalette: exports.zincColors, primaryShade: { light: 8, dark: 0 }, secondary: "zinc", secondaryPalette: exports.zincColors }, { id: "slate", name: "Slate", color: "#64748B", primaryPalette: exports.slateColors, primaryShade: { light: 8, dark: 0 }, secondary: "slate", secondaryPalette: exports.slateColors }, { id: "gray", name: "Gray", color: "#6B7280", primaryPalette: exports.grayColors, primaryShade: { light: 8, dark: 0 }, secondary: "gray", secondaryPalette: exports.grayColors }, { id: "neutral", name: "Neutral", color: "#737373", primaryPalette: exports.neutralColors, primaryShade: { light: 8, dark: 0 }, secondary: "neutral", secondaryPalette: exports.neutralColors }, { id: "stone", name: "Stone", color: "#78716C", primaryPalette: exports.stoneColors, primaryShade: { light: 8, dark: 0 }, secondary: "stone", secondaryPalette: exports.stoneColors }, { id: "red", name: "Red", color: "#EF4444", primaryPalette: exports.redColors, primaryShade: { light: 5, dark: 5 }, secondary: "neutral", secondaryPalette: exports.neutralColors }, { id: "rose", name: "Rose", color: "#F43F5E", primaryPalette: exports.roseColors, primaryShade: { light: 5, dark: 5 }, secondary: "stone", secondaryPalette: exports.stoneColors }, { id: "orange", name: "Orange", color: "#F97316", primaryPalette: exports.orangeColors, primaryShade: { light: 5, dark: 6 }, secondary: "stone", secondaryPalette: exports.stoneColors }, { id: "amber", name: "Amber", color: "#F59E0B", primaryPalette: exports.amberColors, primaryShade: { light: 5, dark: 5 }, secondary: "stone", secondaryPalette: exports.stoneColors }, { id: "yellow", name: "Yellow", color: "#EAB308", primaryPalette: exports.yellowColors, primaryShade: { light: 4, dark: 4 }, secondary: "stone", secondaryPalette: exports.stoneColors }, { id: "lime", name: "Lime", color: "#84CC16", primaryPalette: exports.limeColors, primaryShade: { light: 5, dark: 4 }, secondary: "stone", secondaryPalette: exports.stoneColors }, { id: "green", name: "Green", color: "#22C55E", primaryPalette: exports.greenColors, primaryShade: { light: 6, dark: 5 }, secondary: "stone", secondaryPalette: exports.stoneColors }, { id: "emerald", name: "Emerald", color: "#10B981", primaryPalette: exports.emeraldColors, primaryShade: { light: 5, dark: 5 }, secondary: "stone", secondaryPalette: exports.stoneColors }, { id: "teal", name: "Teal", color: "#14B8A6", primaryPalette: exports.tealColors, primaryShade: { light: 5, dark: 4 }, secondary: "slate", secondaryPalette: exports.slateColors }, { id: "cyan", name: "Cyan", color: "#06B6D4", primaryPalette: exports.cyanColors, primaryShade: { light: 5, dark: 4 }, secondary: "slate", secondaryPalette: exports.slateColors }, { id: "sky", name: "Sky", color: "#0EA5E9", primaryPalette: exports.skyColors, primaryShade: { light: 5, dark: 4 }, secondary: "slate", secondaryPalette: exports.slateColors }, { id: "blue", name: "Blue", color: "#3B82F6", primaryPalette: exports.blueColors, primaryShade: { light: 6, dark: 5 }, secondary: "slate", secondaryPalette: exports.slateColors }, { id: "indigo", name: "Indigo", color: "#6366F1", primaryPalette: exports.indigoColors, primaryShade: { light: 5, dark: 6 }, secondary: "gray", secondaryPalette: exports.grayColors }, { id: "violet", name: "Violet", color: "#8B5CF6", primaryPalette: exports.violetColors, primaryShade: { light: 5, dark: 6 }, secondary: "gray", secondaryPalette: exports.grayColors }, { id: "purple", name: "Purple", color: "#A855F7", primaryPalette: exports.purpleColors, primaryShade: { light: 5, dark: 6 }, secondary: "gray", secondaryPalette: exports.grayColors }, { id: "fuchsia", name: "Fuchsia", color: "#D946EF", primaryPalette: exports.fuchsiaColors, primaryShade: { light: 5, dark: 7 }, secondary: "gray", secondaryPalette: exports.grayColors }, { id: "pink", name: "Pink", color: "#EC4899", primaryPalette: exports.pinkColors, primaryShade: { light: 5, dark: 6 }, secondary: "gray", secondaryPalette: exports.grayColors }, ]; ================================================ FILE: js/generated/colors.js ================================================ "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.SHADCN_DEFAULT_COLORS = exports.MANTINE_DEFAULT_COLORS = exports.pinkColors = exports.fuchsiaColors = exports.purpleColors = exports.indigoColors = exports.skyColors = exports.cyanColors = exports.tealColors = exports.emeraldColors = exports.limeColors = exports.amberColors = exports.violetColors = exports.yellowColors = exports.blueColors = exports.greenColors = exports.orangeColors = exports.roseColors = exports.redColors = exports.neutralColors = exports.grayColors = exports.stoneColors = exports.slateColors = exports.zincColors = void 0; // Note: 500 shade in tailwind color is not included in the color palette except for orange, green and blue // Color shades in tailwind are 50, 100, 200, 300, 400, 600, 700, 800, 900, 950 exports.zincColors = [ "#fafafa", // [0] -> shade 50 "#f4f4f5", // [1] -> shade 100 "#e4e4e7", // [2] -> shade 200 "#d4d4d8", // [3] -> shade 300 "#a1a1aa", // [4] -> shade 400 "#52525b", // [5] -> shade 600 "#3f3f46", // [6] -> shade 700 "#27272a", // [7] -> shade 800 "#18181b", // [8] -> shade 900 "#09090b", // [9] -> shade 950 "#71717A" // [10] -> zinc base ]; exports.slateColors = [ "#f8fafc", // [0] -> shade 50 "#f1f5f9", // [1] -> shade 100 "#e2e8f0", // [2] -> shade 200 "#cbd5e1", // [3] -> shade 300 "#94a3b8", // [4] -> shade 400 "#475569", // [5] -> shade 600 "#334155", // [6] -> shade 700 "#1e293b", // [7] -> shade 800 "#0f172a", // [8] -> shade 900 "#020817", // [9] -> shade 950 (original tailwind color was #020617) "#64748B" // [10] -> slate base ]; exports.stoneColors = [ "#fafaf9", // [0] -> shade 50 "#f5f5f4", // [1] -> shade 100 "#e7e5e4", // [2] -> shade 200 "#d6d3d1", // [3] -> shade 300 "#a8a29e", // [4] -> shade 400 "#57534e", // [5] -> shade 600 "#44403c", // [6] -> shade 700 "#292524", // [7] -> shade 800 "#1c1917", // [8] -> shade 900 "#0c0a09", // [9] -> shade 950 "#78716C" // [10] -> stone base ]; exports.grayColors = [ "#f9fafb", // [0] -> shade 50 "#f3f4f6", // [1] -> shade 100 "#e5e7eb", // [2] -> shade 200 "#d1d5db", // [3] -> shade 300 "#9ca3af", // [4] -> shade 400 "#4b5563", // [5] -> shade 600 "#374151", // [6] -> shade 700 "#1f2937", // [7] -> shade 800 "#111827", // [8] -> shade 900 "#030712", // [9] -> shade 950 "#6B7280" // [10] -> gray base ]; exports.neutralColors = [ "#fafafa", // [0] -> shade 50 "#f5f5f5", // [1] -> shade 100 "#e5e5e5", // [2] -> shade 200 "#d4d4d4", // [3] -> shade 300 "#a3a3a3", // [4] -> shade 400 "#525252", // [5] -> shade 600 "#404040", // [6] -> shade 700 "#262626", // [7] -> shade 800 "#171717", // [8] -> shade 900 "#0a0a0a", // [9] -> shade 950 "#737373" // [10] -> neutral base ]; exports.redColors = [ "#FEF2F2", // [0] -> shade 50 "#FEE2E2", // [1] -> shade 100 "#FECACA", // [2] -> shade 200 "#FCA5A5", // [3] -> shade 300 "#F87171", // [4] -> shade 400 "#DC2626", // [5] -> shade 600 "#B91C1C", // [6] -> shade 700 "#991B1B", // [7] -> shade 800 "#7F1D1D", // [8] -> shade 900 "#450A0A", // [9] -> shade 950 "#EF4444" // [10] -> red base ]; exports.roseColors = [ "#fff1f2", // [0] -> shade 50 "#ffe4e6", // [1] -> shade 100 "#fecdd3", // [2] -> shade 200 "#fda4af", // [3] -> shade 300 "#fb7185", // [4] -> shade 400 "#e11d48", // [5] -> shade 600 "#be123c", // [6] -> shade 700 "#9f1239", // [7] -> shade 800 "#881337", // [8] -> shade 900 "#4c0519", // [9] -> shade 950 "#F43F5E" // [10] -> base color as rose[10] ]; exports.orangeColors = [ "#fff7ed", // [0] -> shade 50 "#ffedd5", // [1] -> shade 100 "#fed7aa", // [2] -> shade 200 "#fdba74", // [3] -> shade 300 "#fb923c", // [4] -> shade 400 "#f97316", // [5] -> shade 500 "#ea580c", // [6] -> shade 600 "#9a3412", // [7] -> shade 800 "#7c2d12", // [8] -> shade 900 "#431407", // [9] -> shade 950 "#F97316", // [10] -> orange base ]; exports.greenColors = [ "#F0FDF4", // [0] -> shade 50 "#DCFCE7", // [1] -> shade 100 "#BBF7D0", // [2] -> shade 200 "#86EFAC", // [3] -> shade 300 "#4ADE80", // [4] -> shade 400 "#22c55e", // [5] -> shade 500 "#16A34A", // [6] -> shade 600 "#166534", // [7] -> shade 800 "#14532D", // [8] -> shade 900 "#052E16", // [9] -> shade 950 "#10B981", // [10] -> green base ]; exports.blueColors = [ "#eff6ff", // [0] -> shade 50 "#dbeafe", // [1] -> shade 100 "#bfdbfe", // [2] -> shade 200 "#93c5fd", // [3] -> shade 300 "#60a5fa", // [4] -> shade 400 "#3b82f6", // [5] -> shade 500 "#2563eb", // [6] -> shade 600 "#1e40af", // [7] -> shade 800 "#1e3a8a", // [8] -> shade 900 "#172554", // [9] -> shade 950 "#3B82F6", // [10] -> blue base ]; exports.yellowColors = [ "#fefce8", // [0] -> shade 50 "#fef9c3", // [1] -> shade 100 "#fef08a", // [2] -> shade 200 "#fde047", // [3] -> shade 300 "#facc15", // [4] -> shade 400 "#ca8a04", // [5] -> shade 500 "#a16207", // [6] -> shade 600 "#854d0e", // [7] -> shade 700 "#713f12", // [8] -> shade 800 "#3f2c06", // [9] -> shade 950 "#F59E0B", // [10] -> yellow base ]; exports.violetColors = [ "#f5f3ff", // [0] -> shade 50 "#ede9fe", // [1] -> shade 100 "#ddd6fe", // [2] -> shade 200 "#c4b5fd", // [3] -> shade 300 "#a78bfa", // [4] -> shade 400 "#7c3aed", // [5] -> shade 500 "#6d28d9", // [6] -> shade 600 "#5b21b6", // [7] -> shade 700 "#4c1d95", // [8] -> shade 800 "#1e1b4b", // [9] -> shade 950 "#8B5CF6", // [10] -> violet base ]; exports.amberColors = [ "#FFFBEB", // [0] -> shade 50 "#FEF3C7", // [1] -> shade 100 "#FDE68A", // [2] -> shade 200 "#FCD34D", // [3] -> shade 300 "#FBBF24", // [4] -> shade 400 "#f59e0b", // [5] -> shade 500 "#D97706", // [6] -> shade 600 "#92400E", // [7] -> shade 800 "#78350F", // [8] -> shade 900 "#451A03", // [9] -> shade 950 "#F59E0B", // [10] -> amber base ]; exports.limeColors = [ "#f7fee7", // [0] -> shade 50 "#ecfccb", // [1] -> shade 100 "#d9f99d", // [2] -> shade 200 "#bef264", // [3] -> shade 300 "#a3e635", // [4] -> shade 400 "#4d7c0f", // [5] -> shade 600 "#3f6212", // [6] -> shade 700 "#365314", // [7] -> shade 800 "#1a2e05", // [8] -> shade 900 "#0f1903", // [9] -> shade 950 "#84CC16" // [10] -> lime base ]; exports.emeraldColors = [ "#ecfdf5", // [0] -> shade 50 "#d1fae5", // [1] -> shade 100 "#a7f3d0", // [2] -> shade 200 "#6ee7b7", // [3] -> shade 300 "#34d399", // [4] -> shade 400 "#059669", // [5] -> shade 600 "#047857", // [6] -> shade 700 "#065f46", // [7] -> shade 800 "#064e3b", // [8] -> shade 900 "#022c22", // [9] -> shade 950 "#10B981" // [10] -> emerald base ]; exports.tealColors = [ "#f0fdfa", // [0] -> shade 50 "#ccfbf1", // [1] -> shade 100 "#99f6e4", // [2] -> shade 200 "#5eead4", // [3] -> shade 300 "#2dd4bf", // [4] -> shade 400 "#0d9488", // [5] -> shade 600 "#0f766e", // [6] -> shade 700 "#115e59", // [7] -> shade 800 "#134e4a", // [8] -> shade 900 "#042f2e", // [9] -> shade 950 "#14B8A6" // [10] -> teal base ]; exports.cyanColors = [ "#ecfeff", // [0] -> shade 50 "#cffafe", // [1] -> shade 100 "#a5f3fc", // [2] -> shade 200 "#67e8f9", // [3] -> shade 300 "#22d3ee", // [4] -> shade 400 "#0891b2", // [5] -> shade 600 "#0e7490", // [6] -> shade 700 "#155e75", // [7] -> shade 800 "#164e63", // [8] -> shade 900 "#083344", // [9] -> shade 950 "#06B6D4" // [10] -> cyan base ]; exports.skyColors = [ "#f0f9ff", // [0] -> shade 50 "#e0f2fe", // [1] -> shade 100 "#bae6fd", // [2] -> shade 200 "#7dd3fc", // [3] -> shade 300 "#38bdf8", // [4] -> shade 400 "#0284c7", // [5] -> shade 600 "#0369a1", // [6] -> shade 700 "#075985", // [7] -> shade 800 "#0c4a6e", // [8] -> shade 900 "#082f49", // [9] -> shade 950 "#0EA5E9" // [10] -> sky base ]; exports.indigoColors = [ "#eef2ff", // [0] -> shade 50 "#e0e7ff", // [1] -> shade 100 "#c7d2fe", // [2] -> shade 200 "#a5b4fc", // [3] -> shade 300 "#818cf8", // [4] -> shade 400 "#4f46e5", // [5] -> shade 600 "#4338ca", // [6] -> shade 700 "#3730a3", // [7] -> shade 800 "#312e81", // [8] -> shade 900 "#1e1b4b", // [9] -> shade 950 "#6366F1" // [10] -> indigo base ]; exports.purpleColors = [ "#faf5ff", // [0] -> shade 50 "#f3e8ff", // [1] -> shade 100 "#e9d5ff", // [2] -> shade 200 "#d8b4fe", // [3] -> shade 300 "#c084fc", // [4] -> shade 400 "#9333ea", // [5] -> shade 600 "#7e22ce", // [6] -> shade 700 "#6b21a8", // [7] -> shade 800 "#581c87", // [8] -> shade 900 "#2e1065", // [9] -> shade 950 "#A855F7" // [10] -> purple base ]; exports.fuchsiaColors = [ "#fdf4ff", // [0] -> shade 50 "#fae8ff", // [1] -> shade 100 "#f5d0fe", // [2] -> shade 200 "#f0abfc", // [3] -> shade 300 "#e879f9", // [4] -> shade 400 "#c026d3", // [5] -> shade 600 "#a21caf", // [6] -> shade 700 "#86198f", // [7] -> shade 800 "#701a75", // [8] -> shade 900 "#4a044e", // [9] -> shade 950 "#D946EF" // [10] -> fuchsia base ]; exports.pinkColors = [ "#fdf2f8", // [0] -> shade 50 "#fce7f3", // [1] -> shade 100 "#fbcfe8", // [2] -> shade 200 "#f9a8d4", // [3] -> shade 300 "#f472b6", // [4] -> shade 400 "#db2777", // [5] -> shade 600 "#be185d", // [6] -> shade 700 "#9d174d", // [7] -> shade 800 "#831843", // [8] -> shade 900 "#500724", // [9] -> shade 950 "#EC4899" // [10] -> pink base ]; // export const SHADCN_DEFAULT_COLORS = [ // { id: "zinc", name: "Zinc", color: "#71717A", primaryPalette: zincColors, primaryShade: { light: 8, dark: 0 }, secondary: "zinc", secondaryPalette: zincColors }, // { id: "slate", name: "Slate", color: "#64748B", primaryPalette: slateColors, primaryShade: { light: 8, dark: 0 }, secondary: "slate", secondaryPalette: slateColors }, // { id: "stone", name: "Stone", color: "#78716C", primaryPalette: stoneColors, primaryShade: { light: 8, dark: 0 }, secondary: "stone", secondaryPalette: stoneColors}, // { id: "gray", name: "Gray", color: "#6B7280", primaryPalette: grayColors, primaryShade: { light: 8, dark: 0 }, secondary: "gray", secondaryPalette: grayColors }, // { id: "neutral", name: "Neutral", color: "#737373", primaryPalette: neutralColors, primaryShade: { light: 8, dark: 0 }, secondary: "neutral", secondaryPalette: neutralColors }, // { id: "red", name: "Red", color: "#EF4444", primaryPalette: redColors, primaryShade: { light: 5, dark: 5 }, secondary: "neutral", secondaryPalette: neutralColors }, // { id: "rose", name: "Rose", color: "#F43F5E", primaryPalette: roseColors, primaryShade: { light: 5, dark: 5 }, secondary: "stone", secondaryPalette: stoneColors }, // { id: "orange", name: "Orange", color: "#F97316", primaryPalette: orangeColors, primaryShade: { light: 5, dark: 6 }, secondary: "stone", secondaryPalette: stoneColors }, // { id: "green", name: "Green", color: "#10B981", primaryPalette: greenColors, primaryShade: { light: 6, dark: 5 }, secondary: 'stone', secondaryPalette: stoneColors }, // { id: "blue", name: "Blue", color: "#3B82F6", primaryPalette: blueColors, primaryShade: { light: 6, dark: 5 }, secondary: "slate", secondaryPalette: slateColors }, // { id: "yellow", name: "Yellow", color: "#F59E0B", primaryPalette: yellowColors, primaryShade: { light: 4, dark: 4 }, secondary: "stone", secondaryPalette: stoneColors }, // { id: "violet", name: "Violet", color: "#8B5CF6", primaryPalette: violetColors, primaryShade: { light: 5, dark: 6 }, secondary: "gray", secondaryPalette: grayColors }, // ]; exports.MANTINE_DEFAULT_COLORS = [ { id: "blue", name: "Blue", color: "#3B82F6", primaryPalette: [], primaryShade: { light: 6, dark: 6 } }, { id: "gray", name: "Gray", color: "#6B7280", primaryPalette: [], primaryShade: { light: 6, dark: 6 } }, { id: "red", name: "Red", color: "#EF4444", primaryPalette: [], primaryShade: { light: 6, dark: 6 } }, { id: "pink", name: "Pink", color: "#F43F5E", primaryPalette: [], primaryShade: { light: 6, dark: 6 } }, { id: "grape", name: "Grape", color: "#8B5CF6", primaryPalette: [], primaryShade: { light: 6, dark: 6 } }, { id: "violet", name: "Violet", color: "#8B5CF6", primaryPalette: [], primaryShade: { light: 6, dark: 6 } }, { id: "indigo", name: "Indigo", color: "#6366F1", primaryPalette: [], primaryShade: { light: 6, dark: 6 } }, { id: "cyan", name: "Cyan", color: "#22D3EE", primaryPalette: [], primaryShade: { light: 6, dark: 6 } }, { id: "teal", name: "Teal", color: "#14B8A6", primaryPalette: [], primaryShade: { light: 6, dark: 6 } }, { id: "green", name: "Green", color: "#10B981", primaryPalette: [], primaryShade: { light: 6, dark: 6 } }, { id: "lime", name: "Lime", color: "#65A30D", primaryPalette: [], primaryShade: { light: 6, dark: 6 } }, { id: "yellow", name: "Yellow", color: "#F59E0B", primaryPalette: [], primaryShade: { light: 6, dark: 6 } }, { id: "orange", name: "Orange", color: "#F97316", primaryPalette: [], primaryShade: { light: 6, dark: 6 } }, ]; exports.SHADCN_DEFAULT_COLORS = [ { id: "zinc", name: "Zinc", color: "#71717A", primaryPalette: exports.zincColors, primaryShade: { light: 8, dark: 0 }, secondary: "zinc", secondaryPalette: exports.zincColors }, { id: "slate", name: "Slate", color: "#64748B", primaryPalette: exports.slateColors, primaryShade: { light: 8, dark: 0 }, secondary: "slate", secondaryPalette: exports.slateColors }, { id: "gray", name: "Gray", color: "#6B7280", primaryPalette: exports.grayColors, primaryShade: { light: 8, dark: 0 }, secondary: "gray", secondaryPalette: exports.grayColors }, { id: "neutral", name: "Neutral", color: "#737373", primaryPalette: exports.neutralColors, primaryShade: { light: 8, dark: 0 }, secondary: "neutral", secondaryPalette: exports.neutralColors }, { id: "stone", name: "Stone", color: "#78716C", primaryPalette: exports.stoneColors, primaryShade: { light: 8, dark: 0 }, secondary: "stone", secondaryPalette: exports.stoneColors }, { id: "red", name: "Red", color: "#EF4444", primaryPalette: exports.redColors, primaryShade: { light: 5, dark: 5 }, secondary: "neutral", secondaryPalette: exports.neutralColors }, { id: "rose", name: "Rose", color: "#F43F5E", primaryPalette: exports.roseColors, primaryShade: { light: 5, dark: 5 }, secondary: "stone", secondaryPalette: exports.stoneColors }, { id: "orange", name: "Orange", color: "#F97316", primaryPalette: exports.orangeColors, primaryShade: { light: 5, dark: 6 }, secondary: "stone", secondaryPalette: exports.stoneColors }, { id: "amber", name: "Amber", color: "#F59E0B", primaryPalette: exports.amberColors, primaryShade: { light: 5, dark: 5 }, secondary: "stone", secondaryPalette: exports.stoneColors }, { id: "yellow", name: "Yellow", color: "#EAB308", primaryPalette: exports.yellowColors, primaryShade: { light: 4, dark: 4 }, secondary: "stone", secondaryPalette: exports.stoneColors }, { id: "lime", name: "Lime", color: "#84CC16", primaryPalette: exports.limeColors, primaryShade: { light: 5, dark: 4 }, secondary: "stone", secondaryPalette: exports.stoneColors }, { id: "green", name: "Green", color: "#22C55E", primaryPalette: exports.greenColors, primaryShade: { light: 6, dark: 5 }, secondary: "stone", secondaryPalette: exports.stoneColors }, { id: "emerald", name: "Emerald", color: "#10B981", primaryPalette: exports.emeraldColors, primaryShade: { light: 5, dark: 5 }, secondary: "stone", secondaryPalette: exports.stoneColors }, { id: "teal", name: "Teal", color: "#14B8A6", primaryPalette: exports.tealColors, primaryShade: { light: 5, dark: 4 }, secondary: "slate", secondaryPalette: exports.slateColors }, { id: "cyan", name: "Cyan", color: "#06B6D4", primaryPalette: exports.cyanColors, primaryShade: { light: 5, dark: 4 }, secondary: "slate", secondaryPalette: exports.slateColors }, { id: "sky", name: "Sky", color: "#0EA5E9", primaryPalette: exports.skyColors, primaryShade: { light: 5, dark: 4 }, secondary: "slate", secondaryPalette: exports.slateColors }, { id: "blue", name: "Blue", color: "#3B82F6", primaryPalette: exports.blueColors, primaryShade: { light: 6, dark: 5 }, secondary: "slate", secondaryPalette: exports.slateColors }, { id: "indigo", name: "Indigo", color: "#6366F1", primaryPalette: exports.indigoColors, primaryShade: { light: 5, dark: 6 }, secondary: "gray", secondaryPalette: exports.grayColors }, { id: "violet", name: "Violet", color: "#8B5CF6", primaryPalette: exports.violetColors, primaryShade: { light: 5, dark: 6 }, secondary: "gray", secondaryPalette: exports.grayColors }, { id: "purple", name: "Purple", color: "#A855F7", primaryPalette: exports.purpleColors, primaryShade: { light: 5, dark: 6 }, secondary: "gray", secondaryPalette: exports.grayColors }, { id: "fuchsia", name: "Fuchsia", color: "#D946EF", primaryPalette: exports.fuchsiaColors, primaryShade: { light: 5, dark: 7 }, secondary: "gray", secondaryPalette: exports.grayColors }, { id: "pink", name: "Pink", color: "#EC4899", primaryPalette: exports.pinkColors, primaryShade: { light: 5, dark: 6 }, secondary: "gray", secondaryPalette: exports.grayColors }, ]; ================================================ FILE: js/generated/theme-functions.cjs ================================================ "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.getShadcnInputBg = exports.getShadcnCardClassname = exports.getDefaultBorderColorNight = exports.getDefaultBorderColorDay = exports.getSecondaryLightColorNight = exports.getSecondaryLightColorDay = exports.getPrimaryContrastColorNight = exports.getPrimaryContrastColorDay = void 0; exports.generateShadcnCSSFilledColorVariables = generateShadcnCSSFilledColorVariables; exports.getPrimaryColorLight = getPrimaryColorLight; exports.getPrimaryColorLightHover = getPrimaryColorLightHover; exports.getPrimaryColorLightColor = getPrimaryColorLightColor; exports.generateShadcnCSSLightColorVariables = generateShadcnCSSLightColorVariables; exports.generateShadcnCSSOutlineColorVariables = generateShadcnCSSOutlineColorVariables; exports.generateShadcnCSSContrastColorVariables = generateShadcnCSSContrastColorVariables; var core_1 = require("@mantine/core"); var colors_1 = require("./colors.cjs"); var getPrimaryContrastColorDay = function (color) { var colorObj = colors_1.SHADCN_DEFAULT_COLORS.find(function (c) { return c.id === color; }); if (color === 'zinc' || color === 'slate' || color === 'stone' || color === 'gray' || color === 'neutral' || color === 'red' || color === 'rose') { return "var(--mantine-color-".concat(colorObj === null || colorObj === void 0 ? void 0 : colorObj.id, "-0)"); } else if (color === 'orange' || color === 'blue' || color === 'violet') { return "var(--mantine-color-".concat(colorObj === null || colorObj === void 0 ? void 0 : colorObj.secondary, "-0)"); } else if (color === 'green') { return "var(--mantine-color-rose-0)"; } else if (color === 'yellow') { return '#422006'; } else { return "var(--mantine-color-".concat(colorObj === null || colorObj === void 0 ? void 0 : colorObj.id, "-0)"); } }; exports.getPrimaryContrastColorDay = getPrimaryContrastColorDay; var getPrimaryContrastColorNight = function (color) { var colorObj = colors_1.SHADCN_DEFAULT_COLORS.find(function (c) { return c.id === color; }); if (color === 'zinc' || color === ' slate' || color === 'stone' || color === 'gray' || color === 'neutral') { return "var(--mantine-color-".concat(colorObj === null || colorObj === void 0 ? void 0 : colorObj.secondary, "-8)"); } else if (color === 'red' || color === 'rose') { return "var(--mantine-color-".concat(colorObj === null || colorObj === void 0 ? void 0 : colorObj.id, "-0)"); } else if (color === 'orange' || color === 'violet' || color === 'emerald' || color === 'purple' || color === 'indigo' || color === 'pink' || color === 'fuchsia' || color === 'blue') { return "var(--mantine-color-".concat(colorObj === null || colorObj === void 0 ? void 0 : colorObj.secondary, "-0)"); } else if (color === 'green') { return "var(--mantine-color-".concat(colorObj === null || colorObj === void 0 ? void 0 : colorObj.id, "-9)"); } else if (color === 'yellow') { return '#422006'; } else { return "var(--mantine-color-".concat(colorObj === null || colorObj === void 0 ? void 0 : colorObj.secondary, "-8)"); } }; exports.getPrimaryContrastColorNight = getPrimaryContrastColorNight; var getSecondaryLightColorDay = function (color) { if (color === 'rose' || color === 'green') { return 'var(--mantine-color-zinc-1)'; } else { return 'var(--mantine-color-secondary-1)'; } }; exports.getSecondaryLightColorDay = getSecondaryLightColorDay; var getSecondaryLightColorNight = function (color) { if (color === 'rose' || color === 'green') { return 'var(--mantine-color-secondary-7)'; } else { return 'var(--mantine-color-secondary-7)'; } }; exports.getSecondaryLightColorNight = getSecondaryLightColorNight; var getDefaultBorderColorDay = function (color) { if (color === 'rose' || color === 'green') { return 'var(--mantine-color-zinc-2)'; } else { return 'var(--mantine-color-secondary-2)'; } }; exports.getDefaultBorderColorDay = getDefaultBorderColorDay; var getDefaultBorderColorNight = function (color) { if (color === 'rose' || color === 'green') { return 'var(--mantine-color-zinc-7)'; } else { return 'var(--mantine-color-secondary-7)'; } }; exports.getDefaultBorderColorNight = getDefaultBorderColorNight; var getShadcnCardClassname = function (color) { if (color === 'rose' || color === 'green') { return 'globalMantineCardRoot__roseGreen'; } else { return 'globalMantineCardRoot'; } }; exports.getShadcnCardClassname = getShadcnCardClassname; var getShadcnInputBg = function (color) { if (color === 'rose' || color === 'green') { return 'var(--mantine-color-secondary-filled)'; } else { return 'var(--mantine-color-default)'; } }; exports.getShadcnInputBg = getShadcnInputBg; function generateShadcnCSSFilledColorVariables(mode, isGeneration) { if (isGeneration === void 0) { isGeneration = false; } var lightMode = {}; var darkMode = {}; colors_1.SHADCN_DEFAULT_COLORS.forEach(function (_a) { var id = _a.id, primaryShade = _a.primaryShade; lightMode["--mantine-color-".concat(id, "-filled")] = "var(--mantine-color-".concat(id, "-").concat(primaryShade.light, ")"); lightMode["--mantine-color-".concat(id, "-filled-hover")] = isGeneration ? "{alpha('var(--mantine-color-".concat(id, "-").concat(primaryShade.light, ")', 0.9)}") : (0, core_1.alpha)("var(--mantine-color-".concat(id, "-").concat(primaryShade.light, ")"), 0.9); darkMode["--mantine-color-".concat(id, "-filled")] = "var(--mantine-color-".concat(id, "-").concat(primaryShade.dark, ")"); darkMode["--mantine-color-".concat(id, "-filled-hover")] = isGeneration ? "{alpha('var(--mantine-color-".concat(id, "-").concat(primaryShade.dark, ")', 0.9)}") : (0, core_1.alpha)("var(--mantine-color-".concat(id, "-").concat(primaryShade.dark, ")"), 0.9); }); if (mode === 'light') { return lightMode; } return darkMode; } function getPrimaryColorLight(color) { return "var(--mantine-color-".concat(color, "-light)"); } ; function getPrimaryColorLightHover(color) { return "var(--mantine-color-".concat(color, "-light-hover)"); } function getPrimaryColorLightColor(color) { return "var(--mantine-color-".concat(color, "-light-color)"); } function generateShadcnCSSLightColorVariables(mode, isGeneration) { if (isGeneration === void 0) { isGeneration = false; } var lightMode = {}; var darkMode = {}; colors_1.SHADCN_DEFAULT_COLORS.forEach(function (_a) { var id = _a.id; lightMode["--mantine-color-".concat(id, "-light")] = isGeneration ? "{alpha('var(--mantine-color-".concat(id, "-4)', 0.1)}") : (0, core_1.alpha)("var(--mantine-color-".concat(id, "-4)"), 0.1); lightMode["--mantine-color-".concat(id, "-light-hover")] = isGeneration ? "{alpha('var(--mantine-color-".concat(id, "-light)', 0.8)}") : (0, core_1.alpha)("var(--mantine-color-".concat(id, "-light)"), 0.8); lightMode["--mantine-color-".concat(id, "-light-color")] = "var(--mantine-color-".concat(id, "-6)"); darkMode["--mantine-color-".concat(id, "-light")] = isGeneration ? "{alpha('var(--mantine-color-".concat(id, "-4)', 0.15)}") : (0, core_1.alpha)("var(--mantine-color-".concat(id, "-4)"), 0.15); darkMode["--mantine-color-".concat(id, "-light-hover")] = isGeneration ? "{alpha('var(--mantine-color-".concat(id, "-light)', 0.8)}") : (0, core_1.alpha)("var(--mantine-color-".concat(id, "-light)"), 0.8); darkMode["--mantine-color-".concat(id, "-light-color")] = "var(--mantine-color-".concat(id, "-3)"); }); if (mode === 'light') { return lightMode; } return darkMode; } function generateShadcnCSSOutlineColorVariables(mode, isGeneration) { if (isGeneration === void 0) { isGeneration = false; } var lightMode = {}; var darkMode = {}; colors_1.SHADCN_DEFAULT_COLORS.forEach(function (_a) { var id = _a.id, primaryShade = _a.primaryShade; lightMode["--mantine-color-".concat(id, "-outline")] = "var(--mantine-color-".concat(id, "-").concat(primaryShade.light, ")"); lightMode["--mantine-color-".concat(id, "-outline-hover")] = isGeneration ? "{alpha('var(--mantine-color-".concat(id, "-4)', 0.1)}") : (0, core_1.alpha)("var(--mantine-color-".concat(id, "-4)"), 0.1); darkMode["--mantine-color-".concat(id, "-outline")] = "var(--mantine-color-".concat(id, "-").concat(primaryShade.dark, ")"); darkMode["--mantine-color-".concat(id, "-outline-hover")] = isGeneration ? "{alpha('var(--mantine-color-".concat(id, "-4)', 0.15)}") : (0, core_1.alpha)("var(--mantine-color-".concat(id, "-4)"), 0.15); }); if (mode === 'light') { return lightMode; } return darkMode; } function generateShadcnCSSContrastColorVariables(mode) { var lightMode = {}; var darkMode = {}; colors_1.SHADCN_DEFAULT_COLORS.forEach(function (_a) { var id = _a.id; lightMode["--mantine-color-".concat(id, "-contrast")] = (0, exports.getPrimaryContrastColorDay)(id); darkMode["--mantine-color-".concat(id, "-contrast")] = (0, exports.getPrimaryContrastColorNight)(id); }); if (mode === 'light') { return lightMode; } return darkMode; } ================================================ FILE: js/scripts/compileTS.cjs ================================================ const { exec } = require("child_process"); const path = require("path"); const fs = require("fs"); // Function to convert .ts file to .js and save it in the current script directory function convertTsToJs(tsFilePath) { const outputDir = path.resolve(__dirname, "../generated"); // Set output directory as the current directory of this script const command = `tsc ${tsFilePath} --outDir ${outputDir} --allowJs --esModuleInterop`; exec(command, (error, stdout, stderr) => { if (error) { console.error(`Error converting file: ${tsFilePath}`); console.error(stderr); } else { const fileName = path.basename(tsFilePath, ".ts"); const jsFilePath = path.join(outputDir, `${fileName}.js`); const cjsFilePath = path.join(outputDir, `${fileName}.cjs`); // Rename .js to .cjs if (fs.existsSync(jsFilePath)) { fs.renameSync(jsFilePath, cjsFilePath); console.log(`Successfully converted and saved as: ${cjsFilePath}`); // Fix imports in the .cjs file let fileContent = fs.readFileSync(cjsFilePath, "utf8"); fileContent = fileContent.replace(/require\("\.\/(.*?)"\)/g, 'require("./$1.cjs")'); fs.writeFileSync(cjsFilePath, fileContent, "utf8"); console.log(`Fixed import paths in: ${cjsFilePath}`); } else { console.error(`Expected .js file not found at: ${jsFilePath}`); } } }); } // Convert specific TypeScript files convertTsToJs(path.join(__dirname, "../../src/utils/colors.ts")); convertTsToJs(path.join(__dirname, "../../src/utils/theme-functions.ts")); ================================================ FILE: js/scripts/components.cjs ================================================ const path = require("path"); const fs = require("fs"); function convertCase(string) { const splitted = string .replace(/([a-z0-9])([A-Z])/g, "$1 $2") .toLowerCase() .split(" "); return splitted.join("-"); } function removeReact(input) { const lines = input.split("\n"); if (lines[0].includes("import React from 'react';")) { lines.shift(); } else if (lines[0].includes("import React")) { const remainingImports = lines[0].replace(/import React[^;]+;/, ""); lines[0] = remainingImports; } return lines.join("\n"); } function getComponentCode(componentFolder, componentName) { const componentContents = fs .readdirSync(componentFolder) .filter( (item) => (item.endsWith(".tsx") && !item.endsWith(".story.tsx")) || item.endsWith(".ts") || item.endsWith(".css") ); const mainFileContent = removeReact(fs.readFileSync(path.join(componentFolder, `${componentName}.tsx`), "utf-8")); const otherFilesContent = componentContents .filter((file) => file !== `${componentName}.tsx`) .map((file) => ({ name: file, content: removeReact(fs.readFileSync(path.join(componentFolder, file), "utf-8")), })); return [ { fileName: `${componentName}.tsx`, language: "tsx", code: mainFileContent }, ...otherFilesContent.map(({ name, content }) => ({ fileName: name, language: name.endsWith(".css") ? "scss" : "tsx", code: content, })), ]; } function convertComponentName(input) { return input .split("-") // Split the string by hyphens .map((word) => word.charAt(0).toUpperCase() + word.slice(1)) // Capitalize each word .join(""); // Join the words back together } function getAllComponents() { const rootFolder = path.resolve(__dirname, "../../src/feature/blocks/lib/"); // Set output directory as the current directory of this script const paths = fs.readdirSync(rootFolder); const components = paths .map((componentName) => { const convertedComponentName = convertComponentName(componentName); const componentDirectory = path.join(rootFolder, componentName); const componentAttributes = path.join(componentDirectory, "attributes.json"); if (fs.lstatSync(componentDirectory).isDirectory()) { const code = getComponentCode(componentDirectory, componentName); const attributes = JSON.parse(fs.readFileSync(componentAttributes, "utf8")); return { component: convertedComponentName, slug: convertCase(convertedComponentName), code, attributes, }; } return null; }) .filter((c) => c); const sortedComponents = [...components].sort((a, b) => a.attributes.order - b.attributes.order); if (sortedComponents) { const outputDir = path.join(__dirname, `../../src/feature/blocks/data/components.ts`); const content = `export const components = ${JSON.stringify(sortedComponents, null, 2)};`; fs.writeFileSync(outputDir, content, "utf-8"); console.log("Components generate successfully"); } } getAllComponents(); ================================================ FILE: js/scripts/generateCssVariableResolver.cjs ================================================ const fs = require("fs"); const path = require("path"); const { MANTINE_DEFAULT_COLORS, SHADCN_DEFAULT_COLORS } = require("../generated/colors.cjs"); const { getPrimaryColorLight, getPrimaryContrastColorDay, getSecondaryLightColorDay, getDefaultBorderColorNight, getPrimaryContrastColorNight, getSecondaryLightColorNight, getDefaultBorderColorDay, generateShadcnCSSFilledColorVariables, generateShadcnCSSLightColorVariables, generateShadcnCSSOutlineColorVariables, generateShadcnCSSContrastColorVariables, getPrimaryColorLightHover, getPrimaryColorLightColor } = require("../generated/theme-functions.cjs"); function generateCSSVariableResolvers(style, colors, inputFilePath, outputFileName) { const fileContent = fs.readFileSync(inputFilePath, "utf-8"); // Replace `${ ` with {{literal-open}} and `}` with {{literal-close}} const escapedContent = fileContent .replace(/\`\$\{\s*/g, "{{literal-open}}") // Replace `${ ` with {{literal-open}} .replace(/\s*\}\`/g, "{{literal-close}}"); // Remove the import statement for the theme functions file const updatedContent = escapedContent .split("\n") .filter( (line) => !/^import.*\.\.\/\.\.\/utils\/theme-functions/.test(line.trim()) ) .join("\n"); function cssStringify(obj) { return JSON.stringify(obj, null, 2).slice(1, -1).replace(/\n/g, '\n ').trim(); } function replaceCSSPlaceholders(template, color) { if (style === "shadcn") { return template .replace("(theme)", "()") .replaceAll("getPrimaryColorLight(theme.primaryColor)", `'${getPrimaryColorLight(color.id)}'`) .replaceAll("getPrimaryColorLightHover(theme.primaryColor)", `'${getPrimaryColorLightHover(color.id)}'`) .replaceAll("getPrimaryColorLightColor(theme.primaryColor)", `'${getPrimaryColorLightColor(color.id)}'`) .replaceAll("getPrimaryContrastColorDay(theme.primaryColor)", `'${getPrimaryContrastColorDay(color.id)}'`) .replaceAll("getPrimaryContrastColorNight(theme.primaryColor)", `'${getPrimaryContrastColorNight(color.id)}'`) .replaceAll("getSecondaryLightColorDay(theme.primaryColor)", `'${getSecondaryLightColorDay(color.id)}'`) .replaceAll("getSecondaryLightColorNight(theme.primaryColor)", `'${getSecondaryLightColorNight(color.id)}'`) .replaceAll("getDefaultBorderColorDay(theme.primaryColor)", `'${getDefaultBorderColorDay(color.id)}'`) .replaceAll("getDefaultBorderColorNight(theme.primaryColor)", `'${getDefaultBorderColorNight(color.id)}'`) .replaceAll(`...generateShadcnCSSFilledColorVariables('light')`, cssStringify(generateShadcnCSSFilledColorVariables('light', true))) .replaceAll(`...generateShadcnCSSFilledColorVariables('dark')`, cssStringify(generateShadcnCSSFilledColorVariables('dark', true))) .replaceAll(`...generateShadcnCSSLightColorVariables('light')`, cssStringify(generateShadcnCSSLightColorVariables('light', true))) .replaceAll(`...generateShadcnCSSLightColorVariables('dark')`, cssStringify(generateShadcnCSSLightColorVariables('dark', true))) .replaceAll(`...generateShadcnCSSOutlineColorVariables('light')`, cssStringify(generateShadcnCSSOutlineColorVariables('light', true))) .replaceAll(`...generateShadcnCSSOutlineColorVariables('dark')`, cssStringify(generateShadcnCSSOutlineColorVariables('dark', true))) .replaceAll(`...generateShadcnCSSContrastColorVariables('light')`, cssStringify(generateShadcnCSSContrastColorVariables('light'))) .replaceAll(`...generateShadcnCSSContrastColorVariables('dark')`, cssStringify(generateShadcnCSSContrastColorVariables('dark'))); } else { return template; } } let generatedCSSResolvers = {}; // Iterate through each color object in the array colors.forEach((color) => { const replacedContent = replaceCSSPlaceholders(updatedContent, color); generatedCSSResolvers[color.id] = `\`${replacedContent}\``; }); // Format the object as TypeScript content for export const tsContent = `export const ${outputFileName} = {\n` + Object.keys(generatedCSSResolvers) .map((key) => { return ` ${key}: ${generatedCSSResolvers[key]}`; }) .join(",\n") + `\n};`; const outputDir = path.join(__dirname, `../../src/themes/generated/${outputFileName}.ts`); // Write the final content to the file fs.writeFileSync(outputDir, tsContent, "utf-8"); console.log(`File created: ${outputDir}`); } // Generate CSS variable resolvers for Mantine and Shadcn using the provided color arrays generateCSSVariableResolvers( "mantine", MANTINE_DEFAULT_COLORS, path.join(__dirname, "../../src/themes/mantine/mantine-css-variable-resolver.ts"), "generatedMantineCssVariableResolver" ); generateCSSVariableResolvers( "shadcn", SHADCN_DEFAULT_COLORS, path.join(__dirname, "../../src/themes/shadcn/shadcn-css-variable-resolver.ts"), "generatedShadcnCssVariableResolver" ); ================================================ FILE: js/scripts/generateStyles.cjs ================================================ const fs = require("fs"); const path = require("path"); function generateCssStyles(location, outputFileName) { // Read the content of the CSS file const fileContent = fs.readFileSync(location, "utf-8"); // Format the content as a TypeScript export statement const tsContent = `export const ${outputFileName} = \`${fileContent}\`;`; // Define the output directory const outputDir = path.join(__dirname, `../../src/themes/generated/${outputFileName}.ts`); // Write the final content to the file fs.writeFileSync(outputDir, tsContent, "utf-8"); console.log(`CSS styles file created: ${outputDir}`); } generateCssStyles( path.join(__dirname, "../../src/styles/shadcn-styles.css"), "generatedShadcnCssStyles" ); generateCssStyles( path.join(__dirname, "../../src/styles/mantine-styles.css"), "generatedMantineCssStyles" ); ================================================ FILE: js/scripts/generateThemes.cjs ================================================ const fs = require("fs"); const path = require("path"); const { MANTINE_DEFAULT_COLORS, SHADCN_DEFAULT_COLORS } = require("../generated/colors.cjs"); function generateThemes(style, colors, inputFilePath, outputFileName) { const fileContent = fs.readFileSync(inputFilePath, "utf-8"); function updateContent(content) { let updatedContent = content; // Replace template literals with custom markers updatedContent = updatedContent.replace(/\`\$\{\s*/g, "{{literal-open}}").replace(/\s*\}\`/g, "{{literal-close}}"); // Remove import lines for theme-functions and colors updatedContent = updatedContent .split("\n") .filter( (line) => !/^import.*\.\.\/\.\.\/utils\/theme-functions/.test(line.trim()) && !/^import.*\.\.\/\.\.\/utils\/colors/.test(line.trim()) ) .join("\n"); // Remove the prettier-ignore comments updatedContent = updatedContent.replaceAll("// prettier-ignore", ""); // Add the colors declaration before the export line if (style === "shadcn") { const colorDeclarations = SHADCN_DEFAULT_COLORS.map((color) => { return `const ${color.id}Colors: MantineColorsTuple = ${JSON.stringify(color.primaryPalette)};`; }).join("\n"); const exportLine = "export const shadcnTheme: MantineThemeOverride = createTheme({"; updatedContent = updatedContent.replace(exportLine, `${colorDeclarations}\n\n${exportLine}`); } return updatedContent; } function replacePlaceholders(template, color) { let updatedTemplate = template; if (style === "shadcn") { updatedTemplate = updatedTemplate .replace("primary: zincColors", `primary: ${color.id}Colors`) .replace("secondary: zincColors", `secondary: ${color.secondary || color.id}Colors`) .replace("dark: zincColors", `dark: ${color.secondary || color.id}Colors`) .replace("{ light: 9, dark: 0 }", JSON.stringify(color.primaryShade)); } else { updatedTemplate = updatedTemplate.replace(`primaryColor: "blue"`, `primaryColor: "${color.id}"`); } // Escape backticks and `${}` updatedTemplate = updatedTemplate .replace(/`/g, "\\`") // Escape backticks .replace(/\$\{/g, "\\${") // Escape `${` return updatedTemplate; } let generatedColors = {}; // Iterate through each color object in the array colors.forEach((color) => { const updatedContent = updateContent(fileContent); const replacedContent = replacePlaceholders(updatedContent, color); generatedColors[color.id] = `\`${replacedContent}\``; }); // Format the object as TypeScript content for export const tsContent = `export const ${outputFileName} = {\n` + Object.keys(generatedColors) .map((key) => { return ` ${key}: ${generatedColors[key]}`; }) .join(",\n") + `\n};`; const outputDir = path.join(__dirname, `../../src/themes/generated/${outputFileName}.ts`); // Write the final content to the file fs.writeFileSync(outputDir, tsContent, "utf-8"); console.log(`File created: ${outputDir}`); } // Generate themes for Mantine and Shadcn using the provided color arrays generateThemes( "mantine", MANTINE_DEFAULT_COLORS, path.join(__dirname, "../../src/themes/mantine/mantine-theme.ts"), "generatedMantineTheme" ); generateThemes( "shadcn", SHADCN_DEFAULT_COLORS, path.join(__dirname, "../../src/themes/shadcn/shadcn-theme.ts"), "generatedShadcnTheme" ); ================================================ FILE: next.config.js ================================================ /** @type {import('next').NextConfig} */ import path from "node:path"; const nextConfig = { output: "export", // Outputs a Single-Page Application (SPA). distDir: "./dist", // Changes the build output directory to `./dist/`. basePath: process.env.NEXT_PUBLIC_BASE_PATH, // Sets the base path to `/some-base-path`. sassOptions: { implementation: "sass-embedded", additionalData: `@use "./_mantine" as mantine;`, }, }; export default nextConfig; ================================================ FILE: package.json ================================================ { "name": "mantine-modern-theme", "private": true, "version": "0.0.0", "type": "module", "engines": { "node": ">=20.9.0" }, "scripts": { "dev": "next dev", "build": "tsc -b && next build", "start": "next start", "lint": "eslint .", "preview": "next preview", "compileTs": "node ./js/scripts/compileTs.cjs", "generateThemes": "node ./js/scripts/generateThemes.cjs", "generateCssVariableResolver": "node ./js/scripts/generateCssVariableResolver.cjs", "generateStyles": "node ./js/scripts/generateStyles.cjs", "generate": "npm run compileTs && npm run generateThemes && npm run generateCssVariableResolver && npm run generateStyles", "generateComponents": "node ./js/scripts/components.cjs" }, "dependencies": { "@mantine/charts": "^7.15.2", "@mantine/code-highlight": "^7.15.2", "@mantine/core": "^7.15.2", "@mantine/dates": "^7.15.2", "@mantine/form": "^7.15.2", "@mantine/hooks": "^7.15.2", "@mantine/spotlight": "^7.15.2", "@mantinex/dev-icons": "^1.1.0", "@mantinex/mantine-header": "^1.1.0", "@mantinex/shiki": "^1.1.0", "@radix-ui/react-icons": "^1.3.0", "@tabler/icons-react": "^3.19.0", "@tanstack/react-router": "^1.82.1", "@tanstack/react-table": "^8.20.5", "clsx": "^2.1.1", "dayjs": "^1.11.13", "next": "^15.1.0", "react": "^18.3.1", "react-dom": "^18.3.1", "recharts": "^2.15.0", "sass": "^1.80.6", "sass-loader": "^16.0.3", "shiki": "^1.23.0", "shikiji": "^0.7.6" }, "devDependencies": { "@eslint/js": "^9.11.1", "@tanstack/router-devtools": "^1.82.1", "@tanstack/router-plugin": "^1.81.9", "@types/node": "^22.9.1", "@types/react": "^18.3.10", "@types/react-dom": "^18.3.0", "autoprefixer": "^10.4.20", "eslint": "^9.11.1", "eslint-config-prettier": "^9.1.0", "eslint-plugin-react-hooks": "^5.1.0-rc.0", "eslint-plugin-react-refresh": "^0.4.12", "globals": "^15.9.0", "postcss": "^8.4.49", "postcss-preset-mantine": "^1.17.0", "postcss-simple-vars": "^7.0.1", "prettier": "3.3.3", "sass-embedded": "^1.81.0", "tailwindcss": "^3.4.15", "typescript": "^5.5.3", "typescript-eslint": "^8.7.0", "vite-plugin-node-polyfills": "^0.22.0" } } ================================================ FILE: postcss.config.js ================================================ export default { plugins: { tailwindcss: {}, autoprefixer: {}, "postcss-preset-mantine": {}, "postcss-simple-vars": { variables: { "mantine-breakpoint-xs": "36em", "mantine-breakpoint-sm": "48em", "mantine-breakpoint-md": "62em", "mantine-breakpoint-lg": "75em", "mantine-breakpoint-xl": "88em", }, }, }, }; ================================================ FILE: public/_redirects ================================================ /* /index.html 200 ================================================ FILE: public/robots.txt ================================================ # Allow all crawlers User-agent: * Allow: / # Sitemap location Sitemap: https://mantinehub.com/sitemap.xml # Disallow admin and private routes Disallow: /api/ Disallow: /_next/ Disallow: /static/ ================================================ FILE: src/_mantine.scss ================================================ @use "sass:math"; // Define variables for your breakpoints, // values must be the same as in your theme $mantine-breakpoint-xs: "36em"; $mantine-breakpoint-sm: "48em"; $mantine-breakpoint-md: "62em"; $mantine-breakpoint-lg: "75em"; $mantine-breakpoint-xl: "88em"; @function rem($value) { @return #{math.div(math.div($value, $value * 0 + 1), 16)}rem; } @mixin light { [data-mantine-color-scheme="light"] & { @content; } } @mixin dark { [data-mantine-color-scheme="dark"] & { @content; } } @mixin hover { @media (hover: hover) { &:hover { @content; } } @media (hover: none) { &:active { @content; } } } @mixin smaller-than($breakpoint) { @media (max-width: $breakpoint) { @content; } } @mixin larger-than($breakpoint) { @media (min-width: $breakpoint) { @content; } } // Add direction mixins if you need rtl support @mixin rtl { [dir="rtl"] & { @content; } } @mixin ltr { [dir="ltr"] & { @content; } } ================================================ FILE: src/app/about/page.tsx ================================================ "use client"; import { AboutPage } from "@/components/custom/about/about"; import PageLayout from "@/components/layouts/page-layout"; import { Box, Button, Group, Space, Stack } from "@mantine/core"; export default function Page() { return ( ); } ================================================ FILE: src/app/blocks/[slug]/page.tsx ================================================ import CategoryPage from "@/feature/blocks/components/categories/category-page"; import { CATEGORIES_SLUGS, getCategoryData } from "@/feature/blocks/data/categories"; import { getComponentsByCategory } from "@/feature/blocks/data/fn"; import { Title } from "@mantine/core"; // Return a list of `params` to populate the [slug] dynamic segment export async function generateStaticParams() { return CATEGORIES_SLUGS.map((slug) => ({ slug: slug, })); } export default async function Page({ params }: { params: Promise<{ slug: string }> }) { const { slug } = await params; const category = getCategoryData(slug); const components = getComponentsByCategory()[slug]; return (
{category?.name} components
); } ================================================ FILE: src/app/blocks/layout.tsx ================================================ import PageLayout from "@/components/layouts/page-layout"; import BlockComponents from "@/feature/blocks/components/block-components/block-components"; export default function BlockPageLayout({ children }: { children: React.ReactNode }) { return ( {children} ); } ================================================ FILE: src/app/blocks/page.tsx ================================================ "use client"; import { CATEGORIES } from "@/feature/blocks/data/categories"; import { redirect } from "next/navigation"; export default function Page() { // Redirect to the first category by default const defaultCategory = CATEGORIES[0]?.categories[0]?.slug; if (defaultCategory) { redirect(`/blocks/${defaultCategory}`); } return <>; } ================================================ FILE: src/app/feedback/page.tsx ================================================ "use client"; import { TestimonialGrid } from "@/components/custom/testimonial/testimonial-grid"; import PageLayout from "@/components/layouts/page-layout"; import { testimonialItems } from "@/utils/testimonials"; import { Button, Group, Space, Stack } from "@mantine/core"; export default function Page() { return ( ); } ================================================ FILE: src/app/how-to-use/page.tsx ================================================ "use client"; import { HowToUsePage } from "@/components/custom/how-to-use/how-to-use"; import PageLayout from "@/components/layouts/page-layout"; import { Box, Space, Stack } from "@mantine/core"; export default function Page() { return ( ); } ================================================ FILE: src/app/layout.tsx ================================================ import type { Metadata } from "next"; import "@mantine/core/styles.css"; import "@mantine/charts/styles.css"; import "@mantine/dates/styles.css"; import "@mantine/spotlight/styles.css"; import "@mantinex/shiki/styles.css"; import "@mantine/code-highlight/styles.css"; import "../styles/shadcn-styles.css"; import "../styles/fonts.css"; import "../styles/index.scss"; import { ColorSchemeScript, mantineHtmlProps } from "@mantine/core"; import { ThemeProvider } from "@/theme-context"; import GoogleAnalytics from "@/components/GoogleAnalytics"; import MicrosoftClarity from "@/components/MicrosoftClarity"; export const metadata: Metadata = { metadataBase: new URL('https://mantinehub.com'), title: { default: "MantineHub - Modern preconfigured themes, blocks, templates and more.", template: "%s | MantineHub" }, description: `MantineHub is an open-source tool to create modern, customizable shadcn inspired themes for Mantine UI components. Easily adjust styles, colors, radius, and light/dark modes, and export the theme object for quick integration into any Mantine project.`, keywords: [ "Mantine", "UI Components", "Theme Builder", "React", "Next.js", "Web Development", "Frontend", "Design System", "Custom Themes", "shadcn", "UI/UX", "Component Library" ], authors: [{ name: "MantineHub Team" }], creator: "MantineHub", publisher: "MantineHub", formatDetection: { email: false, address: false, telephone: false, }, icons: { icon: '/favicon.svg', apple: '/favicon.svg', }, openGraph: { title: "MantineHub", description: "MantineHub is an open-source tool to create modern, customizable shadcn inspired themes for Mantine UI components. Easily adjust styles, colors, radius, and light/dark modes, and export the theme object for quick integration into any Mantine project.", url: "https://mantinehub.com", siteName: "MantineHub", images: [ { url: "https://private-user-images.githubusercontent.com/53397244/375193930-0b673eec-ed49-4928-a021-5bee7d0ec8e3.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzI1MDExOTEsIm5iZiI6MTczMjUwMDg5MSwicGF0aCI6Ii81MzM5NzI0NC8zNzUxOTM5MzAtMGI2NzNlZWMtZWQ0OS00OTI4LWEwMjEtNWJlZTdkMGVjOGUzLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDExMjUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQxMTI1VDAyMTQ1MVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTk5MDdmMjg5M2YyOTljYmE0MzljOGU4ZTFiNWE5OTdhMDU2OTg2MWQ1MWYzMGFkYjFjMmNmOGRhZjMxYjA4NWYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.E0xeyrPWy02alRycR2WZpQ2nbxgjNSshSE5n6Q28lck", width: 1200, height: 630, alt: "MantineHub Preview", }, ], locale: "en_US", type: "website", }, twitter: { card: "summary_large_image", title: "MantineHub", description: "MantineHub is an open-source tool to create modern, customizable shadcn inspired themes for Mantine UI components. Easily adjust styles, colors, radius, and light/dark modes, and export the theme object for quick integration into any Mantine project.", images: ["https://private-user-images.githubusercontent.com/53397244/375193930-0b673eec-ed49-4928-a021-5bee7d0ec8e3.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzI1MDExOTEsIm5iZiI6MTczMjUwMDg5MSwicGF0aCI6Ii81MzM5NzI0NC8zNzUxOTM5MzAtMGI2NzNlZWMtZWQ0OS00OTI4LWEwMjEtNWJlZTdkMGVjOGUzLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDExMjUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQxMTI1VDAyMTQ1MVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTk5MDdmMjg5M2YyOTljYmE0MzljOGU4ZTFiNWE5OTdhMDU2OTg2MWQ1MWYzMGFkYjFjMmNmOGRhZjMxYjA4NWYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.E0xeyrPWy02alRycR2WZpQ2nbxgjNSshSE5n6Q28lck"], creator: "@mantinehub", site: "@mantinehub", }, robots: { index: true, follow: true, googleBot: { index: true, follow: true, 'max-video-preview': -1, 'max-image-preview': 'large', 'max-snippet': -1, }, }, verification: { google: '-9BanVY_agkYef8a_hUF9btoOrREhuEDXwgnLGIjC98', // Add your Google Search Console verification code }, alternates: { canonical: 'https://mantinehub.com', }, viewport: "width=device-width, initial-scale=1.0", }; export default function RootLayout({ children }: { children: React.ReactNode }) { return (
{children} {/* {children} */}
); } ================================================ FILE: src/app/loading.tsx ================================================ import { Center, Loader } from "@mantine/core"; export default function Loading() { return (
); } ================================================ FILE: src/app/page.tsx ================================================ "use client"; import MantineCards from "@/components/custom/theme-example-cards/mantine-cards"; import PageLayout from "@/components/layouts/page-layout"; import { Anchor } from "@mantine/core"; export default function Page() { return ( Save time on styling with our ready-to-use themes for{" "} Mantine {" "} components. Just copy, paste, and watch your app come to life. } > ); } ================================================ FILE: src/app/playground/page.tsx ================================================ "use client"; import ComponentsDemo from "@/components/custom/components-demo/components-demo"; import PageLayout from "@/components/layouts/page-layout"; export default function Page() { return ( ); } ================================================ FILE: src/app/sitemap.ts ================================================ import { MetadataRoute } from 'next' // Configure for static export export const dynamic = 'force-static' export const revalidate = 3600 // Revalidate every hour export default function sitemap(): MetadataRoute.Sitemap { const baseUrl = 'https://mantinehub.com' return [ { url: baseUrl, lastModified: new Date(), changeFrequency: 'daily', priority: 1, }, { url: `${baseUrl}/blocks`, lastModified: new Date(), changeFrequency: 'daily', priority: 0.9, }, { url: `${baseUrl}/about`, lastModified: new Date(), changeFrequency: 'monthly', priority: 0.6, }, { url: `${baseUrl}/how-to-use`, lastModified: new Date(), changeFrequency: 'monthly', priority: 0.6, }, { url: `${baseUrl}/playground`, lastModified: new Date(), changeFrequency: 'monthly', priority: 0.7, }, { url: `${baseUrl}/feedback`, lastModified: new Date(), changeFrequency: 'monthly', priority: 0.5, }, ] } ================================================ FILE: src/components/GoogleAnalytics.tsx ================================================ 'use client'; import Script from 'next/script'; export default function GoogleAnalytics() { return ( <> ); } ================================================ FILE: src/components/MicrosoftClarity.tsx ================================================ 'use client'; import Script from 'next/script'; export default function MicrosoftClarity() { return ( ); } ================================================ FILE: src/components/custom/about/about.tsx ================================================ import { Anchor, Box, Divider, List, Stack, Text, Title } from "@mantine/core"; export const AboutPage = () => { return ( {/* About Mantine Theme Builder */} 🤘 Motivation Mantine is an amazing library with a wide range of components, extensive customization options, and a vibrant community. It offers a developer experience unmatched by many React libraries. However, its default styling can feel less modern compared to frameworks like shadcn and Radix, which many companies prefer. Setting up colors and styles to match those modern aesthetics can be time-consuming and may hinder projects that need a quick start.
Enter MantineHub. Initially created as an experimental project to simplify the process of modernizing Mantine's styling, MantineHub offers pre-configured themes inspired by Shadcn, Radix, and more. With MantineHub, developers can quickly integrate modern styling into their projects by copying and pasting the theme configuration.
Due to the overwhelming positive feedback and community endorsment we’ve received, MantineHub has evolved into a comprehensive toolkit. It now supports all Mantine components and introduces exciting new features like Blocks—pre-built UI components designed to seamlessly work with the generated themes. 📌 What We Offer 🎨 Themes Our theme library eliminates the process of creating modern styles for Mantine projects. Choose from a variety of predefined themes—like Shadcn-inspired designs, Tailwind-like colors (zinc, amber, rose, and red), and even Glassmorphic themes from Radix—and customize them to fit your project needs. The themes are fully compatible with all Mantine components, ensuring a cohesive and polished design for your application.
🧩 Blocks Blocks are pre-built, ready-to-use UI components designed for specific features that developers can effortlessly integrate into their projects. These components work seamlessly with the themes generated by MantineHub, saving you time and effort.
Currently, Blocks are an experimental feature with a limited library. Based on user feedback, we plan to expand this collection significantly, making it an extensive resource for developers. Contributions and feature requests are welcome to help grow this library.
⛹️‍♂️ Playground The Playground is an interactive tool that allows you to see how pre-built themes look on individual Mantine components. Customize component-specific props—like variant, color, and other features—in real-time and explore how each change affects the component's appearance. The Playground ensures you can visualize and fine-tune your design choices with ease, making it a valuable addition to the development process. {/* 🎨 Understanding the Color Schema Mantine offers a robust and flexible theming system that we have fully leveraged to create modern, cohesive designs. The themes and color schemes you see on this site are a result of carefully crafted configurations, making it easy to integrate modern aesthetics. Understanding how these variables and customizations work is essential to fully unlock the potential of your theme.
To learn about these variables, their roles, and best practices for theming, refer to our detailed blogs where we explain the color schema and provide practical examples. Our blogs cover how to approach theming your components, how to use these variables effectively, and how to create a cohesive design system for your project.

We encourage you to read through these articles if you're looking to customize this theme or understand the best way to utilize the predefined color variables. This will help you maintain consistency and visual harmony throughout your project. */} 🚀 Future Plans MantineHub(previously, Mantine Theme Builder) is now more than a theming tool—it's an evolving ecosystem for Mantine developers. New features are in the pipeline to further enhance the developer experience, streamline workflows, and solidify Mantine as the go-to UI library for React projects.

Stay tuned for exciting updates, and let us know what features you'd like to see next! 🧑‍💻 Contributors This project is maintained by{" "} Abhishek-S-Lal {" "} and{" "} gopukr . Contributions from the community are welcome and appreciated. Please see our{" "} CONTRIBUTING.md file {" "} for more information on how to get involved. 🤝 Join us MantineHub thrives on community feedback and contributions. If you find MantineHub helpful, please share your thoughts, and request or contribute features. Together, we can make MantineHub a complimentary tool to make UI development with Mantine much more faster and easier.
If you find this project useful, please consider Starring the repository on{" "} GitHub Sharing the project with your friends and colleagues Contributing to the project Buy me a coffee
); }; ================================================ FILE: src/components/custom/blocks/coming-soon/coming-soon.module.css ================================================ .container { padding: 4rem 1rem; } .title { font-size: 8rem; font-weight: 800; background: linear-gradient(135deg, var(--mantine-color-blue-9) 0%, var(--mantine-color-indigo-9) 100%); margin-bottom: 1.5rem; } .socialButton { width: 48px; height: 48px; border-radius: 24px; padding: 0; display: flex; align-items: center; justify-content: center; } .socialButton:hover { transform: translateY(-2px); } .socialIcon { width: 24px; height: 24px; color: var(--mantine-color-dimmed); } .successMessage { text-align: center; color: var(--mantine-primary-color-7); font-size: 1.25rem; font-weight: 500; padding: 1rem; border-radius: var(--mantine-radius-md); } ================================================ FILE: src/components/custom/blocks/coming-soon/coming-soon.tsx ================================================ import { Box, Container, Text, Group, Stack } from "@mantine/core"; // import { MagnifyingGlassIcon, TwitterLogoIcon, InstagramLogoIcon, GitHubLogoIcon } from "@radix-ui/react-icons"; import styles from "./coming-soon.module.css"; export const ComingSoon = () => { // const [email, setEmail] = useState(""); // const [isSubscribed, setIsSubscribed] = useState(false); // const handleSubscribe = () => { // if (email && email.includes("@")) { // setIsSubscribed(true); // setEmail(""); // // Here you would typically handle the email subscription // } // }; // const handleSocialClick = (url: string) => { // window.open(url, "_blank", "noopener,noreferrer"); // }; return ( Coming Soon We're working hard to bring you more awesome block. Stay tuned for updates! {/* {!isSubscribed ? ( setEmail(e.target.value)} placeholder="Enter your email" leftSection={} size="lg" /> ) : ( Thanks for subscribing! We'll keep you posted. )} */} {/* */} ); }; ================================================ FILE: src/components/custom/change-theme-section/change-theme-button.tsx ================================================ import { Box, Button, ColorSwatch, Group, MantineColorShade, MantineColorsTuple, Popover, SimpleGrid, Stack, Text, useMantineColorScheme, } from "@mantine/core"; import { useLocalStorage } from "@mantine/hooks"; import { InfoCircledIcon, MoonIcon, ResetIcon, SunIcon } from "@radix-ui/react-icons"; import * as React from "react"; import { Tooltip } from "@mantine/core"; import { } from "@radix-ui/react-icons"; import { useTheme } from "../../../theme-context"; import { mantineTheme } from "../../../themes/mantine/mantine-theme"; import { shadcnTheme } from "../../../themes/shadcn/shadcn-theme"; import { MANTINE_DEFAULT_COLORS, SHADCN_DEFAULT_COLORS } from "../../../utils/colors"; import { getSecondaryPalette } from "../../../utils/functions"; export interface IThemeConfig { style: string; color: string; radius: string; } const BUTTON_LABEL = "Change Theme"; export default function ChangeThemeButton() { return ( ); } function Customizer() { const { setTheme } = useTheme(); const { colorScheme, setColorScheme } = useMantineColorScheme(); const [localThemeConfig, setLocalThemeConfig, removeLocalThemeConfig] = useLocalStorage({ key: "mantine-theme", }); const [baseColors, setBaseColors] = React.useState(SHADCN_DEFAULT_COLORS); const [config, setConfig] = React.useState({ style: "shadcn", color: SHADCN_DEFAULT_COLORS[0].id, radius: "sm", }); React.useEffect(() => { if (localThemeConfig) { setConfig(localThemeConfig); if (localThemeConfig?.style === "shadcn") { setBaseColors(SHADCN_DEFAULT_COLORS); } else { setBaseColors(MANTINE_DEFAULT_COLORS); } } }, [localThemeConfig]); const mantineColorButtons = baseColors.map((color: any) => ( )); return ( {BUTTON_LABEL} Pick a style and color for your components. Style Color {mantineColorButtons} Radius {["xs", "sm", "md", "lg", "xl"].map((value: string) => { return ( ); })} Mode ); } ================================================ FILE: src/components/custom/change-theme-section/change-theme-section.tsx ================================================ import { Button, Group } from "@mantine/core"; import ChangeThemeButton from "./change-theme-button"; import CopyThemeCodeButton from "./copy-theme-code-button"; const ChangeThemeSection = ({ isBlockPage = false }: { isBlockPage?: boolean }) => { return ( {isBlockPage ? ( ) : ( )} ); }; export default ChangeThemeSection; ================================================ FILE: src/components/custom/change-theme-section/copy-theme-code-button.tsx ================================================ import { CodeHighlightTabs } from "@mantine/code-highlight"; import { ActionIcon, Anchor, Box, Button, CloseIcon, Flex, Group, MantineThemeOverride, Modal, ScrollArea, Text, Title, } from "@mantine/core"; import { useDisclosure } from "@mantine/hooks"; import { CssIcon, TypeScriptIcon } from "@mantinex/dev-icons"; import { ExternalLinkIcon } from "@radix-ui/react-icons"; import { IconInfoCircle } from "@tabler/icons-react"; import { useTheme } from "../../../theme-context"; import { generatedMantineCssStyles } from "../../../themes/generated/generatedMantineCssStyles"; import { generatedMantineCssVariableResolver } from "../../../themes/generated/generatedMantineCssVariableResolver"; import { generatedMantineTheme } from "../../../themes/generated/generatedMantineTheme"; import { generatedShadcnCssStyles } from "../../../themes/generated/generatedShadcnCssStyles"; import { generatedShadcnCssVariableResolver } from "../../../themes/generated/generatedShadcnCssVariableResolver"; import { generatedShadcnTheme } from "../../../themes/generated/generatedShadcnTheme"; import { removeStringPlaceholders } from "../../../utils/functions"; const CopyThemeCodeButton = () => { const { theme } = useTheme(); const [opened, { open, close }] = useDisclosure(false); const tsIcon = ; const cssIcon = ; const getGeneratedTheme = (theme: MantineThemeOverride) => { if (theme.other?.style === "mantine") { const color = theme.primaryColor as keyof typeof generatedMantineTheme; return generatedMantineTheme[color]; } if (theme.other?.style === "shadcn") { const color = theme.primaryColor as keyof typeof generatedShadcnTheme; return generatedShadcnTheme[color]; } }; const getGeneratedCssVariables = (theme: MantineThemeOverride) => { if (theme.other?.style === "mantine") { const color = theme.primaryColor as keyof typeof generatedMantineTheme; return generatedMantineCssVariableResolver[color]; } if (theme.other?.style === "shadcn") { const color = theme.primaryColor as keyof typeof generatedShadcnTheme; return removeStringPlaceholders(generatedShadcnCssVariableResolver[color]); } }; const getGeneratedCssStyles = (theme: MantineThemeOverride) => { if (theme.other?.style === "mantine") { return generatedMantineCssStyles; } if (theme.other?.style === "shadcn") { return generatedShadcnCssStyles; } }; return ( <> Current Theme Font How To use ); }; export default CopyThemeCodeButton; ================================================ FILE: src/components/custom/components-demo/buttons/action-icon-demo.tsx ================================================ import { ActionIcon } from '@mantine/core'; import { IconAdjustments } from '@tabler/icons-react'; import { interactiveVariantsControl } from '../../../../utils/variants-data'; import { MantineDemo } from '../../../mantine/demo'; const code = ` import { ActionIcon } from '@mantine/core'; import { IconAdjustments } from '@tabler/icons-react'; function Demo() { return ( ); } `; function Wrapper(props: any) { return ( ); } export const actionIconDemo: MantineDemo = { type: 'configurator', component: Wrapper, code, centered: true, controls: [ interactiveVariantsControl, { prop: 'color', type: 'color', initialValue: "", libraryValue: "" }, { prop: 'size', type: 'size', initialValue: 'md', libraryValue: 'md' }, { prop: 'radius', type: 'size', initialValue: 'sm', libraryValue: 'sm' }, { prop: 'disabled', type: 'boolean', initialValue: false, libraryValue: false }, ], }; ================================================ FILE: src/components/custom/components-demo/buttons/button-demo.tsx ================================================ import { Button } from '@mantine/core'; import { interactiveVariantsControl } from '../../../../utils/variants-data'; import { MantineDemo } from '../../../mantine/demo'; const code = ` import { Button } from '@mantine/core'; function Demo() { return Button; } `; function Wrapper(props: any) { return ; } export const buttonDemo: MantineDemo = { type: 'configurator', component: Wrapper, code, centered: true, controls: [ interactiveVariantsControl, { type: 'color', prop: 'color', initialValue: "", libraryValue: "" }, { type: 'size', prop: 'size', initialValue: 'sm', libraryValue: 'sm' }, { type: 'size', prop: 'radius', initialValue: 'sm', libraryValue: 'sm' }, { prop: 'disabled', type: 'boolean', initialValue: false, libraryValue: false }, { prop: 'loading', type: 'boolean', initialValue: false, libraryValue: false }, ], }; ================================================ FILE: src/components/custom/components-demo/buttons/close-button-demo.tsx ================================================ import { CloseButton } from '@mantine/core'; import { MantineDemo } from '../../../mantine/demo'; const code = ` import { CloseButton } from '@mantine/core'; function Demo() { return ; } `; function Wrapper(props: any) { return ; } export const closeButtonDemo: MantineDemo = { type: 'configurator', component: Wrapper, code, centered: true, controls: [ { prop: 'size', type: 'size', initialValue: 'md', libraryValue: 'md' }, { prop: 'variant', type: 'segmented', data: ['transparent', 'subtle'], libraryValue: 'subtle', initialValue: 'subtle', }, ], }; ================================================ FILE: src/components/custom/components-demo/charts/area-chart-demo.tsx ================================================ import { AreaChart } from '@mantine/charts'; import { MantineDemo } from '../../../mantine/demo'; import { data, dataCode } from './data/_area-data'; const code = ` import { AreaChart } from '@mantine/charts'; import { data } from './data'; function Demo() { return ( ); } `; function Wrapper(props: any) { return ( ); } export const areaChartDemo: MantineDemo = { type: 'configurator', component: Wrapper, code: [ { code, language: 'tsx', fileName: 'Demo.tsx' }, { code: dataCode, language: 'tsx', fileName: 'data.ts' }, ], controls: [ { type: 'select', prop: 'curveType', initialValue: 'linear', libraryValue: null, data: [ { value: 'bump', label: 'bump' }, { value: 'linear', label: 'linear' }, { value: 'natural', label: 'natural' }, { value: 'monotone', label: 'monotone' }, { value: 'step', label: 'step' }, { value: 'stepBefore', label: 'stepBefore' }, { value: 'stepAfter', label: 'stepAfter' }, ], }, { type: 'segmented', prop: 'tickLine', initialValue: 'y', libraryValue: 'y', transformLabel: false, data: [ { value: 'x', label: 'x' }, { value: 'y', label: 'y' }, { value: 'xy', label: 'xy' }, { value: 'none', label: 'none' }, ], }, { type: 'segmented', prop: 'gridAxis', initialValue: 'x', libraryValue: 'x', transformLabel: false, data: [ { value: 'x', label: 'x' }, { value: 'y', label: 'y' }, { value: 'xy', label: 'xy' }, { value: 'none', label: 'none' }, ], }, { type: 'boolean', prop: 'withGradient', initialValue: true, libraryValue: true, }, { type: 'boolean', prop: 'withXAxis', initialValue: true, libraryValue: true, }, { type: 'boolean', prop: 'withYAxis', initialValue: true, libraryValue: true, }, { type: 'boolean', prop: 'withDots', initialValue: true, libraryValue: true, }, ], }; ================================================ FILE: src/components/custom/components-demo/charts/bar-chart-demo.tsx ================================================ import { BarChart } from '@mantine/charts'; import { MantineDemo } from '../../../mantine/demo'; import { data, dataCode } from './data/_bar-data'; const code = ` import { BarChart } from '@mantine/charts'; import { data } from './data'; function Demo() { return ( ); } `; function Wrapper(props: any) { return ( ); } export const barchartDemo: MantineDemo = { type: 'configurator', component: Wrapper, code: [ { code, language: 'tsx', fileName: 'Demo.tsx' }, { code: dataCode, language: 'tsx', fileName: 'data.ts' }, ], controls: [ { type: 'segmented', prop: 'tickLine', initialValue: 'y', libraryValue: '__', transformLabel: false, data: [ { value: 'x', label: 'x' }, { value: 'y', label: 'y' }, { value: 'xy', label: 'xy' }, { value: 'none', label: 'none' }, ], }, { type: 'segmented', prop: 'gridAxis', initialValue: 'x', libraryValue: 'x', transformLabel: false, data: [ { value: 'x', label: 'x' }, { value: 'y', label: 'y' }, { value: 'xy', label: 'xy' }, { value: 'none', label: 'none' }, ], }, { type: 'boolean', prop: 'withXAxis', initialValue: true, libraryValue: true, }, { type: 'boolean', prop: 'withYAxis', initialValue: true, libraryValue: true, }, ], }; ================================================ FILE: src/components/custom/components-demo/charts/bubble-chart-demo.tsx ================================================ import { BubbleChart } from '@mantine/charts'; import { MantineDemo } from '../../../mantine/demo'; import { data, dataCode } from './data/_bubble-data'; const code = ` import { BubbleChart } from '@mantine/charts'; import { data } from './data'; function Demo() { return ( ); } `; function Demo(props: any) { return ( ); } export const bubbleChartDemo: MantineDemo = { type: 'configurator', component: Demo, code: [ { code, language: 'tsx', fileName: 'Demo.tsx' }, { code: dataCode, language: 'tsx', fileName: 'data.ts' }, ], controls: [{ type: 'color', prop: 'color', initialValue: '', libraryValue: '' }], }; ================================================ FILE: src/components/custom/components-demo/charts/composite-chart-demo.tsx ================================================ import { CompositeChart } from '@mantine/charts'; import { data, dataCode } from './data/_area-data'; import { MantineDemo } from '../../../mantine/demo'; const code = ` import { CompositeChart } from '@mantine/charts'; import { data } from './data'; function Demo() { return ( ); } `; function Wrapper(props: any) { return ( ); } export const compositeChartDemo: MantineDemo = { type: 'configurator', component: Wrapper, code: [ { code, language: 'tsx', fileName: 'Demo.tsx' }, { code: dataCode, language: 'tsx', fileName: 'data.ts' }, ], controls: [ { type: 'select', prop: 'curveType', initialValue: 'linear', libraryValue: null, data: [ { value: 'bump', label: 'bump' }, { value: 'linear', label: 'linear' }, { value: 'natural', label: 'natural' }, { value: 'monotone', label: 'monotone' }, { value: 'step', label: 'step' }, { value: 'stepBefore', label: 'stepBefore' }, { value: 'stepAfter', label: 'stepAfter' }, ], }, { type: 'segmented', prop: 'tickLine', initialValue: 'y', libraryValue: 'y', transformLabel: false, data: [ { value: 'x', label: 'x' }, { value: 'y', label: 'y' }, { value: 'xy', label: 'xy' }, { value: 'none', label: 'none' }, ], }, { type: 'segmented', prop: 'gridAxis', initialValue: 'x', libraryValue: 'x', transformLabel: false, data: [ { value: 'x', label: 'x' }, { value: 'y', label: 'y' }, { value: 'xy', label: 'xy' }, { value: 'none', label: 'none' }, ], }, { type: 'boolean', prop: 'withXAxis', initialValue: true, libraryValue: true, }, { type: 'boolean', prop: 'withYAxis', initialValue: true, libraryValue: true, }, { type: 'boolean', prop: 'withDots', initialValue: true, libraryValue: true, }, ], }; ================================================ FILE: src/components/custom/components-demo/charts/data/_area-data.ts ================================================ export const data = [ { date: 'Mar 22', Apples: 2890, Oranges: 2338, Tomatoes: 2452, }, { date: 'Mar 23', Apples: 2756, Oranges: 2103, Tomatoes: 2402, }, { date: 'Mar 24', Apples: 3322, Oranges: 986, Tomatoes: 1821, }, { date: 'Mar 25', Apples: 3470, Oranges: 2108, Tomatoes: 2809, }, { date: 'Mar 26', Apples: 3129, Oranges: 1726, Tomatoes: 2290, }, ]; export const dataCode = ` export const data = [ { date: 'Mar 22', Apples: 2890, Oranges: 2338, Tomatoes: 2452, }, { date: 'Mar 23', Apples: 2756, Oranges: 2103, Tomatoes: 2402, }, { date: 'Mar 24', Apples: 3322, Oranges: 986, Tomatoes: 1821, }, { date: 'Mar 25', Apples: 3470, Oranges: 2108, Tomatoes: 2809, }, { date: 'Mar 26', Apples: 3129, Oranges: 1726, Tomatoes: 2290, }, ]; `; export const splitData = [ { date: 'Mar 22', Apples: 110, }, { date: 'Mar 23', Apples: 60, }, { date: 'Mar 24', Apples: -80, }, { date: 'Mar 25', Apples: 40, }, { date: 'Mar 26', Apples: -40, }, { date: 'Mar 27', Apples: 80, }, ]; export const splitDataCode = ` export const data = [ { date: 'Mar 22', Apples: 110, }, { date: 'Mar 23', Apples: 60, }, { date: 'Mar 24', Apples: -80, }, { date: 'Mar 25', Apples: 40, }, { date: 'Mar 26', Apples: -40, }, { date: 'Mar 27', Apples: 80, }, ]; `; export const connectNullsData = [ { date: 'Mar 22', Apples: 110, }, { date: 'Mar 23', Apples: 60, }, { date: 'Mar 24', Apples: 80, }, { date: 'Mar 25', Apples: null, }, { date: 'Mar 26', Apples: null, }, { date: 'Mar 27', Apples: 40, }, { date: 'Mar 28', Apples: 120, }, { date: 'Mar 29', Apples: 80, }, ]; export const connectNullsDataCode = ` export const data = [ { date: 'Mar 22', Apples: 110, }, { date: 'Mar 23', Apples: 60, }, { date: 'Mar 24', Apples: 80, }, { date: 'Mar 25', Apples: null, }, { date: 'Mar 26', Apples: null, }, { date: 'Mar 27', Apples: 40, }, { date: 'Mar 28', Apples: 120, }, { date: 'Mar 29', Apples: 80, }, ]; `; export const yScaleData = [ { date: 'Mar 22', Apples: 50, }, { date: 'Mar 23', Apples: 60, }, { date: 'Mar 24', Apples: 40, }, { date: 'Mar 25', Apples: 30, }, { date: 'Mar 26', Apples: 0, }, { date: 'Mar 27', Apples: 20, }, { date: 'Mar 28', Apples: 20, }, { date: 'Mar 29', Apples: 10, }, ]; export const yScaleDataCode = ` export const data = [ { date: 'Mar 22', Apples: 50, }, { date: 'Mar 23', Apples: 60, }, { date: 'Mar 24', Apples: 40, }, { date: 'Mar 25', Apples: 30, }, { date: 'Mar 26', Apples: 0, }, { date: 'Mar 27', Apples: 20, }, { date: 'Mar 28', Apples: 20, }, { date: 'Mar 29', Apples: 10, }, ]; `; export const biaxialData = [ { name: 'Page A', uv: 4000, pv: 2400 }, { name: 'Page B', uv: 3000, pv: 1398 }, { name: 'Page C', uv: 2000, pv: 9800 }, { name: 'Page D', uv: 2780, pv: 3908 }, { name: 'Page E', uv: 1890, pv: 4800 }, { name: 'Page F', uv: 2390, pv: 3800 }, { name: 'Page G', uv: 3490, pv: 4300 }, ]; export const biaxialDataCode = ` export const biaxialData = [ { name: 'Page A', uv: 4000, pv: 2400 }, { name: 'Page B', uv: 3000, pv: 1398 }, { name: 'Page C', uv: 2000, pv: 9800 }, { name: 'Page D', uv: 2780, pv: 3908 }, { name: 'Page E', uv: 1890, pv: 4800 }, { name: 'Page F', uv: 2390, pv: 3800 }, { name: 'Page G', uv: 3490, pv: 4300 }, ]; `; ================================================ FILE: src/components/custom/components-demo/charts/data/_bar-data.ts ================================================ export const data = [ { month: 'January', Smartphones: 1200, Laptops: 900, Tablets: 200 }, { month: 'February', Smartphones: 1900, Laptops: 1200, Tablets: 400 }, { month: 'March', Smartphones: 400, Laptops: 1000, Tablets: 200 }, { month: 'April', Smartphones: 1000, Laptops: 200, Tablets: 800 }, { month: 'May', Smartphones: 800, Laptops: 1400, Tablets: 1200 }, { month: 'June', Smartphones: 750, Laptops: 600, Tablets: 1000 }, ]; export const dataCode = ` export const data = [ { month: 'January', Smartphones: 1200, Laptops: 900, Tablets: 200 }, { month: 'February', Smartphones: 1900, Laptops: 1200, Tablets: 400 }, { month: 'March', Smartphones: 400, Laptops: 1000, Tablets: 200 }, { month: 'April', Smartphones: 1000, Laptops: 200, Tablets: 800 }, { month: 'May', Smartphones: 800, Laptops: 1400, Tablets: 1200 }, { month: 'June', Smartphones: 750, Laptops: 600, Tablets: 1000 }, ]; `; export const waterfallData = [ { item: 'TaxRate', 'Effective tax rate in %': 21, color: 'blue' }, { item: 'Foreign inc.', 'Effective tax rate in %': -15.5, color: 'teal' }, { item: 'Perm. diff.', 'Effective tax rate in %': -3, color: 'teal' }, { item: 'Credits', 'Effective tax rate in %': -3, color: 'teal' }, { item: 'Loss carryf. ', 'Effective tax rate in %': -2, color: 'teal' }, { item: 'Law changes', 'Effective tax rate in %': 2, color: 'red' }, { item: 'Reven. adj.', 'Effective tax rate in %': 4, color: 'red' }, { item: 'ETR', 'Effective tax rate in %': 3.5, color: 'blue', standalone: true }, ]; export const waterfallCode = ` export const data = [ { item: 'TaxRate', 'Effective tax rate in %': 21, color: 'blue' }, { item: 'Foreign inc.', 'Effective tax rate in %': -15.5, color: 'teal' }, { item: 'Perm. diff.', 'Effective tax rate in %': -3, color: 'teal' }, { item: 'Credits', 'Effective tax rate in %': -3, color: 'teal' }, { item: 'Loss carryf. ', 'Effective tax rate in %': -2, color: 'teal' }, { item: 'Law changes', 'Effective tax rate in %': 2, color: 'red' }, { item: 'Reven. adj.', 'Effective tax rate in %': 4, color: 'red' }, { item: 'ETR', 'Effective tax rate in %': 3.5, color: 'blue', standalone: true }, ]; `; export const zeroData = [ { month: 'January', Smartphones: 1200, Laptops: 900, Tablets: 0 }, { month: 'February', Smartphones: 1900, Laptops: 1200, Tablets: 400 }, { month: 'March', Smartphones: 0, Laptops: 1000, Tablets: 200 }, { month: 'April', Smartphones: 1000, Laptops: 200, Tablets: 800 }, { month: 'May', Smartphones: 800, Laptops: 0, Tablets: 1200 }, { month: 'June', Smartphones: 0, Laptops: 600, Tablets: 1000 }, ]; export const zeroDataCode = `export const zeroData = [ { month: 'January', Smartphones: 1200, Laptops: 900, Tablets: 0 }, { month: 'February', Smartphones: 1900, Laptops: 1200, Tablets: 400 }, { month: 'March', Smartphones: 0, Laptops: 1000, Tablets: 200 }, { month: 'April', Smartphones: 1000, Laptops: 200, Tablets: 800 }, { month: 'May', Smartphones: 800, Laptops: 0, Tablets: 1200 }, { month: 'June', Smartphones: 0, Laptops: 600, Tablets: 1000 }, ];`; export const mixedStackData = [ { month: 'January', Smartphones: 1200, Laptops: 500, Tablets: 800 }, { month: 'February', Smartphones: 1900, Laptops: 1200, Tablets: 400 }, { month: 'March', Smartphones: 1800, Laptops: 1000, Tablets: 200 }, { month: 'April', Smartphones: 1000, Laptops: 200, Tablets: 800 }, { month: 'May', Smartphones: 800, Laptops: 200, Tablets: 700 }, { month: 'June', Smartphones: 800, Laptops: 500, Tablets: 200 }, ]; export const mixedStackDataCode = `export const mixedStack = [ { month: 'January', Smartphones: 1200, Laptops: 500, Tablets: 800 }, { month: 'February', Smartphones: 1900, Laptops: 1200, Tablets: 400 }, { month: 'March', Smartphones: 1800, Laptops: 1000, Tablets: 200 }, { month: 'April', Smartphones: 1000, Laptops: 200, Tablets: 800 }, { month: 'May', Smartphones: 800, Laptops: 200, Tablets: 700 }, { month: 'June', Smartphones: 800, Laptops: 500, Tablets: 200 }, ];`; ================================================ FILE: src/components/custom/components-demo/charts/data/_bubble-data.ts ================================================ export const data = [ { hour: '08:00', index: 1, value: 150 }, { hour: '10:00', index: 1, value: 180 }, { hour: '12:00', index: 1, value: 280 }, { hour: '14:00', index: 1, value: 120 }, { hour: '16:00', index: 1, value: 380 }, { hour: '18:00', index: 1, value: 400 }, { hour: '20:00', index: 1, value: 180 }, { hour: '22:00', index: 1, value: 100 }, ]; export const dataCode = ` export const data = [ { hour: '08:00', index: 1, value: 150 }, { hour: '10:00', index: 1, value: 166 }, { hour: '12:00', index: 1, value: 170 }, { hour: '14:00', index: 1, value: 150 }, { hour: '16:00', index: 1, value: 200 }, { hour: '18:00', index: 1, value: 400 }, { hour: '20:00', index: 1, value: 100 }, { hour: '22:00', index: 1, value: 160 }, ]; `; ================================================ FILE: src/components/custom/components-demo/charts/data/_donut-data.ts ================================================ export const data = [ { name: 'USA', value: 400, color: 'indigo.6' }, { name: 'India', value: 300, color: 'yellow.6' }, { name: 'Japan', value: 100, color: 'teal.6' }, { name: 'Other', value: 200, color: 'gray.6' }, ]; export const dataCode = ` export const data = [ { name: 'USA', value: 400, color: 'indigo.6' }, { name: 'India', value: 300, color: 'yellow.6' }, { name: 'Japan', value: 100, color: 'teal.6' }, { name: 'Other', value: 200, color: 'gray.6' }, ]; `; ================================================ FILE: src/components/custom/components-demo/charts/data/_pie-data.ts ================================================ export const data = [ { name: 'USA', value: 400, color: 'indigo.6' }, { name: 'India', value: 300, color: 'yellow.6' }, { name: 'Japan', value: 300, color: 'teal.6' }, { name: 'Other', value: 200, color: 'gray.6' }, ]; export const dataCode = ` export const data = [ { name: 'USA', value: 400, color: 'indigo.6' }, { name: 'India', value: 300, color: 'yellow.6' }, { name: 'Japan', value: 300, color: 'teal.6' }, { name: 'Other', value: 200, color: 'gray.6' }, ]; `; ================================================ FILE: src/components/custom/components-demo/charts/data/_radar-data.ts ================================================ export const data = [ { product: 'Apples', sales: 120, }, { product: 'Oranges', sales: 98, }, { product: 'Tomatoes', sales: 86, }, { product: 'Grapes', sales: 99, }, { product: 'Bananas', sales: 85, }, { product: 'Lemons', sales: 65, }, ]; export const dataCode = ` export const data = [ { product: 'Apples', sales: 120, }, { product: 'Oranges', sales: 98, }, { product: 'Tomatoes', sales: 86, }, { product: 'Grapes', sales: 99, }, { product: 'Bananas', sales: 85, }, { product: 'Lemons', sales: 65, }, ]; `; export const multiData = [ { product: 'Apples', 'Sales January': 120, 'Sales February': 100, }, { product: 'Oranges', 'Sales January': 98, 'Sales February': 90, }, { product: 'Tomatoes', 'Sales January': 86, 'Sales February': 70, }, { product: 'Grapes', 'Sales January': 99, 'Sales February': 80, }, { product: 'Bananas', 'Sales January': 85, 'Sales February': 120, }, { product: 'Lemons', 'Sales January': 65, 'Sales February': 150, }, ]; export const multiDataCode = ` export const data = [ { product: 'Apples', 'Sales January': 120, 'Sales February': 100, }, { product: 'Oranges', 'Sales January': 98, 'Sales February': 90, }, { product: 'Tomatoes', 'Sales January': 86, 'Sales February': 70, }, { product: 'Grapes', 'Sales January': 99, 'Sales February': 80, }, { product: 'Bananas', 'Sales January': 85, 'Sales February': 120, }, { product: 'Lemons', 'Sales January': 65, 'Sales February': 150, }, ];`; ================================================ FILE: src/components/custom/components-demo/charts/data/_scatter-data.ts ================================================ export const data = [ { color: 'blue.5', name: 'Group 1', data: [ { age: 25, BMI: 20 }, { age: 30, BMI: 22 }, { age: 35, BMI: 18 }, { age: 40, BMI: 25 }, { age: 45, BMI: 30 }, { age: 28, BMI: 15 }, { age: 22, BMI: 12 }, { age: 50, BMI: 28 }, { age: 32, BMI: 19 }, { age: 48, BMI: 31 }, { age: 26, BMI: 24 }, { age: 38, BMI: 27 }, { age: 42, BMI: 29 }, { age: 29, BMI: 16 }, { age: 34, BMI: 23 }, { age: 44, BMI: 33 }, { age: 23, BMI: 14 }, { age: 37, BMI: 26 }, { age: 49, BMI: 34 }, { age: 27, BMI: 17 }, { age: 41, BMI: 32 }, { age: 31, BMI: 21 }, { age: 46, BMI: 35 }, { age: 24, BMI: 13 }, { age: 33, BMI: 22 }, { age: 39, BMI: 28 }, { age: 47, BMI: 30 }, { age: 36, BMI: 25 }, { age: 43, BMI: 29 }, { age: 21, BMI: 11 }, ], }, ]; export const doubleData = [ { color: 'blue.5', name: 'Group 1', data: [ { age: 25, BMI: 20 }, { age: 30, BMI: 22 }, { age: 35, BMI: 18 }, { age: 40, BMI: 25 }, { age: 45, BMI: 30 }, { age: 28, BMI: 15 }, { age: 22, BMI: 12 }, { age: 50, BMI: 28 }, { age: 32, BMI: 19 }, { age: 48, BMI: 31 }, { age: 26, BMI: 24 }, { age: 38, BMI: 27 }, { age: 42, BMI: 29 }, { age: 29, BMI: 16 }, { age: 34, BMI: 23 }, { age: 44, BMI: 33 }, { age: 23, BMI: 14 }, { age: 37, BMI: 26 }, { age: 49, BMI: 34 }, { age: 27, BMI: 17 }, { age: 41, BMI: 32 }, { age: 31, BMI: 21 }, { age: 46, BMI: 35 }, { age: 24, BMI: 13 }, { age: 33, BMI: 22 }, { age: 39, BMI: 28 }, { age: 47, BMI: 30 }, { age: 36, BMI: 25 }, { age: 43, BMI: 29 }, { age: 21, BMI: 11 }, ], }, { color: 'red.5', name: 'Group 2', data: [ { age: 26, BMI: 21 }, { age: 31, BMI: 24 }, { age: 37, BMI: 19 }, { age: 42, BMI: 27 }, { age: 29, BMI: 32 }, { age: 35, BMI: 18 }, { age: 40, BMI: 23 }, { age: 45, BMI: 30 }, { age: 27, BMI: 15 }, { age: 33, BMI: 20 }, { age: 38, BMI: 25 }, { age: 43, BMI: 29 }, { age: 30, BMI: 16 }, { age: 36, BMI: 22 }, { age: 41, BMI: 28 }, { age: 46, BMI: 33 }, { age: 28, BMI: 17 }, { age: 34, BMI: 22 }, { age: 39, BMI: 26 }, { age: 44, BMI: 31 }, { age: 32, BMI: 18 }, { age: 38, BMI: 23 }, { age: 43, BMI: 28 }, { age: 48, BMI: 35 }, { age: 25, BMI: 14 }, { age: 31, BMI: 20 }, { age: 36, BMI: 25 }, { age: 41, BMI: 30 }, { age: 29, BMI: 16 }, ], }, ]; export const spendingsData = [ { color: 'cyan', name: 'Average monthly spending', data: [ { age: 25, average_monthly_spending: 1400 }, { age: 30, average_monthly_spending: 2100 }, { age: 35, average_monthly_spending: 1800 }, { age: 40, average_monthly_spending: 2400 }, { age: 45, average_monthly_spending: 2300 }, { age: 28, average_monthly_spending: 1600 }, { age: 22, average_monthly_spending: 1200 }, { age: 50, average_monthly_spending: 3200 }, { age: 32, average_monthly_spending: 1900 }, { age: 48, average_monthly_spending: 2700 }, { age: 26, average_monthly_spending: 1700 }, { age: 38, average_monthly_spending: 2200 }, { age: 42, average_monthly_spending: 2600 }, { age: 29, average_monthly_spending: 1500 }, { age: 34, average_monthly_spending: 2000 }, { age: 44, average_monthly_spending: 2500 }, { age: 23, average_monthly_spending: 1300 }, { age: 37, average_monthly_spending: 2100 }, { age: 49, average_monthly_spending: 2900 }, { age: 27, average_monthly_spending: 1600 }, { age: 41, average_monthly_spending: 2500 }, { age: 31, average_monthly_spending: 1800 }, { age: 46, average_monthly_spending: 2700 }, { age: 24, average_monthly_spending: 1400 }, { age: 33, average_monthly_spending: 2100 }, { age: 39, average_monthly_spending: 2400 }, { age: 47, average_monthly_spending: 2800 }, { age: 36, average_monthly_spending: 2200 }, { age: 43, average_monthly_spending: 2600 }, { age: 21, average_monthly_spending: 1100 }, ], }, ]; export const doubleDataCode = ` export const data = [ { color: 'blue.5', name: 'Group 1', data: [ { age: 25, BMI: 20 }, { age: 30, BMI: 22 }, { age: 35, BMI: 18 }, { age: 40, BMI: 25 }, { age: 45, BMI: 30 }, { age: 28, BMI: 15 }, { age: 22, BMI: 12 }, { age: 50, BMI: 28 }, { age: 32, BMI: 19 }, { age: 48, BMI: 31 }, { age: 26, BMI: 24 }, { age: 38, BMI: 27 }, { age: 42, BMI: 29 }, { age: 29, BMI: 16 }, { age: 34, BMI: 23 }, { age: 44, BMI: 33 }, { age: 23, BMI: 14 }, { age: 37, BMI: 26 }, { age: 49, BMI: 34 }, { age: 27, BMI: 17 }, { age: 41, BMI: 32 }, { age: 31, BMI: 21 }, { age: 46, BMI: 35 }, { age: 24, BMI: 13 }, { age: 33, BMI: 22 }, { age: 39, BMI: 28 }, { age: 47, BMI: 30 }, { age: 36, BMI: 25 }, { age: 43, BMI: 29 }, { age: 21, BMI: 11 }, ], }, { color: 'red.5', name: 'Group 2', data: [ { age: 26, BMI: 21 }, { age: 31, BMI: 24 }, { age: 37, BMI: 19 }, { age: 42, BMI: 27 }, { age: 29, BMI: 32 }, { age: 35, BMI: 18 }, { age: 40, BMI: 23 }, { age: 45, BMI: 30 }, { age: 27, BMI: 15 }, { age: 33, BMI: 20 }, { age: 38, BMI: 25 }, { age: 43, BMI: 29 }, { age: 30, BMI: 16 }, { age: 36, BMI: 22 }, { age: 41, BMI: 28 }, { age: 46, BMI: 33 }, { age: 28, BMI: 17 }, { age: 34, BMI: 22 }, { age: 39, BMI: 26 }, { age: 44, BMI: 31 }, { age: 32, BMI: 18 }, { age: 38, BMI: 23 }, { age: 43, BMI: 28 }, { age: 48, BMI: 35 }, { age: 25, BMI: 14 }, { age: 31, BMI: 20 }, { age: 36, BMI: 25 }, { age: 41, BMI: 30 }, { age: 29, BMI: 16 }, ], }, ]; `; export const dataCode = `export const data = [ { color: 'blue.5', name: 'Group 1', data: [ { age: 25, BMI: 20 }, { age: 30, BMI: 22 }, { age: 35, BMI: 18 }, { age: 40, BMI: 25 }, { age: 45, BMI: 30 }, { age: 28, BMI: 15 }, { age: 22, BMI: 12 }, { age: 50, BMI: 28 }, { age: 32, BMI: 19 }, { age: 48, BMI: 31 }, { age: 26, BMI: 24 }, { age: 38, BMI: 27 }, { age: 42, BMI: 29 }, { age: 29, BMI: 16 }, { age: 34, BMI: 23 }, { age: 44, BMI: 33 }, { age: 23, BMI: 14 }, { age: 37, BMI: 26 }, { age: 49, BMI: 34 }, { age: 27, BMI: 17 }, { age: 41, BMI: 32 }, { age: 31, BMI: 21 }, { age: 46, BMI: 35 }, { age: 24, BMI: 13 }, { age: 33, BMI: 22 }, { age: 39, BMI: 28 }, { age: 47, BMI: 30 }, { age: 36, BMI: 25 }, { age: 43, BMI: 29 }, { age: 21, BMI: 11 }, ], }, ];`; export const spendingsDataCode = `export const spendingsData = [ { color: 'cyan', name: 'Average monthly spending', data: [ { age: 25, average_monthly_spending: 1400 }, { age: 30, average_monthly_spending: 2100 }, { age: 35, average_monthly_spending: 1800 }, { age: 40, average_monthly_spending: 2400 }, { age: 45, average_monthly_spending: 2300 }, { age: 28, average_monthly_spending: 1600 }, { age: 22, average_monthly_spending: 1200 }, { age: 50, average_monthly_spending: 3200 }, { age: 32, average_monthly_spending: 1900 }, { age: 48, average_monthly_spending: 2700 }, { age: 26, average_monthly_spending: 1700 }, { age: 38, average_monthly_spending: 2200 }, { age: 42, average_monthly_spending: 2600 }, { age: 29, average_monthly_spending: 1500 }, { age: 34, average_monthly_spending: 2000 }, { age: 44, average_monthly_spending: 2500 }, { age: 23, average_monthly_spending: 1300 }, { age: 37, average_monthly_spending: 2100 }, { age: 49, average_monthly_spending: 2900 }, { age: 27, average_monthly_spending: 1600 }, { age: 41, average_monthly_spending: 2500 }, { age: 31, average_monthly_spending: 1800 }, { age: 46, average_monthly_spending: 2700 }, { age: 24, average_monthly_spending: 1400 }, { age: 33, average_monthly_spending: 2100 }, { age: 39, average_monthly_spending: 2400 }, { age: 47, average_monthly_spending: 2800 }, { age: 36, average_monthly_spending: 2200 }, { age: 43, average_monthly_spending: 2600 }, { age: 21, average_monthly_spending: 1100 }, ], }, ];`; ================================================ FILE: src/components/custom/components-demo/charts/donot-chart-demo.tsx ================================================ import { DonutChart } from '@mantine/charts'; import { MantineDemo } from '../../../mantine/demo'; import { data, dataCode } from './data/_donut-data'; const code = ` import { DonutChart } from '@mantine/charts'; import { data } from './data'; function Demo() { return ; } `; function Wrapper(props: any) { return ; } export const donutChartDemo: MantineDemo = { type: 'configurator', component: Wrapper, code: [ { fileName: 'Demo.tsx', code, language: 'tsx' }, { fileName: 'data.ts', code: dataCode, language: 'tsx' }, ], centered: true, controls: [ { type: 'number', prop: 'size', initialValue: 160, min: 80, max: 300, step: 1, libraryValue: '__', }, { type: 'number', prop: 'thickness', initialValue: 20, min: 2, max: 30, step: 1, libraryValue: '__', }, { type: 'number', prop: 'paddingAngle', initialValue: 10, min: 0, max: 30, step: 1, libraryValue: '__', }, { type: 'number', prop: 'strokeWidth', initialValue: 1, min: 0, max: 5, step: 0.1, libraryValue: '__', }, { type: 'boolean', prop: 'withLabels', initialValue: true, libraryValue: '__' }, { type: 'boolean', prop: 'withLabelsLine', initialValue: true, libraryValue: '__' } ], }; ================================================ FILE: src/components/custom/components-demo/charts/line-chart-demo.tsx ================================================ import { LineChart } from '@mantine/charts'; import { data, dataCode } from './data/_area-data'; import { MantineDemo } from '../../../mantine/demo'; const code = ` import { LineChart } from '@mantine/charts'; import { data } from './data'; function Demo() { return ( ); } `; function Wrapper(props: any) { return ( ); } export const lineChartDemo: MantineDemo = { type: 'configurator', component: Wrapper, code: [ { code, language: 'tsx', fileName: 'Demo.tsx' }, { code: dataCode, language: 'tsx', fileName: 'data.ts' }, ], controls: [ { type: 'select', prop: 'curveType', initialValue: 'linear', libraryValue: null, data: [ { value: 'bump', label: 'bump' }, { value: 'linear', label: 'linear' }, { value: 'natural', label: 'natural' }, { value: 'monotone', label: 'monotone' }, { value: 'step', label: 'step' }, { value: 'stepBefore', label: 'stepBefore' }, { value: 'stepAfter', label: 'stepAfter' }, ], }, { type: 'segmented', prop: 'tickLine', initialValue: 'y', libraryValue: 'y', transformLabel: false, data: [ { value: 'x', label: 'x' }, { value: 'y', label: 'y' }, { value: 'xy', label: 'xy' }, { value: 'none', label: 'none' }, ], }, { type: 'segmented', prop: 'gridAxis', initialValue: 'x', libraryValue: 'x', transformLabel: false, data: [ { value: 'x', label: 'x' }, { value: 'y', label: 'y' }, { value: 'xy', label: 'xy' }, { value: 'none', label: 'none' }, ], }, { type: 'boolean', prop: 'withXAxis', initialValue: true, libraryValue: true, }, { type: 'boolean', prop: 'withYAxis', initialValue: true, libraryValue: true, }, { type: 'boolean', prop: 'withDots', initialValue: true, libraryValue: true, }, ], }; ================================================ FILE: src/components/custom/components-demo/charts/pie-chart-demo.tsx ================================================ import { PieChart } from '@mantine/charts'; import { MantineDemo } from '../../../mantine/demo'; import { data, dataCode } from './data/_pie-data'; const code = ` import { PieChart } from '@mantine/charts'; import { data } from './data'; function Demo() { return ; } `; function Wrapper(props: any) { return ; } export const pieChartDemo: MantineDemo = { type: 'configurator', component: Wrapper, code: [ { fileName: 'Demo.tsx', code, language: 'tsx' }, { fileName: 'data.ts', code: dataCode, language: 'tsx' }, ], centered: true, controls: [ { type: 'segmented', prop: 'labelsPosition', initialValue: 'outside', libraryValue: '__', data: ['inside', 'outside'], }, { type: 'segmented', prop: 'labelsType', initialValue: 'value', libraryValue: '__', data: ['value', 'percent'], }, { type: 'number', prop: 'strokeWidth', initialValue: 1, min: 0, max: 2, step: 0.1, libraryValue: '__', }, { type: 'number', prop: 'size', initialValue: 160, min: 80, max: 300, step: 1, libraryValue: '__', }, { type: 'boolean', prop: 'withLabels', initialValue: true, libraryValue: '__' }, { type: 'boolean', prop: 'withLabelsLine', initialValue: true, libraryValue: '__' }, ], }; ================================================ FILE: src/components/custom/components-demo/charts/radar-chart-demo.tsx ================================================ import { RadarChart } from '@mantine/charts'; import { multiData, multiDataCode } from './data/_radar-data'; import { MantineDemo } from '../../../mantine/demo'; const code = ` import { RadarChart } from '@mantine/charts'; import { data } from './data'; function Demo() { return ( ); } `; function Demo(props: any) { return ( ); } export const radarChartDemo: MantineDemo = { type: 'configurator', component: Demo, code: [ { code, language: 'tsx', fileName: 'Demo.tsx' }, { code: multiDataCode, language: 'tsx', fileName: 'data.ts' }, ], controls: [ { type: 'boolean', prop: 'withPolarGrid', initialValue: true, libraryValue: null }, { type: 'boolean', prop: 'withPolarAngleAxis', initialValue: true, libraryValue: null }, { type: 'boolean', prop: 'withPolarRadiusAxis', initialValue: true, libraryValue: null }, ], }; ================================================ FILE: src/components/custom/components-demo/charts/scatter-chart-demo.tsx ================================================ import { ScatterChart } from '@mantine/charts'; import { doubleData, doubleDataCode } from './data/_scatter-data'; import { MantineDemo } from '../../../mantine/demo'; const code = ` import { ScatterChart } from '@mantine/charts'; import { data } from './data'; function Demo() { return ( ); } `; function Demo() { return ( ); } export const scatterChartDemo: MantineDemo = { type: 'code', component: Demo, code: [ { code, language: 'tsx', fileName: 'Demo.tsx' }, { code: doubleDataCode, language: 'tsx', fileName: 'data.ts' }, ], }; ================================================ FILE: src/components/custom/components-demo/charts/sparkline-demo.tsx ================================================ import { Sparkline } from '@mantine/charts'; import { MantineDemo } from '../../../mantine/demo'; const code = ` import { Sparkline } from '@mantine/charts'; function Demo() { return ( ); } `; function Wrapper(props: any) { return ; } export const sparklineDemo: MantineDemo = { type: 'configurator', component: Wrapper, code, centered: true, controls: [ { type: 'select', prop: 'curveType', initialValue: 'linear', libraryValue: null, data: [ { value: 'bump', label: 'bump' }, { value: 'linear', label: 'linear' }, { value: 'natural', label: 'natural' }, { value: 'monotone', label: 'monotone' }, { value: 'step', label: 'step' }, { value: 'stepBefore', label: 'stepBefore' }, { value: 'stepAfter', label: 'stepAfter' }, ], }, { type: 'color', prop: 'color', initialValue: '', libraryValue: '' }, { type: 'number', prop: 'fillOpacity', initialValue: 0.6, libraryValue: null, min: 0, max: 1, step: 0.01, }, { type: 'boolean', prop: 'withGradient', initialValue: true, libraryValue: true, }, { type: 'number', prop: 'strokeWidth', initialValue: 2, libraryValue: null, step: 0.1, min: 0.5, max: 5, }, ], }; ================================================ FILE: src/components/custom/components-demo/combobox/autocomplete-demo.tsx ================================================ import { Autocomplete } from '@mantine/core'; import { MantineDemo } from '../../../mantine/demo'; import { inputControls } from '../../../../utils/input-controls'; const code = ` import { Autocomplete } from '@mantine/core'; function Demo() { return ( ); } `; function Wrapper(props: any) { return ( ); } export const autocompleteDemo: MantineDemo = { type: 'configurator', component: Wrapper, code, centered: true, maxWidth: 340, controls: inputControls, }; ================================================ FILE: src/components/custom/components-demo/combobox/multi-select-demo.tsx ================================================ import { MultiSelect } from '@mantine/core'; import { MantineDemo } from '../../../mantine/demo'; import { inputControls } from '../../../../utils/input-controls'; const code = ` import { MultiSelect } from '@mantine/core'; function Demo() { return ( ); } `; function Wrapper(props: any) { return ( ); } export const multiSelectDemo: MantineDemo = { type: 'configurator', component: Wrapper, code, centered: true, maxWidth: 340, controls: inputControls, }; ================================================ FILE: src/components/custom/components-demo/combobox/pills-input-demo.tsx ================================================ import { Pill, PillsInput } from '@mantine/core'; import { MantineDemo } from '../../../mantine/demo'; import { inputControls } from '../../../../utils/input-controls'; const code = ` import { PillsInput, Pill } from '@mantine/core'; function Demo() { return ( React Vue Svelte ); } `; function Wrapper(props: any) { return ( React Vue Svelte ); } export const pillsInputDemo: MantineDemo = { type: 'configurator', component: Wrapper, code, centered: true, maxWidth: 440, controls: inputControls, }; ================================================ FILE: src/components/custom/components-demo/combobox/select-demo.tsx ================================================ import { Select } from '@mantine/core'; import { MantineDemo } from '../../../mantine/demo'; import { inputControls } from '../../../../utils/input-controls'; const code = ` import { Select } from '@mantine/core'; function Demo() { return ( ); } export const selectDemo: MantineDemo = { type: 'configurator', component: Wrapper, code, centered: true, maxWidth: 340, controls: inputControls, }; ================================================ FILE: src/components/custom/components-demo/combobox/tags-input-demo.tsx ================================================ import { TagsInput } from '@mantine/core'; import { MantineDemo } from '../../../mantine/demo'; import { inputControls } from '../../../../utils/input-controls'; const code = ` import { TagsInput } from '@mantine/core'; function Demo() { return ( ); } `; function Wrapper(props: any) { return ( ); } export const tagsInputDemo: MantineDemo = { type: 'configurator', component: Wrapper, code, centered: true, maxWidth: 340, controls: inputControls, }; ================================================ FILE: src/components/custom/components-demo/components-demo.module.css ================================================ .navbarWrapper{ position: sticky; top: 80px; z-index: 1; } .content { flex: 1; } ================================================ FILE: src/components/custom/components-demo/components-demo.tsx ================================================ import { Box, Divider, Group, Stack, Title } from "@mantine/core"; import { demoComponentsNavbarData } from "../../../utils/data"; import { Demo } from "../../mantine/demo"; import Navbar from "../../ui/navbar/navbar"; import classes from "./components-demo.module.css"; const ComponentsDemo = () => { return ( {demoComponentsNavbarData?.map((item) => { return ( {item.label} {item.links.map((link) => { return ( {link.label} {link.demo && } ); })} ); })} ); }; export default ComponentsDemo; ================================================ FILE: src/components/custom/components-demo/data-display/accordion-demo.tsx ================================================ import { Accordion, AccordionProps } from '@mantine/core'; import { MantineDemo } from '../../../mantine/demo'; const code = ` import { Accordion } from '@mantine/core'; function Demo() { // See groceries data above const items = groceries.map((item) => ( {item.value} {item.description} )); return ( {items} ); } `; const groceries = [ { emoji: '🍎', value: 'Apples', description: 'Crisp and refreshing fruit. Apples are known for their versatility and nutritional benefits. They come in a variety of flavors and are great for snacking, baking, or adding to salads.', }, { emoji: '🍌', value: 'Bananas', description: 'Naturally sweet and potassium-rich fruit. Bananas are a popular choice for their energy-boosting properties and can be enjoyed as a quick snack, added to smoothies, or used in baking.', }, { emoji: '🥦', value: 'Broccoli', description: 'Nutrient-packed green vegetable. Broccoli is packed with vitamins, minerals, and fiber. It has a distinct flavor and can be enjoyed steamed, roasted, or added to stir-fries.', }, ]; function Demo(props: AccordionProps) { const items = groceries.map((item) => ( {item.value} {item.description} )); return ( {items} ); } export const accordionDemo: MantineDemo = { type: 'configurator', component: Demo, code, controls: [ { prop: 'variant', type: 'select', initialValue: 'default', libraryValue: 'default', data: [ { label: 'Default', value: 'default' }, { label: 'Contained', value: 'contained' }, { label: 'Filled', value: 'filled' }, { label: 'Separated', value: 'separated' }, ], }, { prop: 'radius', type: 'size', libraryValue: 'sm', initialValue: 'sm' }, { prop: 'chevronPosition', type: 'segmented', data: [ { label: 'Left', value: 'left' }, { label: 'Right', value: 'right' }, ], initialValue: 'right', libraryValue: 'right', }, { prop: 'disableChevronRotation', type: 'boolean', initialValue: false, libraryValue: false }, ], }; ================================================ FILE: src/components/custom/components-demo/data-display/avatar-demo.tsx ================================================ import { Avatar } from '@mantine/core'; import { MantineDemo } from '../../../mantine/demo'; import { staticVariantsControl } from '../../../../utils/variants-data'; const code = ` import { Avatar } from '@mantine/core'; function Demo() { return ; } `; export const avatarDemo: MantineDemo = { type: "configurator", component: Avatar, centered: true, code, controls: [ { ...(staticVariantsControl as any), initialValue: 'light', libraryValue: 'light' }, { prop: "radius", type: "size", initialValue: "sm", libraryValue: "100%" }, { prop: "size", type: "size", initialValue: "md", libraryValue: "md" }, { prop: "color", type: "color", initialValue: "", libraryValue: "" }, ], }; ================================================ FILE: src/components/custom/components-demo/data-display/background-image-demo.tsx ================================================ import { BackgroundImage, BackgroundImageProps, Box, Center, Text } from '@mantine/core'; import { MantineDemo } from '../../../mantine/demo'; function Wrapper(props: BackgroundImageProps) { return (
BackgroundImage component can be used to add any content on image. It is useful for hero headers and other similar sections
); } const code = ` import { BackgroundImage, Center, Text, Box } from '@mantine/core'; function Demo() { return (
BackgroundImage component can be used to add any content on image. It is useful for hero headers and other similar sections
); } `; export const backgroundImageDemo: MantineDemo = { type: 'configurator', component: Wrapper, code, controls: [{ prop: 'radius', type: 'size', initialValue: 'sm', libraryValue: null }], }; ================================================ FILE: src/components/custom/components-demo/data-display/badge-demo.tsx ================================================ import { Badge } from '@mantine/core'; import { MantineDemo } from '../../../mantine/demo'; const code = ` import { Badge } from '@mantine/core'; function Demo() { return Badge; } `; function Wrapper(props: any) { return Badge; } export const badgeDemo: MantineDemo = { type: 'configurator', component: Wrapper, code, centered: true, controls: [ { prop: 'variant', type: 'select', initialValue: 'filled', libraryValue: 'filled', data: ['filled', 'light', 'outline', 'dot', 'transparent', 'default', 'white'], }, { type: 'color', prop: 'color', initialValue: '', libraryValue: '' }, { type: 'size', prop: 'size', initialValue: 'md', libraryValue: 'md' }, { type: 'size', prop: 'radius', initialValue: 'xl', libraryValue: 'xl' }, ], }; ================================================ FILE: src/components/custom/components-demo/data-display/card-demo.tsx ================================================ import { Badge, Button, Card, Group, Image, Text } from '@mantine/core'; import { MantineDemo } from '../../../mantine/demo'; const code = ` import { Card, Image, Text, Badge, Button, Group } from '@mantine/core'; function Demo() { return ( Norway Norway Fjord Adventures On Sale With Fjord Tours you can explore more of the magical fjord landscapes with tours and activities on and around the fjords of Norway ); } `; function Demo() { return ( Norway Norway Fjord Adventures On Sale With Fjord Tours you can explore more of the magical fjord landscapes with tours and activities on and around the fjords of Norway ); } export const cardDemo: MantineDemo = { type: 'code', code, component: Demo, centered: true, maxWidth: 340, dimmed: true, }; ================================================ FILE: src/components/custom/components-demo/data-display/color-swatch-demo.tsx ================================================ import { ColorSwatch, Group } from '@mantine/core'; import { MantineDemo } from '../../../mantine/demo'; const code = ` import { ColorSwatch, Group } from '@mantine/core'; function Demo() { return ( ); } `; function Demo() { return ( ); } export const colorSwatchDemo: MantineDemo = { type: 'code', component: Demo, centered: true, code, }; ================================================ FILE: src/components/custom/components-demo/data-display/image-demo.tsx ================================================ import { Image } from '@mantine/core'; import { MantineDemo } from '../../../mantine/demo'; const code = ` import { Image } from '@mantine/core'; function Demo() { return ( ); } `; function Demo() { return ( ); } export const imageDemo: MantineDemo = { type: 'code', component: Demo, code, }; ================================================ FILE: src/components/custom/components-demo/data-display/indicator-demo.tsx ================================================ import { Avatar, Indicator, IndicatorProps } from '@mantine/core'; import { MantineDemo } from '../../../mantine/demo'; function Demo(props: IndicatorProps) { return ( ); } const code = ` import { Indicator, Avatar } from '@mantine/core'; function Demo() { return ( ); } `; export const indicatorDemo: MantineDemo = { type: 'configurator', component: Demo, code, centered: true, controls: [ { prop: 'color', type: 'color', initialValue: '', libraryValue: '' }, { prop: 'position', type: 'select', data: [ { value: 'top-start', label: 'top-start' }, { value: 'top-center', label: 'top-center' }, { value: 'top-end', label: 'top-end' }, { value: 'middle-start', label: 'middle-start' }, { value: 'middle-center', label: 'middle-center' }, { value: 'middle-end', label: 'middle-end' }, { value: 'bottom-start', label: 'bottom-start' }, { value: 'bottom-center', label: 'bottom-center' }, { value: 'bottom-end', label: 'bottom-end' }, ], initialValue: 'top-end', libraryValue: 'top-end', }, { prop: 'label', type: 'string', initialValue: '', libraryValue: '' }, { prop: 'offset', type: 'number', initialValue: 0, libraryValue: 10, step: 1, min: 0, max: 56 }, { prop: 'radius', type: 'size', initialValue: 'xl', libraryValue: 'xl' }, { prop: 'size', type: 'number', initialValue: 10, libraryValue: 10, step: 1, min: 6, max: 30 }, { prop: 'disabled', type: 'boolean', initialValue: false, libraryValue: false }, { prop: 'withBorder', type: 'boolean', initialValue: false, libraryValue: false }, { prop: 'processing', type: 'boolean', initialValue: false, libraryValue: false }, ], }; ================================================ FILE: src/components/custom/components-demo/data-display/spoiler-demo.tsx ================================================ import { Box, Spoiler, SpoilerProps, Text } from '@mantine/core'; import { MantineDemo } from '../../../mantine/demo'; const content = (
We Butter the Bread with Butter was founded in 2007 by Marcel Neumann, who was originally guitarist for Martin Kesici's band, and Tobias Schultka. The band was originally meant as a joke, but progressed into being a more serious musical duo. The name for the band has no particular meaning, although its origins were suggested from when the two original members were driving in a car operated by Marcel Neumann and an accident almost occurred. Neumann found Schultka "so funny that he briefly lost control of the vehicle." Many of their songs from this point were covers of German folk tales and nursery rhymes.
); function Wrapper(props: Partial) { return ( {content} ); } const code = ` import { Spoiler } from '@mantine/core'; function Demo() { return ( {/* Content here */} ); } `; function Demo() { return ; } export const spoilerDemo: MantineDemo = { type: 'code', code, component: Demo, }; ================================================ FILE: src/components/custom/components-demo/data-display/theme-icon-demo.tsx ================================================ import { ThemeIcon, ThemeIconProps } from '@mantine/core'; import { IconPhoto } from '@tabler/icons-react'; import { MantineDemo } from '../../../mantine/demo'; function Wrapper(props: ThemeIconProps) { return (
); } const code = ` import { ThemeIcon } from '@mantine/core'; import { IconPhoto } from '@tabler/icons-react'; function Demo() { return ( ); } `; export const themeIconDemo: MantineDemo = { type: 'configurator', component: Wrapper, code, centered: true, controls: [ { prop: 'variant', type: 'select', initialValue: 'filled', libraryValue: 'filled', data: [ { label: 'filled', value: 'filled' }, { label: 'light', value: 'light' }, { label: 'outline', value: 'outline' }, { label: 'default', value: 'default' }, { label: 'white', value: 'white' }, ], }, { prop: 'radius', type: 'size', initialValue: 'sm', libraryValue: 'sm' }, { prop: 'size', type: 'size', initialValue: 'md', libraryValue: 'md' }, { prop: 'color', type: 'color', initialValue: '', libraryValue: '' }, ], }; ================================================ FILE: src/components/custom/components-demo/data-display/timeline-demo.tsx ================================================ import { Box, Text, Timeline, TimelineProps } from '@mantine/core'; import { IconGitBranch, IconGitCommit, IconGitPullRequest, IconMessageDots } from '@tabler/icons-react'; import { MantineDemo } from '../../../mantine/demo'; function TimelineBase({ ...props }: Partial) { const displayIcon = true; return ( : null} title="New branch" > You've created new branch{' '} fix-notifications {' '} from master 2 hours ago : null} title="Commits"> You've pushed 23 commits to{' '} fix-notifications {' '} branch 52 minutes ago : null} lineVariant="dashed" > You've submitted a pull request{' '} Fix incorrect notification message (#187) {' '} 34 minutes ago : null} > Robert Gluesticker {' '} left a code review on your pull request 12 minutes ago ); } function Wrapper(props: TimelineProps) { return ( ); } const code = ` import { Timeline } from '@mantine/core'; function Demo() { return ( {/* items */} ); } `; export const timelineDemo: MantineDemo = { type: 'configurator', component: Wrapper, code, controls: [ { prop: 'color', type: 'color', initialValue: '', libraryValue: '' }, { prop: 'radius', type: 'size', initialValue: 'xl', libraryValue: 'xl' }, { prop: 'active', type: 'number', initialValue: 1, libraryValue: null, min: -1, max: 3 }, { prop: 'reverseActive', type: 'boolean', initialValue: false, libraryValue: false }, { prop: 'lineWidth', type: 'number', initialValue: 2, libraryValue: 2, min: 1, max: 6 }, { prop: 'bulletSize', type: 'number', initialValue: 25, libraryValue: 20, min: 18, max: 40, step: 1, }, { prop: 'align', type: 'segmented', data: [ { label: 'Left', value: 'left' }, { label: 'Right', value: 'right' }, ], initialValue: 'left', libraryValue: 'left', }, ], }; ================================================ FILE: src/components/custom/components-demo/feedback/alert-demo.tsx ================================================ import { Alert } from '@mantine/core'; import { IconInfoCircle } from '@tabler/icons-react'; import { staticVariantsControl } from '../../../../utils/variants-data'; import { MantineDemo } from '../../../mantine/demo'; const code = ` import { Alert } from '@mantine/core'; import { IconInfoCircle } from '@tabler/icons-react'; function Demo() { const icon = ; return ( {{children}} ); } `; function Wrapper(props: any) { return } {...props} />; } export const alertDemo: MantineDemo = { type: 'configurator', component: Wrapper, code, centered: true, maxWidth: 400, controls: [ { ...(staticVariantsControl as any), initialValue: 'light', libraryValue: 'light' }, { type: 'color', prop: 'color', initialValue: '', libraryValue: '' }, { type: 'size', prop: 'radius', initialValue: 'sm', libraryValue: 'sm' }, { type: 'boolean', prop: 'withCloseButton', initialValue: false, libraryValue: false }, { type: 'string', prop: 'title', initialValue: 'Alert title', libraryValue: null }, { type: 'string', prop: 'children', initialValue: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. At officiis, quae tempore necessitatibus placeat saepe.', libraryValue: null, }, ], }; ================================================ FILE: src/components/custom/components-demo/feedback/loader-demo.tsx ================================================ import { Loader } from '@mantine/core'; import { MantineDemo } from '../../../mantine/demo'; const code = ` import { Loader } from '@mantine/core'; function Demo() { return ; } `; export const loaderDemo: MantineDemo = { type: 'configurator', component: Loader, code, centered: true, controls: [ { type: 'color', prop: 'color', initialValue: '', libraryValue: '' }, { type: 'size', prop: 'size', initialValue: 'md', libraryValue: 'md' }, { type: 'segmented', prop: 'type', data: ['oval', 'bars', 'dots'], initialValue: 'oval', libraryValue: 'oval', }, ], }; ================================================ FILE: src/components/custom/components-demo/feedback/notification-demo.tsx ================================================ import { Box, Notification, NotificationProps } from '@mantine/core'; import { MantineDemo } from '../../../mantine/demo'; function Wrapper(props: NotificationProps) { return ( {}} {...props} /> ); } const code = ` import { Notification } from '@mantine/core'; function Demo() { return ( {{children}} ); } `; export const notificationDemo: MantineDemo = { type: 'configurator', component: Wrapper, centered: true, code, // dimmed: true, controls: [ { prop: 'loading', type: 'boolean', initialValue: false, libraryValue: false }, { prop: 'withCloseButton', type: 'boolean', initialValue: true, libraryValue: true }, { prop: 'withBorder', type: 'boolean', initialValue: false, libraryValue: false }, { prop: 'color', type: 'color', initialValue: '', libraryValue: '' }, { prop: 'radius', type: 'size', initialValue: 'sm', libraryValue: 'sm' }, { prop: 'title', type: 'string', initialValue: 'We notify you that', libraryValue: '', }, { prop: 'children', type: 'string', initialValue: 'You are now obligated to give a star to Mantine project on GitHub', libraryValue: '', }, ], }; ================================================ FILE: src/components/custom/components-demo/feedback/progress-demo.tsx ================================================ import { Progress } from '@mantine/core'; import { MantineDemo } from '../../../mantine/demo'; const code = ` import { Progress } from '@mantine/core'; function Demo() { return ; } `; function Demo(props: any) { return ; } export const progressDemo: MantineDemo = { type: 'configurator', component: Demo, code, centered: true, maxWidth: 400, controls: [ { prop: 'color', type: 'color', initialValue: '', libraryValue: '' }, { prop: 'radius', type: 'size', initialValue: 'sm', libraryValue: 'sm' }, { prop: 'size', type: 'size', initialValue: 'md', libraryValue: 'md' }, { prop: 'value', type: 'number', initialValue: 50, max: 100, min: 0, step: 10, libraryValue: '__', }, { prop: 'striped', type: 'boolean', initialValue: false, libraryValue: false }, { prop: 'animated', type: 'boolean', initialValue: false, libraryValue: false }, ], }; ================================================ FILE: src/components/custom/components-demo/feedback/ring-progress-demo.tsx ================================================ import { RingProgress, RingProgressProps, Text } from '@mantine/core'; import { MantineDemo } from '../../../mantine/demo'; function Wrapper(props: RingProgressProps) { return ( Hover sections to see tooltips } sections={[ { value: 40, color: 'cyan', tooltip: 'Documents – 40 Gb' }, { value: 25, color: 'orange', tooltip: 'Apps – 25 Gb' }, { value: 15, color: 'grape', tooltip: 'Other – 15 Gb' }, ]} /> ); } const code = ` import { RingProgress } from '@mantine/core'; function Demo() { return ( Hover sections to see tooltips } sections={[ { value: 40, color: 'cyan', tooltip: 'Documents – 40 Gb' }, { value: 25, color: 'orange', tooltip: 'Apps – 25 Gb' }, { value: 15, color: 'grape', tooltip: 'Other – 15 Gb' }, ]} /> ) } `; export const ringProgressDemo: MantineDemo = { type: 'configurator', component: Wrapper, centered: true, code, controls: [ { prop: 'size', type: 'number', initialValue: 180, step: 10, min: 60, max: 400, libraryValue: '__', }, { prop: 'thickness', type: 'number', initialValue: 12, step: 1, min: 1, max: 40, libraryValue: '__', }, { prop: 'roundCaps', type: 'boolean', initialValue: true, libraryValue: false }, ], }; ================================================ FILE: src/components/custom/components-demo/feedback/semi-circle-progress-demo.tsx ================================================ import { SemiCircleProgress } from '@mantine/core'; import { MantineDemo } from '../../../mantine/demo'; const code = ` import { SemiCircleProgress } from '@mantine/core'; function Demo() { return ( ); } `; function Wrapper(props: any) { return ; } export const semiCircleProgressDemo: MantineDemo = { type: 'configurator', component: Wrapper, code, centered: true, controls: [ { type: 'segmented', prop: 'fillDirection', initialValue: 'left-to-right', data: [ { label: 'Right to left', value: 'right-to-left' }, { label: 'Left to right', value: 'left-to-right' }, ], libraryValue: null, }, { type: 'segmented', prop: 'orientation', initialValue: 'up', data: [ { label: 'Up', value: 'up' }, { label: 'Down', value: 'down' }, ], libraryValue: null, }, { type: 'color', prop: 'filledSegmentColor', initialValue: '', libraryValue: '' }, { type: 'number', prop: 'size', min: 120, max: 450, initialValue: 200, libraryValue: null }, { type: 'number', prop: 'thickness', min: 1, max: 20, initialValue: 12, libraryValue: null }, { type: 'number', prop: 'value', min: 0, max: 100, initialValue: 40, libraryValue: null }, ], }; ================================================ FILE: src/components/custom/components-demo/feedback/skeleton-demo.tsx ================================================ import { Skeleton, SkeletonProps } from '@mantine/core'; import { MantineDemo } from '../../../mantine/demo'; function Wrapper(props: Partial) { return (
); } const code = (props: any) => ` import { Skeleton } from '@mantine/core'; function Demo() { return ( <> ); } `; export const skeletonDemo: MantineDemo = { type: 'configurator', component: Wrapper, code, controls: [{ prop: 'animate', type: 'boolean', initialValue: true, libraryValue: '__' }], }; ================================================ FILE: src/components/custom/components-demo/inputs/checkbox-demo.tsx ================================================ import { Checkbox, CheckboxProps } from '@mantine/core'; import { MantineDemo } from '../../../mantine/demo'; const code = ` import { Checkbox } from '@mantine/core'; function Demo() { return ( ); } `; export const checkboxDemo: MantineDemo = { type: 'configurator', component: (props: CheckboxProps) => , code, centered: true, controls: [ { prop: 'labelPosition', type: 'segmented', data: [ { value: 'right', label: 'Right' }, { value: 'left', label: 'Left' }, ], initialValue: 'right', libraryValue: 'right', }, { prop: 'label', type: 'string', initialValue: 'I agree to sell my privacy', libraryValue: '' }, { prop: 'description', type: 'string', initialValue: '', libraryValue: '' }, { prop: 'error', type: 'string', initialValue: '', libraryValue: '' }, { prop: 'color', type: 'color', initialValue: '', libraryValue: '' }, { prop: 'variant', type: 'segmented', data: [ { value: 'filled', label: 'Filled' }, { value: 'outline', label: 'Outline' }, ], initialValue: 'filled', libraryValue: 'filled', }, { prop: 'radius', type: 'size', initialValue: 'sm', libraryValue: 'sm' }, { prop: 'size', type: 'size', initialValue: 'sm', libraryValue: 'sm' }, { prop: 'disabled', type: 'boolean', initialValue: false, libraryValue: false }, { prop: 'indeterminate', type: 'boolean', initialValue: false, libraryValue: false }, ], }; ================================================ FILE: src/components/custom/components-demo/inputs/checkbox-group-demo.tsx ================================================ import { Checkbox, CheckboxGroupProps, Group } from '@mantine/core'; import { MantineDemo } from '../../../mantine/demo'; const code = ` import { Checkbox, Group } from '@mantine/core'; function Demo() { return ( ); } `; function Wrapper(props: Partial) { return ( ); } export const checkboxGroupDemo: MantineDemo = { type: 'configurator', component: Wrapper, code, centered: true, maxWidth: '100%', controls: [ { prop: 'label', type: 'string', initialValue: 'Select your favorite frameworks/libraries', libraryValue: '', }, { prop: 'description', type: 'string', initialValue: 'This is anonymous', libraryValue: '' }, { prop: 'error', type: 'string', initialValue: '', libraryValue: '' }, { prop: 'withAsterisk', type: 'boolean', initialValue: true, libraryValue: false }, ], }; ================================================ FILE: src/components/custom/components-demo/inputs/chip-demo.tsx ================================================ import { Chip, ChipProps } from '@mantine/core'; import { MantineDemo } from '../../../mantine/demo'; function Wrapper(props: ChipProps) { return ( Awesome chip ); } const code = ` import { Chip } from '@mantine/core'; function Demo() { return Awesome chip } `; export const chipDemo: MantineDemo = { type: 'configurator', component: Wrapper, code, centered: true, controls: [ { prop: 'color', type: 'color', initialValue: '', libraryValue: '' }, { prop: 'variant', type: 'segmented', data: [ { value: 'filled', label: 'Filled' }, { value: 'outline', label: 'Outline' }, { value: 'light', label: 'Light' }, ], initialValue: '', libraryValue: '', }, { prop: 'size', type: 'size', initialValue: 'sm', libraryValue: 'sm' }, { prop: 'radius', type: 'size', initialValue: 'xl', libraryValue: 'xl' }, { prop: 'disabled', type: 'boolean', initialValue: false, libraryValue: false }, { prop: 'checked', type: 'boolean', initialValue: true, libraryValue: false }, ], }; ================================================ FILE: src/components/custom/components-demo/inputs/color-input-demo.tsx ================================================ import { ColorInput } from '@mantine/core'; import { MantineDemo } from '../../../mantine/demo'; import { inputControls } from '../../../../utils/input-controls'; const code = ` import { ColorInput } from '@mantine/core'; function Demo() { return ( ); } `; function Wrapper(props: any) { return ; } export const colorInputDemo: MantineDemo = { type: 'configurator', component: Wrapper, code, centered: true, maxWidth: 340, controls: inputControls, }; ================================================ FILE: src/components/custom/components-demo/inputs/fieldset-demo.tsx ================================================ import { Fieldset, TextInput } from '@mantine/core'; import { MantineDemo } from '../../../mantine/demo'; const code = ` import { Fieldset, TextInput } from '@mantine/core'; function Demo() { return (
); } `; function Wrapper(props: any) { return (
); } export const fieldsetDemo: MantineDemo = { type: 'configurator', component: Wrapper, code, maxWidth: 500, centered: true, controls: [ { type: 'segmented', prop: 'variant', initialValue: '', libraryValue: '', data: ['default', 'filled', 'unstyled'], }, { type: 'size', prop: 'radius', initialValue: 'sm', libraryValue: 'sm' }, { prop: 'disabled', type: 'boolean', initialValue: false, libraryValue: false }, ], }; ================================================ FILE: src/components/custom/components-demo/inputs/file-input.tsx ================================================ import { FileInput } from "@mantine/core"; import { MantineDemo } from "../../../mantine/demo"; import { inputControls } from "../../../../utils/input-controls"; const code = ` import { FileInput } from '@mantine/core'; function Demo() { return ( ); } `; function Wrapper(props: any) { return ; } export const fileInputDemo: MantineDemo = { type: "configurator", component: Wrapper, code, centered: true, maxWidth: 340, controls: inputControls, }; ================================================ FILE: src/components/custom/components-demo/inputs/native-select-demo.tsx ================================================ import { NativeSelect } from "@mantine/core"; import { MantineDemo } from "../../../mantine/demo"; import { inputControls } from "../../../../utils/input-controls"; const code = ` import { NativeSelect } from '@mantine/core'; function Demo() { return ; } `; function Wrapper(props: any) { return ; } export const nativeSelectDemo: MantineDemo = { type: "configurator", component: Wrapper, code, centered: true, maxWidth: 340, controls: inputControls, }; ================================================ FILE: src/components/custom/components-demo/inputs/pin-input-demo.tsx ================================================ import { PinInput, PinInputProps } from '@mantine/core'; import { MantineDemo } from '../../../mantine/demo'; const code = ` import { PinInput } from '@mantine/core'; function Demo() { return } `; function Wrapper(props: PinInputProps) { return ; } export const pinInputDemo: MantineDemo = { type: 'configurator', component: Wrapper, code, centered: true, controls: [ { prop: 'size', type: 'size', initialValue: 'sm', libraryValue: 'sm' }, { prop: 'length', type: 'number', initialValue: 4, libraryValue: 4, min: 1, max: 5 }, { prop: 'mask', type: 'boolean', initialValue: false, libraryValue: false }, { prop: 'placeholder', type: 'string', initialValue: '○', libraryValue: '○' }, { prop: 'disabled', type: 'boolean', initialValue: false, libraryValue: false }, { prop: 'error', type: 'boolean', initialValue: false, libraryValue: false }, { prop: 'type', type: 'select', initialValue: 'alphanumeric', libraryValue: 'alphanumeric', data: ['alphanumeric', 'number'], }, ], }; ================================================ FILE: src/components/custom/components-demo/inputs/radio-demo.tsx ================================================ import { Radio, RadioProps } from '@mantine/core'; import { MantineDemo } from '../../../mantine/demo'; const code = ` import { Radio } from '@mantine/core'; function Demo() { return ( ); } `; function Wrapper(props: RadioProps) { return ( ); } export const radioDemo: MantineDemo = { type: 'configurator', component: Wrapper, code, centered: true, controls: [ { prop: 'labelPosition', type: 'segmented', data: [ { value: 'right', label: 'Right' }, { value: 'left', label: 'Left' }, ], initialValue: 'right', libraryValue: 'right', }, { prop: 'label', type: 'string', initialValue: 'I cannot be unchecked', libraryValue: '' }, { prop: 'description', type: 'string', initialValue: '', libraryValue: '' }, { prop: 'error', type: 'string', initialValue: '', libraryValue: '' }, { prop: 'size', type: 'size', initialValue: 'sm', libraryValue: 'sm' }, { prop: 'color', type: 'color', initialValue: '', libraryValue: '' }, { prop: 'variant', type: 'segmented', data: [ { value: 'filled', label: 'Filled' }, { value: 'outline', label: 'Outline' }, ], initialValue: '', libraryValue: '', }, { prop: 'disabled', type: 'boolean', initialValue: false, libraryValue: false }, ], }; ================================================ FILE: src/components/custom/components-demo/inputs/radio-group-demo.tsx ================================================ import { Group, Radio, RadioGroupProps } from '@mantine/core'; import { MantineDemo } from '../../../mantine/demo'; const code = ` import { Radio, Group } from '@mantine/core'; function Demo() { return ( ); } `; function Wrapper(props: Partial) { return ( ); } export const radioGroupDemo: MantineDemo = { type: 'configurator', component: Wrapper, centered: true, code, controls: [ { prop: 'label', type: 'string', initialValue: 'Select your favorite framework/library', libraryValue: '', }, { prop: 'description', type: 'string', initialValue: 'This is anonymous', libraryValue: '' }, { prop: 'error', type: 'string', initialValue: '', libraryValue: '' }, { prop: 'withAsterisk', type: 'boolean', initialValue: true, libraryValue: false }, ], }; ================================================ FILE: src/components/custom/components-demo/inputs/rating-demo.tsx ================================================ import { Rating, RatingProps } from '@mantine/core'; import { MantineDemo } from '../../../mantine/demo'; const code = ` import { Rating } from '@mantine/core'; function Demo() { return } `; function Wrapper(props: RatingProps) { return ; } export const ratingDemo: MantineDemo = { type: 'configurator', component: Wrapper, code, centered: true, controls: [ { prop: 'color', type: 'color', initialValue: "yellow", libraryValue: "yellow" }, { prop: 'size', type: 'size', initialValue: 'md', libraryValue: 'md' }, { prop: 'count', type: 'number', initialValue: 5, libraryValue: 5, min: 1, max: 8 }, { prop: 'highlightSelectedOnly', type: 'boolean', initialValue: false, libraryValue: false }, ], }; ================================================ FILE: src/components/custom/components-demo/inputs/segmented-control-demo.tsx ================================================ import { SegmentedControl } from '@mantine/core'; import { MantineDemo } from '../../../mantine/demo'; const code = ` import { SegmentedControl } from '@mantine/core'; function Demo() { return ; } `; function Wrapper(props: any) { return ; } export const segmentedControlDemo: MantineDemo = { type: 'configurator', component: Wrapper, code, controls: [ { prop: 'orientation', type: 'segmented', initialValue: 'horizontal', libraryValue: 'horizontal', data: [ { label: 'horizontal', value: 'horizontal' }, { label: 'vertical', value: 'vertical' }, ], }, { prop: 'fullWidth', type: 'boolean', initialValue: false, libraryValue: false }, { prop: 'withItemsBorders', type: 'boolean', initialValue: true, libraryValue: true }, { prop: 'color', type: 'color', initialValue: '', libraryValue: '' }, { type: 'size', prop: 'size', initialValue: 'sm', libraryValue: 'sm' }, { type: 'size', prop: 'radius', initialValue: 'sm', libraryValue: 'sm' }, { prop: 'transitionDuration', type: 'string', initialValue: '150', libraryValue: '150' }, { prop: 'disabled', type: 'boolean', initialValue: false, libraryValue: false }, { prop: 'readOnly', type: 'boolean', initialValue: false, libraryValue: false }, ], }; ================================================ FILE: src/components/custom/components-demo/inputs/slider-demo.tsx ================================================ import { Slider } from '@mantine/core'; import { MantineDemo } from '../../../mantine/demo'; function Wrapper(props: any) { return ( ); } const code = ` import { Slider } from '@mantine/core'; function Demo() { return ( ); } `; export const sliderDemo: MantineDemo = { type: 'configurator', component: Wrapper, code, centered: true, maxWidth: 400, controls: [ { prop: 'color', type: 'color', initialValue: '', libraryValue: '__none__' }, { prop: 'size', type: 'size', initialValue: 'md', libraryValue: 'md' }, { prop: 'radius', type: 'size', initialValue: 'xl', libraryValue: 'xl' }, { prop: 'showLabelOnHover', type: 'boolean', initialValue: true, libraryValue: true }, { prop: 'labelAlwaysOn', type: 'boolean', initialValue: false, libraryValue: false }, { prop: 'disabled', type: 'boolean', initialValue: false, libraryValue: false }, ], }; ================================================ FILE: src/components/custom/components-demo/inputs/switch-demo.tsx ================================================ import { Switch } from '@mantine/core'; import { MantineDemo } from '../../../mantine/demo'; const code = ` import { Switch } from '@mantine/core'; function Demo() { return ( ); } `; export const switchDemo: MantineDemo = { type: 'configurator', component: (props: any) => , code, centered: true, controls: [ { prop: 'color', type: 'color', initialValue: '', libraryValue: '' }, { prop: 'labelPosition', type: 'segmented', data: [ { value: 'right', label: 'Right' }, { value: 'left', label: 'Left' }, ], initialValue: 'right', libraryValue: 'right', }, { prop: 'label', type: 'string', initialValue: 'I agree to sell my privacy', libraryValue: '' }, { prop: 'description', type: 'string', initialValue: '', libraryValue: '' }, { prop: 'error', type: 'string', initialValue: '', libraryValue: '' }, { prop: 'size', type: 'size', initialValue: 'sm', libraryValue: 'sm' }, { prop: 'radius', type: 'size', initialValue: 'xl', libraryValue: 'xl' }, { prop: 'disabled', type: 'boolean', initialValue: false, libraryValue: false }, ], }; ================================================ FILE: src/components/custom/components-demo/inputs/switch-group-demo.tsx ================================================ import { Group, Switch, SwitchGroupProps } from '@mantine/core'; import { MantineDemo } from '../../../mantine/demo'; const code = ` import { Switch, Group } from '@mantine/core'; function Demo() { return ( ); } `; function Wrapper(props: SwitchGroupProps) { return ( ); } export const switchGroupDemo: MantineDemo = { type: 'configurator', component: Wrapper, code, centered: true, controls: [ { prop: 'label', type: 'string', initialValue: 'Select your favorite framework/library', libraryValue: '', }, { prop: 'description', type: 'string', initialValue: 'This is anonymous', libraryValue: '' }, { prop: 'error', type: 'string', initialValue: '', libraryValue: '' }, { prop: 'withAsterisk', type: 'boolean', initialValue: true, libraryValue: false }, ], }; ================================================ FILE: src/components/custom/components-demo/inputs/text-input-demo.tsx ================================================ import { TextInput } from '@mantine/core'; import { inputControls } from '../../../../utils/input-controls'; import { MantineDemo } from '../../../mantine/demo'; const code = ` import { TextInput } from '@mantine/core'; function Demo() { return ( ); } `; function Wrapper(props: any) { return ; } export const textInputDemo: MantineDemo = { type: 'configurator', component: Wrapper, code, centered: true, maxWidth: 340, controls: inputControls, }; ================================================ FILE: src/components/custom/components-demo/inputs/textarea-demo.tsx ================================================ import { Textarea } from '@mantine/core'; import { MantineDemo } from '../../../mantine/demo'; import { inputControls } from '../../../../utils/input-controls'; const code = ` import { Textarea } from '@mantine/core'; function Demo() { return (