Showing preview only (2,587K chars total). Download the full file or copy to clipboard to get everything.
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.
## 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 (
<MantineProvider theme={yourCustomTheme}>
<YourAppComponents />
</MantineProvider>
);
}
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
[](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 (
<PageLayout
title="About Mantine Hub 😍"
description="Mantine Hub is a collection of UI themes, blocks, and templates to help you build faster and better with Mantine."
showActionButtons={false}
>
<Stack>
<Group>
<Button
variant="filled"
size="sm"
component="a"
href="https://www.linkedin.com/in/abhishekslal"
target="_blank"
>
Contact us
</Button>
<Button
variant="subtle"
size="sm"
component="a"
href="https://www.buymeacoffee.com/abhishekslal01"
target="_blank"
>
Buy me a coffee
</Button>
</Group>
<Space mb="xs" />
<Box
bd={"1px solid var(--mantine-color-default-border)"}
p={"lg"}
style={{ borderRadius: "var(--mantine-radius-default)" }}
>
<AboutPage />
</Box>
</Stack>
</PageLayout>
);
}
================================================
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 (
<div>
<Title order={2} pt="xl">
{category?.name} components
</Title>
<CategoryPage components={components} />
</div>
);
}
================================================
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 (
<PageLayout
title="Mantine UI Blocks 🚀"
description="Accelerate your development with our ever-growing library of beautifully designed UI blocks. Just copy, paste, and customize."
isBlockPage
>
<BlockComponents />
{children}
</PageLayout>
);
}
================================================
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 (
<PageLayout
title="Feedbacks Received 🤗"
description="See why our community values what we do. Real testimonials from real people who’ve been part of the journey"
showActionButtons={false}
>
<Stack>
<Group>
<Button
variant="filled"
size="sm"
component="a"
href="https://github.com/orgs/mantinedev/discussions/7056"
target="_blank"
>
Give Feedback
</Button>
<Button
variant="subtle"
size="sm"
component="a"
href="https://github.com/RubixCube-Innovations/mantine-theme-builder"
target="_blank"
>
Star us on Github
</Button>
</Group>
<Space mb="sm" />
<TestimonialGrid testimonialItems={testimonialItems} />
</Stack>
</PageLayout>
);
}
================================================
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 (
<PageLayout
title="How to Use 🌟"
description="This is a guide how to use Mantine Theme Builder in your Mantine project"
showActionButtons={true}
>
<Stack>
<Space mb="xs" />
<Box
bd={"1px solid var(--mantine-color-default-border)"}
p={"lg"}
style={{ borderRadius: "var(--mantine-radius-default)" }}
>
<HowToUsePage />
</Box>
</Stack>
</PageLayout>
);
}
================================================
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 (
<html lang="en" {...mantineHtmlProps}>
<head>
<ColorSchemeScript />
<GoogleAnalytics />
<MicrosoftClarity />
</head>
<body>
<div id="root">
<ThemeProvider>{children}</ThemeProvider>
{/* <MantineProvider>{children}</MantineProvider> */}
</div>
</body>
</html>
);
}
================================================
FILE: src/app/loading.tsx
================================================
import { Center, Loader } from "@mantine/core";
export default function Loading() {
return (
<Center w={"100vw"} h={"100vh"}>
<Loader type="bars" size={"sm"} />
</Center>
);
}
================================================
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 (
<PageLayout
title="Mantine Modern Themes 🎨"
description={
<>
Save time on styling with our ready-to-use themes for{" "}
<Anchor target="_blank" href="https://mantine.dev/">
Mantine
</Anchor>{" "}
components. Just copy, paste, and watch your app come to life.
</>
}
>
<MantineCards />
</PageLayout>
);
}
================================================
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 (
<PageLayout
title="Mantine Components Playground ⛹️♂️"
description="Preview all Mantine components with your theme. Explore variants, sizes, and states in real time."
>
<ComponentsDemo />
</PageLayout>
);
}
================================================
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 (
<>
<Script
src={`https://www.googletagmanager.com/gtag/js?id=G-1YSTDP5D9G`}
strategy="afterInteractive"
/>
<Script id="google-analytics" strategy="afterInteractive">
{`
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-1YSTDP5D9G');
`}
</Script>
</>
);
}
================================================
FILE: src/components/MicrosoftClarity.tsx
================================================
'use client';
import Script from 'next/script';
export default function MicrosoftClarity() {
return (
<Script id="microsoft-clarity" strategy="afterInteractive">
{`
(function(c,l,a,r,i,t,y){
c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
})(window, document, "clarity", "script", "oqiwig5uux");
`}
</Script>
);
}
================================================
FILE: src/components/custom/about/about.tsx
================================================
import { Anchor, Box, Divider, List, Stack, Text, Title } from "@mantine/core";
export const AboutPage = () => {
return (
<Stack>
{/* <Title order={2}>About Mantine Theme Builder</Title> */}
<Box>
<Title order={3}>🤘 Motivation</Title>
<Divider my="sm" />
<Text>
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.
</Text>
<br />
<Text>
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.
</Text>
<br />
<Text>
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.
</Text>
</Box>
<Box mt="md">
<Title order={3}>📌 What We Offer</Title>
<Divider my="sm" />
<Title order={4}>🎨 Themes</Title>
<Text>
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.
</Text>
<br />
<Title order={4}>🧩 Blocks</Title>
<Text>
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.
<br />
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.
</Text>
<br />
<Title order={4}>⛹️♂️ Playground</Title>
<Text>
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.
</Text>
</Box>
{/* <Box mt="lg">
<Title order={3}>🎨 Understanding the Color Schema</Title>
<Divider my="sm" />
<Text>
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.
</Text>
<br />
<Text>
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.
<br />
<br />
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.
</Text>
</Box> */}
<Box mt={"md"}>
<Title order={3}>🚀 Future Plans</Title>
<Divider my="sm" />
<Text>
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.
<br />
<br />
Stay tuned for exciting updates, and let us know what features you'd like to see next!
</Text>
</Box>
<Box mt={"md"}>
<Title order={3}>🧑💻 Contributors</Title>
<Divider my="sm" />
<Text>
This project is maintained by{" "}
<Anchor href="https://github.com/Abhishek-S-Lal" target="_blank">
Abhishek-S-Lal
</Anchor>{" "}
and{" "}
<Anchor href="https://github.com/gopukr" target="_blank">
gopukr
</Anchor>
. Contributions from the community are welcome and appreciated. Please see our{" "}
<Anchor href="https://github.com/RubixCube-Innovations/mantine-theme-builder/blob/main/CONTRIBUTING.md">
CONTRIBUTING.md file
</Anchor>{" "}
for more information on how to get involved.
</Text>
</Box>
<Box mt="md">
<Title order={3}>🤝 Join us</Title>
<Divider my="sm" />
<Text>
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.
</Text>
<br/>
<Text>If you find this project useful, please consider</Text>
<List type="unordered">
<List.Item icon="⭐️">
Starring the repository on{" "}
<Anchor href="https://github.com/RubixCube-Innovations/mantine-theme-builder" target="_blank">
GitHub
</Anchor>
</List.Item>
<List.Item icon="🫶">Sharing the project with your friends and colleagues</List.Item>
<List.Item icon="👩💻">Contributing to the project</List.Item>
<Anchor href="https://www.buymeacoffee.com/abhishekslal01" target="_blank">
<List.Item icon="🥤">Buy me a coffee</List.Item>
</Anchor>
</List>
<br />
</Box>
</Stack>
);
};
================================================
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 (
<Box>
<Container size="md" className={styles.container}>
<Stack gap="xl" align="center">
<Group ta={"center"} justify="center" gap={"xl"}>
<Text fz={"4rem"} fw={600} className={styles.title} ta={"center"}>
Coming Soon
</Text>
<Text c={"dimmed"} maw={"380"}>
We're working hard to bring you more awesome block. Stay tuned for updates!
</Text>
</Group>
{/* <Box my={rem(24)}>
{!isSubscribed ? (
<Group gap={8}>
<TextInput
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="Enter your email"
leftSection={<MagnifyingGlassIcon className={styles.searchIcon} />}
size="lg"
/>
<Button size="lg" radius="md" onClick={handleSubscribe}>
Notify Me
</Button>
</Group>
) : (
<Text className={styles.successMessage}>Thanks for subscribing! We'll keep you posted.</Text>
)}
</Box> */}
{/* <Group gap="lg">
<Button
variant="subtle"
className={styles.socialButton}
onClick={() => handleSocialClick("https://twitter.com")}
>
<TwitterLogoIcon className={styles.socialIcon} />
</Button>
<Button
variant="subtle"
className={styles.socialButton}
onClick={() => handleSocialClick("https://instagram.com")}
>
<InstagramLogoIcon className={styles.socialIcon} />
</Button>
<Button
variant="subtle"
className={styles.socialButton}
onClick={() => handleSocialClick("https://github.com")}
>
<GitHubLogoIcon className={styles.socialIcon} />
</Button>
</Group> */}
</Stack>
</Container>
</Box>
);
};
================================================
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 (
<Popover position="bottom-start">
<Popover.Target>
<Button size="sm">{BUTTON_LABEL}</Button>
</Popover.Target>
<Popover.Dropdown>
<Customizer />
</Popover.Dropdown>
</Popover>
);
}
function Customizer() {
const { setTheme } = useTheme();
const { colorScheme, setColorScheme } = useMantineColorScheme();
const [localThemeConfig, setLocalThemeConfig, removeLocalThemeConfig] = useLocalStorage<IThemeConfig>({
key: "mantine-theme",
});
const [baseColors, setBaseColors] = React.useState<any>(SHADCN_DEFAULT_COLORS);
const [config, setConfig] = React.useState<IThemeConfig>({
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) => (
<Button
variant={config.color === color.id ? "outline" : "default"}
leftSection={<ColorSwatch size={20} color={color.color} />}
key={color.id}
onClick={() => {
const updatedConfig = {
...config,
color: color.id,
};
setConfig(updatedConfig);
setLocalThemeConfig(updatedConfig);
setTheme((currentTheme) => ({
...currentTheme,
primaryColor: color.id,
primaryShade: color?.primaryShade as unknown as MantineColorShade,
colors: {
...currentTheme?.colors,
secondary: getSecondaryPalette(config.style, color.id) as unknown as MantineColorsTuple,
dark: getSecondaryPalette(config.style, color.id) as unknown as MantineColorsTuple,
},
}));
}}
>
{color.name}
</Button>
));
return (
<Box>
<Stack gap="md">
<Group justify="space-between">
<Box>
<Text fw={500}>{BUTTON_LABEL}</Text>
<Text size="xs" c="dimmed">
Pick a style and color for your components.
</Text>
</Box>
<Button
variant="subtle"
size="xs"
onClick={() => {
setConfig({
...config,
color: SHADCN_DEFAULT_COLORS[0].id,
style: "shadcn",
radius: "sm",
});
setTheme({
...shadcnTheme,
primaryColor: SHADCN_DEFAULT_COLORS[0].id,
});
setBaseColors(SHADCN_DEFAULT_COLORS);
removeLocalThemeConfig();
}}
>
<ResetIcon />
</Button>
</Group>
<Stack gap="xs">
<Text size="xs">Style</Text>
<SimpleGrid cols={3}>
<Button
variant={config.style === "mantine" ? "outline" : "default"}
size="xs"
onClick={() => {
//TODO: Refactoring needed
const updatedConfig = {
...config,
style: "mantine",
color: MANTINE_DEFAULT_COLORS[0].id,
};
setConfig(updatedConfig);
setLocalThemeConfig(updatedConfig);
setTheme(() => ({
...mantineTheme,
primaryColor: MANTINE_DEFAULT_COLORS[0].id,
}));
}}
>
Mantine
</Button>
<Button
variant={config.style === "shadcn" ? "outline" : "default"}
size="xs"
onClick={() => {
const updatedConfig = {
...config,
style: "shadcn",
color: SHADCN_DEFAULT_COLORS[0].id,
};
setConfig(updatedConfig);
setLocalThemeConfig(updatedConfig);
setTheme(() => ({
...shadcnTheme,
primaryColor: SHADCN_DEFAULT_COLORS[0].id,
}));
}}
>
Shadcn
</Button>
<Button
variant={config.style === "radixui" ? "outline" : "default"}
size="xs"
disabled
>
RadixUI
<Tooltip label="RadixUI inspired glassmoriphic themes coming soon.">
<InfoCircledIcon width={"14px"} height={"14px"} style={{ marginLeft: "var(--mantine-spacing-2xs)" }} />
</Tooltip>
</Button>
</SimpleGrid>
</Stack>
<Stack gap="xs">
<Text size="xs">Color</Text>
<SimpleGrid cols={3}>{mantineColorButtons}</SimpleGrid>
</Stack>
<Stack gap="xs">
<Text size="xs">Radius</Text>
<SimpleGrid cols={5}>
{["xs", "sm", "md", "lg", "xl"].map((value: string) => {
return (
<Button
variant={"outline"}
style={{
borderColor:
config.radius === value
? "var(--mantine-primary-color-filled)"
: "var(--mantine-color-default-border)",
}}
size="xs"
key={value}
onClick={() => {
const updatedConfig = {
...config,
radius: value,
};
setConfig(updatedConfig);
setLocalThemeConfig(updatedConfig);
setTheme((prev) => ({
...prev,
defaultRadius: value,
}));
}}
>
{value}
</Button>
);
})}
</SimpleGrid>
</Stack>
<Stack gap="xs">
<Text size="xs">Mode</Text>
<SimpleGrid cols={3}>
<Button
variant={"outline"}
style={{
borderColor:
colorScheme === "light"
? "var(--mantine-primary-color-filled)"
: "var(--mantine-color-default-border)",
}}
size="xs"
onClick={() => setColorScheme("light")}
>
<Group gap="xs">
<SunIcon />
<Text fw="500">Light</Text>
</Group>
</Button>
<Button
variant={"outline"}
style={{
borderColor:
colorScheme === "dark"
? "var(--mantine-primary-color-filled)"
: "var(--mantine-color-default-border)",
}}
size="xs"
onClick={() => setColorScheme("dark")}
>
<Group gap="xs">
<MoonIcon />
<Text fw="500">Dark</Text>
</Group>
</Button>
</SimpleGrid>
</Stack>
</Stack>
</Box>
);
}
================================================
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 (
<Group>
<ChangeThemeButton />
{isBlockPage ? (
<Button variant="subtle" size="sm" component="a" href="https://github.com/RubixCube-Innovations/mantine-theme-builder/issues/new?title=Block+Request:" target="_blank">
Request a block
</Button>
) : (
<CopyThemeCodeButton />
)}
</Group>
);
};
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 = <TypeScriptIcon size={18} />;
const cssIcon = <CssIcon size={18} />;
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 (
<>
<Modal
size={"xl"}
opened={opened}
onClose={close}
transitionProps={{ transition: "fade", duration: 200 }}
styles={{
header: {
paddingRight: "var(--mantine-spacing-lg",
},
}}
centered
withCloseButton={false}
>
<Box mb={"md"}>
<Flex justify={"space-between"}>
<Title order={4}>Current Theme</Title>
<Group>
<Anchor href="https://vercel.com/font#get">
<Group gap={"3xs"}>
<ExternalLinkIcon color="var(--mantine-color-dimmed)" />
<Text c="dimmed" size="sm">
Font
</Text>
</Group>
</Anchor>
<Anchor href="/how-to-use">
<Group gap={"3xs"}>
<IconInfoCircle size={18} color="var(--mantine-color-dimmed)" />
<Text c="dimmed" size="sm">
How To use
</Text>
</Group>
</Anchor>
<ActionIcon size="md" variant="subtle" onClick={close}>
<CloseIcon />
</ActionIcon>
</Group>
</Flex>
</Box>
<ScrollArea h={"750"} style={{ borderRadius: "var(--mantine-radius-default)" }}>
<CodeHighlightTabs
style={{ maxWidth: "45.625rem" }}
styles={{
header: {
position: "sticky",
zIndex: 150,
top: 0,
background: "var(--mantine-color-secondary-filled)",
},
}}
code={[
{
fileName: "theme.ts",
code: getGeneratedTheme(theme) ?? "Error occured while generating theme",
language: "tsx",
icon: tsIcon,
},
{
fileName: "cssVariableResolver.ts",
code: getGeneratedCssVariables(theme) ?? "Error occured while generating css variables",
language: "tsx",
icon: tsIcon,
},
{
fileName: "style.css",
code: getGeneratedCssStyles(theme) ?? "Error occured while generating css styles",
language: "tsx",
icon: cssIcon,
},
]}
withCopyButton
copyLabel="Copy code"
copiedLabel="Copied!"
/>
</ScrollArea>
</Modal>
<Button variant="subtle" size="sm" onClick={open}>
Copy Code
</Button>
</>
);
};
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 (
<ActionIcon{{props}} aria-label="Settings">
<IconAdjustments style={{ width: '70%', height: '70%' }} stroke={1.5} />
</ActionIcon>
);
}
`;
function Wrapper(props: any) {
return (
<ActionIcon {...props} aria-label="Settings">
<IconAdjustments style={{ width: '70%', height: '70%' }} stroke={1.5} />
</ActionIcon>
);
}
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{{props}}>Button</Button>;
}
`;
function Wrapper(props: any) {
return <Button {...props}>Button</Button>;
}
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 <CloseButton{{props}} />;
}
`;
function Wrapper(props: any) {
return <CloseButton {...props} />;
}
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 (
<AreaChart
h={300}
data={data}
dataKey="date"
series={[
{ name: 'Apples', color: 'indigo.6' },
{ name: 'Oranges', color: 'blue.6' },
{ name: 'Tomatoes', color: 'teal.6' },
]}
{{props}}
/>
);
}
`;
function Wrapper(props: any) {
return (
<AreaChart
h={300}
data={data}
dataKey="date"
series={[
{ name: 'Apples', color: 'indigo.6' },
{ name: 'Oranges', color: 'blue.6' },
{ name: 'Tomatoes', color: 'teal.6' },
]}
{...props}
/>
);
}
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 (
<BarChart
h={300}
data={data}
dataKey="month"
series={[
{ name: 'Smartphones', color: 'violet.6' },
{ name: 'Laptops', color: 'blue.6' },
{ name: 'Tablets', color: 'teal.6' },
]}
{{props}}
/>
);
}
`;
function Wrapper(props: any) {
return (
<BarChart
h={300}
data={data}
dataKey="month"
series={[
{ name: 'Smartphones', color: 'violet.6' },
{ name: 'Laptops', color: 'blue.6' },
{ name: 'Tablets', color: 'teal.6' },
]}
{...props}
/>
);
}
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 (
<BubbleChart
h={60}
data={data}
range={[16, 225]}
dataKey={{ x: 'hour', y: 'index', z: 'value' }}
{{props}}
/>
);
}
`;
function Demo(props: any) {
return (
<BubbleChart
h={60}
data={data}
range={[16, 225]}
dataKey={{ x: 'hour', y: 'index', z: 'value' }}
{...props}
/>
);
}
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 (
<CompositeChart
h={300}
data={data}
dataKey="date"
maxBarWidth={30}
series={[
{ name: 'Tomatoes', color: 'rgba(18, 120, 255, 0.2)', type: 'bar' },
{ name: 'Apples', color: 'red.8', type: 'line' },
{ name: 'Oranges', color: 'yellow.8', type: 'area' },
]}
{{props}}
/>
);
}
`;
function Wrapper(props: any) {
return (
<CompositeChart
h={300}
data={data}
dataKey="date"
maxBarWidth={30}
series={[
{ name: 'Tomatoes', color: 'rgba(18, 120, 255, 0.2)', type: 'bar' },
{ name: 'Apples', color: 'red.8', type: 'line' },
{ name: 'Oranges', color: 'yellow.8', type: 'area' },
]}
{...props}
/>
);
}
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 <DonutChart{{props}} data={data} />;
}
`;
function Wrapper(props: any) {
return <DonutChart {...props} data={data} mih={300} />;
}
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 (
<LineChart
h={300}
data={data}
dataKey="date"
series={[
{ name: 'Apples', color: 'indigo.6' },
{ name: 'Oranges', color: 'blue.6' },
{ name: 'Tomatoes', color: 'teal.6' },
]}
{{props}}
/>
);
}
`;
function Wrapper(props: any) {
return (
<LineChart
h={300}
data={data}
dataKey="date"
series={[
{ name: 'Apples', color: 'indigo.6' },
{ name: 'Oranges', color: 'blue.6' },
{ name: 'Tomatoes', color: 'teal.6' },
]}
{...props}
/>
);
}
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 <PieChart{{props}} data={data} />;
}
`;
function Wrapper(props: any) {
return <PieChart {...props} data={data} miw={300} />;
}
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 (
<RadarChart
h={300}
data={data}
dataKey="product"
series={[
{ name: 'Sales January', color: 'lime.4', opacity: 0.1 },
{ name: 'Sales February', color: 'cyan.4', opacity: 0.1 },
]}
{{props}}
/>
);
}
`;
function Demo(props: any) {
return (
<RadarChart
h={300}
data={multiData}
dataKey="product"
withPolarRadiusAxis
series={[
{ name: 'Sales January', color: 'lime.4', opacity: 0.1 },
{ name: 'Sales February', color: 'cyan.4', opacity: 0.1 },
]}
{...props}
/>
);
}
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 (
<ScatterChart
h={350}
data={data}
dataKey={{ x: 'age', y: 'BMI' }}
xAxisLabel="Age"
yAxisLabel="BMI"
withLegend
legendProps={{ verticalAlign: 'bottom', height: 20 }}
/>
);
}
`;
function Demo() {
return (
<ScatterChart
h={350}
data={doubleData}
dataKey={{ x: 'age', y: 'BMI' }}
xAxisLabel="Age"
yAxisLabel="BMI"
withLegend
legendProps={{ verticalAlign: 'bottom', height: 20 }}
/>
);
}
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 (
<Sparkline
w={200}
h={60}
data={[10, 20, 40, 20, 40, 10, 50]}
{{props}}
/>
);
}
`;
function Wrapper(props: any) {
return <Sparkline w={200} h={60} data={[10, 20, 40, 20, 40, 10, 50]} {...props} />;
}
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 (
<Autocomplete
{{props}}
placeholder="Autocomplete placeholder"
data={['React', 'Angular', 'Vue', 'Svelte']}
/>
);
}
`;
function Wrapper(props: any) {
return (
<Autocomplete
{...props}
placeholder="Autocomplete placeholder"
data={['React', 'Angular', 'Vue', 'Svelte']}
/>
);
}
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 (
<MultiSelect
{{props}}
placeholder="MultiSelect placeholder"
data={['React', 'Angular', 'Vue', 'Svelte']}
/>
);
}
`;
function Wrapper(props: any) {
return (
<MultiSelect
{...props}
placeholder="MultiSelect placeholder"
data={['React', 'Angular', 'Vue', 'Svelte']}
/>
);
}
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 (
<PillsInput
{{props}}
>
<Pill.Group>
<Pill>React</Pill>
<Pill>Vue</Pill>
<Pill>Svelte</Pill>
<PillsInput.Field placeholder="Enter tags" />
</Pill.Group>
</PillsInput>
);
}
`;
function Wrapper(props: any) {
return (
<PillsInput {...props}>
<Pill.Group>
<Pill>React</Pill>
<Pill>Vue</Pill>
<Pill>Svelte</Pill>
<PillsInput.Field placeholder="Enter tags" />
</Pill.Group>
</PillsInput>
);
}
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 (
<Select
{{props}}
placeholder="Select placeholder"
data={['React', 'Angular', 'Vue', 'Svelte']}
/>
);
}
`;
function Wrapper(props: any) {
return (
<Select
{...props}
placeholder="Select placeholder"
data={['React', 'Angular', 'Vue', 'Svelte']}
/>
);
}
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 (
<TagsInput
{{props}}
placeholder="TagsInput placeholder"
value={['First', 'Second']}
data={['React', 'Angular', 'Vue', 'Svelte']}
/>
);
}
`;
function Wrapper(props: any) {
return (
<TagsInput
{...props}
placeholder="TagsInput placeholder"
value={['First', 'Second']}
data={['React', 'Angular', 'Vue', 'Svelte']}
/>
);
}
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 (
<Group gap={"2rem"} pt={"xl"} align="flex-start" justify="center" wrap="nowrap">
<Box className={classes.navbarWrapper} visibleFrom="md">
<Navbar menu={demoComponentsNavbarData} />
</Box>
<Stack gap={"3xl"} px={0} className={classes.content}>
{demoComponentsNavbarData?.map((item) => {
return (
<Stack gap={"xs"} key={item.label} mb={"3xl"}>
<Title order={2}>{item.label}</Title>
<Divider />
{item.links.map((link) => {
return (
<Stack gap={"lg"} id={link.value} pt="xl" key={link.value} px={0}>
<Title order={3} key={link.label}>
{link.label}
</Title>
{link.demo && <Demo key={link.value} data={link.demo} />}
</Stack>
);
})}
</Stack>
);
})}
</Stack>
</Group>
);
};
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) => (
<Accordion.Item key={item.value} value={item.value}>
<Accordion.Control icon={item.emoji}>{item.value}</Accordion.Control>
<Accordion.Panel>{item.description}</Accordion.Panel>
</Accordion.Item>
));
return (
<Accordion{{props}} defaultValue="Apples">
{items}
</Accordion>
);
}
`;
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) => (
<Accordion.Item key={item.value} value={item.value}>
<Accordion.Control icon={item.emoji}>{item.value}</Accordion.Control>
<Accordion.Panel>{item.description}</Accordion.Panel>
</Accordion.Item>
));
return (
<Accordion {...props} defaultValue="Apples">
{items}
</Accordion>
);
}
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 <Avatar{{props}} />;
}
`;
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 (
<Box maw={300} mx="auto">
<BackgroundImage
{...props}
src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-6.png"
>
<Center p="md">
<Text c="white">
BackgroundImage component can be used to add any content on image. It is useful for hero
headers and other similar sections
</Text>
</Center>
</BackgroundImage>
</Box>
);
}
const code = `
import { BackgroundImage, Center, Text, Box } from '@mantine/core';
function Demo() {
return (
<Box maw={300} mx="auto">
<BackgroundImage
src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-6.png"
{{props}}
>
<Center p="md">
<Text c="white">
BackgroundImage component can be used to add any content on image. It is useful for hero
headers and other similar sections
</Text>
</Center>
</BackgroundImage>
</Box>
);
}
`;
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{{props}}>Badge</Badge>;
}
`;
function Wrapper(props: any) {
return <Badge {...props}>Badge</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 (
<Card shadow="sm" padding="lg" radius="md" withBorder>
<Card.Section>
<Image
src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-8.png"
height={160}
alt="Norway"
radius={"var(--mantine-radius-default"}
/>
</Card.Section>
<Group justify="space-between" mt="md" mb="xs">
<Text fw={500}>Norway Fjord Adventures</Text>
<Badge color="pink">On Sale</Badge>
</Group>
<Text size="sm" c="dimmed">
With Fjord Tours you can explore more of the magical fjord landscapes with tours and
activities on and around the fjords of Norway
</Text>
<Button color="blue" fullWidth mt="md" radius="md">
Book classic tour now
</Button>
</Card>
);
}
`;
function Demo() {
return (
<Card shadow="sm" padding="lg" radius="md" withBorder>
<Card.Section>
<Image
src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-8.png"
height={160}
alt="Norway"
radius={"var(--mantine-radius-default"}
/>
</Card.Section>
<Group justify="space-between" mt="md" mb="xs">
<Text fw={500}>Norway Fjord Adventures</Text>
<Badge color="red">On Sale</Badge>
</Group>
<Text size="sm" c="dimmed">
With Fjord Tours you can explore more of the magical fjord landscapes with tours and
activities on and around the fjords of Norway
</Text>
<Button color="green" fullWidth mt="md" radius="md">
Book classic tour now
</Button>
</Card>
);
}
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 (
<Group>
<ColorSwatch color="#009790" />
<ColorSwatch color="rgba(234, 22, 174, 0.5)" />
<ColorSwatch color="var(--mantine-color-orange-5)" />
</Group>
);
}
`;
function Demo() {
return (
<Group>
<ColorSwatch color="#009790" />
<ColorSwatch color="rgba(234, 22, 174, 0.5)" />
<ColorSwatch color="var(--mantine-color-orange-5)" />
</Group>
);
}
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 (
<Image
radius="md"
src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-7.png"
/>
);
}
`;
function Demo() {
return (
<Image
radius="md"
src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-7.png"
/>
);
}
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 (
<Indicator {...props}>
<Avatar
size="lg"
radius="sm"
src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-1.png"
/>
</Indicator>
);
}
const code = `
import { Indicator, Avatar } from '@mantine/core';
function Demo() {
return (
<Indicator{{props}}>
<Avatar
size="lg"
radius="sm"
src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-1.png"
/>
</Indicator>
);
}
`;
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 = (
<div>
<Box
component="img"
h={150}
ml={20}
mb={0}
mt={5}
maw="100%"
style={{ float: 'right' }}
src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Rock_in_caputh-WBTBWB-47.jpg/600px-Rock_in_caputh-WBTBWB-47.jpg"
alt="We Butter the Bread with Butter"
/>
<Text>
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.
</Text>
</div>
);
function Wrapper(props: Partial<SpoilerProps>) {
return (
<Box maw={520} mx="auto">
<Spoiler maxHeight={120} showLabel="Show more" hideLabel="Hide" {...props}>
{content}
</Spoiler>
</Box>
);
}
const code = `
import { Spoiler } from '@mantine/core';
function Demo() {
return (
<Spoiler maxHeight={120} showLabel="Show more" hideLabel="Hide">
{/* Content here */}
</Spoiler>
);
}
`;
function Demo() {
return <Wrapper />;
}
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 (
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
<ThemeIcon {...props}>
<IconPhoto style={{ width: '70%', height: '70%' }} />
</ThemeIcon>
</div>
);
}
const code = `
import { ThemeIcon } from '@mantine/core';
import { IconPhoto } from '@tabler/icons-react';
function Demo() {
return (
<ThemeIcon{{props}}>
<IconPhoto style={{ width: '70%', height: '70%' }} />
</ThemeIcon>
);
}
`;
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<TimelineProps>) {
const displayIcon = true;
return (
<Timeline active={1} bulletSize={24} lineWidth={2} {...props}>
<Timeline.Item
bullet={displayIcon ? <IconGitBranch size="0.8rem" /> : null}
title="New branch"
>
<Text c="dimmed" size="sm">
You've created new branch{' '}
<Text variant="link" component="span" inherit>
fix-notifications
</Text>{' '}
from master
</Text>
<Text size="xs" mt={4}>
2 hours ago
</Text>
</Timeline.Item>
<Timeline.Item bullet={displayIcon ? <IconGitCommit size="0.8rem" /> : null} title="Commits">
<Text c="dimmed" size="sm">
You've pushed 23 commits to{' '}
<Text variant="link" component="span" inherit>
fix-notifications
</Text>{' '}
branch
</Text>
<Text size="xs" mt={4}>
52 minutes ago
</Text>
</Timeline.Item>
<Timeline.Item
title="Pull request"
bullet={displayIcon ? <IconGitPullRequest size="0.8rem" /> : null}
lineVariant="dashed"
>
<Text c="dimmed" size="sm">
You've submitted a pull request{' '}
<Text variant="link" component="span" inherit>
Fix incorrect notification message (#187)
</Text>{' '}
</Text>
<Text size="xs" mt={4}>
34 minutes ago
</Text>
</Timeline.Item>
<Timeline.Item
title="Code review"
bullet={displayIcon ? <IconMessageDots size="0.8rem" /> : null}
>
<Text c="dimmed" size="sm">
<Text variant="link" component="span" inherit>
Robert Gluesticker
</Text>{' '}
left a code review on your pull request
</Text>
<Text size="xs" mt={4}>
12 minutes ago
</Text>
</Timeline.Item>
</Timeline>
);
}
function Wrapper(props: TimelineProps) {
return (
<Box maw={320} mx="auto">
<TimelineBase {...props} />
</Box>
);
}
const code = `
import { Timeline } from '@mantine/core';
function Demo() {
return (
<Timeline{{props}}>
{/* items */}
</Timeline>
);
}
`;
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 = <IconInfoCircle />;
return (
<Alert{{props}} icon={icon}>
{{children}}
</Alert>
);
}
`;
function Wrapper(props: any) {
return <Alert icon={<IconInfoCircle />} {...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 <Loader{{props}} />;
}
`;
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 (
<Box maw={400} mx="auto">
<Notification onClose={() => {}} {...props} />
</Box>
);
}
const code = `
import { Notification } from '@mantine/core';
function Demo() {
return (
<Notification{{props}}>
{{children}}
</Notification>
);
}
`;
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 <Progress{{props}} />;
}
`;
function Demo(props: any) {
return <Progress {...props} />;
}
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 (
<RingProgress
{...props}
label={
<Text size="xs" ta="center" px="xs" style={{ pointerEvents: 'none' }}>
Hover sections to see tooltips
</Text>
}
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 (
<RingProgress
{{props}}
label={
<Text size="xs" ta="center" px="xs" style={{ pointerEvents: 'none' }}>
Hover sections to see tooltips
</Text>
}
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 (
<SemiCircleProgress
{{props}}
label="Label"
/>
);
}
`;
function Wrapper(props: any) {
return <SemiCircleProgress label="Label" {...props} />;
}
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<SkeletonProps>) {
return (
<div>
<Skeleton height={50} circle mb="xl" {...props} />
<Skeleton height={8} radius="xl" {...props} />
<Skeleton height={8} mt={6} radius="xl" {...props} />
<Skeleton height={8} mt={6} width="70%" radius="xl" {...props} />
</div>
);
}
const code = (props: any) => `
import { Skeleton } from '@mantine/core';
function Demo() {
return (
<>
<Skeleton${props.animate ? '' : ' animate={false}'} height={50} circle mb="xl" />
<Skeleton${props.animate ? '' : ' animate={false}'} height={8} radius="xl" />
<Skeleton${props.animate ? '' : ' animate={false}'} height={8} mt={6} radius="xl" />
<Skeleton${
props.animate ? '' : ' animate={false}'
} height={8} mt={6} width="70%" radius="xl" />
</>
);
}
`;
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 (
<Checkbox
defaultChecked
{{props}}
/>
);
}
`;
export const checkboxDemo: MantineDemo = {
type: 'configurator',
component: (props: CheckboxProps) => <Checkbox {...props} defaultChecked />,
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 (
<Checkbox.Group
defaultValue={['react']}
{{props}}
>
<Group mt="xs">
<Checkbox value="react" label="React" />
<Checkbox value="svelte" label="Svelte" />
<Checkbox value="ng" label="Angular" />
<Checkbox value="vue" label="Vue" />
</Group>
</Checkbox.Group>
);
}
`;
function Wrapper(props: Partial<CheckboxGroupProps>) {
return (
<Checkbox.Group defaultValue={['react']} {...
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
SYMBOL INDEX (250 symbols across 161 files)
FILE: js/generated/theme-functions.cjs
function generateShadcnCSSFilledColorVariables (line 125) | function generateShadcnCSSFilledColorVariables(mode, isGeneration) {
function getPrimaryColorLight (line 145) | function getPrimaryColorLight(color) {
function getPrimaryColorLightHover (line 149) | function getPrimaryColorLightHover(color) {
function getPrimaryColorLightColor (line 152) | function getPrimaryColorLightColor(color) {
function generateShadcnCSSLightColorVariables (line 155) | function generateShadcnCSSLightColorVariables(mode, isGeneration) {
function generateShadcnCSSOutlineColorVariables (line 181) | function generateShadcnCSSOutlineColorVariables(mode, isGeneration) {
function generateShadcnCSSContrastColorVariables (line 201) | function generateShadcnCSSContrastColorVariables(mode) {
FILE: js/scripts/compileTS.cjs
function convertTsToJs (line 6) | function convertTsToJs(tsFilePath) {
FILE: js/scripts/components.cjs
function convertCase (line 4) | function convertCase(string) {
function removeReact (line 12) | function removeReact(input) {
function getComponentCode (line 25) | function getComponentCode(componentFolder, componentName) {
function convertComponentName (line 50) | function convertComponentName(input) {
function getAllComponents (line 57) | function getAllComponents() {
FILE: js/scripts/generateCssVariableResolver.cjs
function generateCSSVariableResolvers (line 7) | function generateCSSVariableResolvers(style, colors, inputFilePath, outp...
FILE: js/scripts/generateStyles.cjs
function generateCssStyles (line 4) | function generateCssStyles(location, outputFileName) {
FILE: js/scripts/generateThemes.cjs
function generateThemes (line 5) | function generateThemes(style, colors, inputFilePath, outputFileName) {
FILE: src/app/about/page.tsx
function Page (line 7) | function Page() {
FILE: src/app/blocks/[slug]/page.tsx
function generateStaticParams (line 7) | async function generateStaticParams() {
function Page (line 13) | async function Page({ params }: { params: Promise<{ slug: string }> }) {
FILE: src/app/blocks/layout.tsx
function BlockPageLayout (line 4) | function BlockPageLayout({ children }: { children: React.ReactNode }) {
FILE: src/app/blocks/page.tsx
function Page (line 5) | function Page() {
FILE: src/app/feedback/page.tsx
function Page (line 8) | function Page() {
FILE: src/app/how-to-use/page.tsx
function Page (line 7) | function Page() {
FILE: src/app/layout.tsx
function RootLayout (line 99) | function RootLayout({ children }: { children: React.ReactNode }) {
FILE: src/app/loading.tsx
function Loading (line 3) | function Loading() {
FILE: src/app/page.tsx
function Page (line 7) | function Page() {
FILE: src/app/playground/page.tsx
function Page (line 6) | function Page() {
FILE: src/app/sitemap.ts
function sitemap (line 7) | function sitemap(): MetadataRoute.Sitemap {
FILE: src/components/GoogleAnalytics.tsx
function GoogleAnalytics (line 5) | function GoogleAnalytics() {
FILE: src/components/MicrosoftClarity.tsx
function MicrosoftClarity (line 5) | function MicrosoftClarity() {
FILE: src/components/custom/change-theme-section/change-theme-button.tsx
type IThemeConfig (line 26) | interface IThemeConfig {
constant BUTTON_LABEL (line 32) | const BUTTON_LABEL = "Change Theme";
function ChangeThemeButton (line 33) | function ChangeThemeButton() {
function Customizer (line 47) | function Customizer() {
FILE: src/components/custom/components-demo/buttons/action-icon-demo.tsx
function Wrapper (line 19) | function Wrapper(props: any) {
FILE: src/components/custom/components-demo/buttons/button-demo.tsx
function Wrapper (line 13) | function Wrapper(props: any) {
FILE: src/components/custom/components-demo/buttons/close-button-demo.tsx
function Wrapper (line 12) | function Wrapper(props: any) {
FILE: src/components/custom/components-demo/charts/area-chart-demo.tsx
function Wrapper (line 27) | function Wrapper(props: any) {
FILE: src/components/custom/components-demo/charts/bar-chart-demo.tsx
function Wrapper (line 27) | function Wrapper(props: any) {
FILE: src/components/custom/components-demo/charts/bubble-chart-demo.tsx
function Demo (line 23) | function Demo(props: any) {
FILE: src/components/custom/components-demo/charts/composite-chart-demo.tsx
function Wrapper (line 28) | function Wrapper(props: any) {
FILE: src/components/custom/components-demo/charts/donot-chart-demo.tsx
function Wrapper (line 14) | function Wrapper(props: any) {
FILE: src/components/custom/components-demo/charts/line-chart-demo.tsx
function Wrapper (line 27) | function Wrapper(props: any) {
FILE: src/components/custom/components-demo/charts/pie-chart-demo.tsx
function Wrapper (line 14) | function Wrapper(props: any) {
FILE: src/components/custom/components-demo/charts/radar-chart-demo.tsx
function Demo (line 26) | function Demo(props: any) {
FILE: src/components/custom/components-demo/charts/scatter-chart-demo.tsx
function Demo (line 24) | function Demo() {
FILE: src/components/custom/components-demo/charts/sparkline-demo.tsx
function Wrapper (line 20) | function Wrapper(props: any) {
FILE: src/components/custom/components-demo/combobox/autocomplete-demo.tsx
function Wrapper (line 20) | function Wrapper(props: any) {
FILE: src/components/custom/components-demo/combobox/multi-select-demo.tsx
function Wrapper (line 20) | function Wrapper(props: any) {
FILE: src/components/custom/components-demo/combobox/pills-input-demo.tsx
function Wrapper (line 25) | function Wrapper(props: any) {
FILE: src/components/custom/components-demo/combobox/select-demo.tsx
function Wrapper (line 20) | function Wrapper(props: any) {
FILE: src/components/custom/components-demo/combobox/tags-input-demo.tsx
function Wrapper (line 21) | function Wrapper(props: any) {
FILE: src/components/custom/components-demo/data-display/accordion-demo.tsx
function Demo (line 45) | function Demo(props: AccordionProps) {
FILE: src/components/custom/components-demo/data-display/background-image-demo.tsx
function Wrapper (line 4) | function Wrapper(props: BackgroundImageProps) {
FILE: src/components/custom/components-demo/data-display/badge-demo.tsx
function Wrapper (line 12) | function Wrapper(props: any) {
FILE: src/components/custom/components-demo/data-display/card-demo.tsx
function Demo (line 38) | function Demo() {
FILE: src/components/custom/components-demo/data-display/color-swatch-demo.tsx
function Demo (line 18) | function Demo() {
FILE: src/components/custom/components-demo/data-display/image-demo.tsx
function Demo (line 17) | function Demo() {
FILE: src/components/custom/components-demo/data-display/indicator-demo.tsx
function Demo (line 4) | function Demo(props: IndicatorProps) {
FILE: src/components/custom/components-demo/data-display/spoiler-demo.tsx
function Wrapper (line 30) | function Wrapper(props: Partial<SpoilerProps>) {
function Demo (line 53) | function Demo() {
FILE: src/components/custom/components-demo/data-display/theme-icon-demo.tsx
function Wrapper (line 5) | function Wrapper(props: ThemeIconProps) {
FILE: src/components/custom/components-demo/data-display/timeline-demo.tsx
function TimelineBase (line 5) | function TimelineBase({ ...props }: Partial<TimelineProps>) {
function Wrapper (line 73) | function Wrapper(props: TimelineProps) {
FILE: src/components/custom/components-demo/feedback/alert-demo.tsx
function Wrapper (line 20) | function Wrapper(props: any) {
FILE: src/components/custom/components-demo/feedback/notification-demo.tsx
function Wrapper (line 4) | function Wrapper(props: NotificationProps) {
FILE: src/components/custom/components-demo/feedback/progress-demo.tsx
function Demo (line 12) | function Demo(props: any) {
FILE: src/components/custom/components-demo/feedback/ring-progress-demo.tsx
function Wrapper (line 4) | function Wrapper(props: RingProgressProps) {
FILE: src/components/custom/components-demo/feedback/semi-circle-progress-demo.tsx
function Wrapper (line 18) | function Wrapper(props: any) {
FILE: src/components/custom/components-demo/feedback/skeleton-demo.tsx
function Wrapper (line 4) | function Wrapper(props: Partial<SkeletonProps>) {
FILE: src/components/custom/components-demo/inputs/checkbox-group-demo.tsx
function Wrapper (line 25) | function Wrapper(props: Partial<CheckboxGroupProps>) {
FILE: src/components/custom/components-demo/inputs/chip-demo.tsx
function Wrapper (line 4) | function Wrapper(props: ChipProps) {
FILE: src/components/custom/components-demo/inputs/color-input-demo.tsx
function Wrapper (line 19) | function Wrapper(props: any) {
FILE: src/components/custom/components-demo/inputs/fieldset-demo.tsx
function Wrapper (line 17) | function Wrapper(props: any) {
FILE: src/components/custom/components-demo/inputs/file-input.tsx
function Wrapper (line 19) | function Wrapper(props: any) {
FILE: src/components/custom/components-demo/inputs/native-select-demo.tsx
function Wrapper (line 13) | function Wrapper(props: any) {
FILE: src/components/custom/components-demo/inputs/pin-input-demo.tsx
function Wrapper (line 12) | function Wrapper(props: PinInputProps) {
FILE: src/components/custom/components-demo/inputs/radio-demo.tsx
function Wrapper (line 17) | function Wrapper(props: RadioProps) {
FILE: src/components/custom/components-demo/inputs/radio-group-demo.tsx
function Wrapper (line 25) | function Wrapper(props: Partial<RadioGroupProps>) {
FILE: src/components/custom/components-demo/inputs/rating-demo.tsx
function Wrapper (line 12) | function Wrapper(props: RatingProps) {
FILE: src/components/custom/components-demo/inputs/segmented-control-demo.tsx
function Wrapper (line 12) | function Wrapper(props: any) {
FILE: src/components/custom/components-demo/inputs/slider-demo.tsx
function Wrapper (line 4) | function Wrapper(props: any) {
FILE: src/components/custom/components-demo/inputs/switch-group-demo.tsx
function Wrapper (line 24) | function Wrapper(props: SwitchGroupProps) {
FILE: src/components/custom/components-demo/inputs/text-input-demo.tsx
function Wrapper (line 19) | function Wrapper(props: any) {
FILE: src/components/custom/components-demo/inputs/textarea-demo.tsx
function Wrapper (line 19) | function Wrapper(props: any) {
FILE: src/components/custom/components-demo/miscellaneous/date-picker-input-demo.tsx
function Wrapper (line 19) | function Wrapper(props: any) {
FILE: src/components/custom/components-demo/miscellaneous/divider-demo.tsx
function Demo (line 37) | function Demo(props: any) {
FILE: src/components/custom/components-demo/miscellaneous/paper-demo.tsx
function Wrapper (line 4) | function Wrapper(props: any) {
FILE: src/components/custom/components-demo/miscellaneous/scroll-area-demo.tsx
function Content (line 4) | function Content() {
function Wrapper (line 38) | function Wrapper(props: ScrollAreaProps) {
FILE: src/components/custom/components-demo/navigation/anchor-demo.tsx
function Wrapper (line 17) | function Wrapper(props: any) {
FILE: src/components/custom/components-demo/navigation/nav-link-demo.tsx
function Demo (line 52) | function Demo(props: any) {
FILE: src/components/custom/components-demo/navigation/pagination-demo.tsx
function Wrapper (line 4) | function Wrapper(props: any) {
FILE: src/components/custom/components-demo/navigation/stepper-demo.tsx
function Wrapper (line 4) | function Wrapper(props: Partial<StepperProps>) {
FILE: src/components/custom/components-demo/navigation/tabs-demo.tsx
function Wrapper (line 5) | function Wrapper(props: TabsProps) {
FILE: src/components/custom/components-demo/overlays/authentication-form.tsx
type AuthenticationFormProps (line 16) | interface AuthenticationFormProps {
function AuthenticationForm (line 23) | function AuthenticationForm({
FILE: src/components/custom/components-demo/overlays/dialog-demo.tsx
function Demo (line 34) | function Demo() {
FILE: src/components/custom/components-demo/overlays/drawer-demo.tsx
function Demo (line 25) | function Demo() {
FILE: src/components/custom/components-demo/overlays/hover-card-demo.tsx
function Demo (line 27) | function Demo() {
FILE: src/components/custom/components-demo/overlays/loading-overlay-demo.tsx
function Demo (line 28) | function Demo() {
FILE: src/components/custom/components-demo/overlays/menu-demo.tsx
function DemoMenuItems (line 13) | function DemoMenuItems({ widthRightSection = true, withTarget = true }) {
function Demo (line 112) | function Demo() {
FILE: src/components/custom/components-demo/overlays/modal-demo.tsx
function Demo (line 25) | function Demo() {
FILE: src/components/custom/components-demo/overlays/overlay-demo.tsx
function Demo (line 28) | function Demo() {
FILE: src/components/custom/components-demo/overlays/popover-demo.tsx
function Demo (line 21) | function Demo() {
FILE: src/components/custom/components-demo/overlays/tooltip-demo.tsx
function Demo (line 16) | function Demo() {
FILE: src/components/custom/components-demo/typography/blockquote-demo.tsx
function Wrapper (line 19) | function Wrapper(props: any) {
FILE: src/components/custom/components-demo/typography/code-demo.tsx
function Demo (line 26) | function Demo() {
FILE: src/components/custom/components-demo/typography/highlight-demo.tsx
function Wrapper (line 4) | function Wrapper(props: HighlightProps) {
FILE: src/components/custom/components-demo/typography/list-demo.tsx
function Wrapper (line 4) | function Wrapper(props: ListProps) {
FILE: src/components/custom/components-demo/typography/mark-demo.tsx
function Wrapper (line 4) | function Wrapper(props: MarkProps) {
FILE: src/components/custom/components-demo/typography/table-demo.tsx
function Wrapper (line 12) | function Wrapper(props: TableProps) {
FILE: src/components/custom/components-demo/typography/text-demo.tsx
function Demo (line 32) | function Demo() {
FILE: src/components/custom/components-demo/typography/title-demo.tsx
function Demo (line 21) | function Demo() {
FILE: src/components/custom/testimonial/testimonial-item.tsx
type ITestimonialItem (line 3) | interface ITestimonialItem {
FILE: src/components/custom/theme-example-cards/activity-goal.tsx
function CardsActivityGoal (line 61) | function CardsActivityGoal() {
FILE: src/components/custom/theme-example-cards/calendar.tsx
function CardsCalendar (line 5) | function CardsCalendar() {
FILE: src/components/custom/theme-example-cards/chat.tsx
type User (line 49) | type User = (typeof users)[number];
function CardsChat (line 51) | function CardsChat() {
FILE: src/components/custom/theme-example-cards/cookie-settings.tsx
function CardsCookieSettings (line 3) | function CardsCookieSettings() {
FILE: src/components/custom/theme-example-cards/create-account.tsx
function CardsCreateAccount (line 5) | function CardsCreateAccount() {
FILE: src/components/custom/theme-example-cards/data-table.tsx
type Payment (line 67) | type Payment = {
function CardsDataTable (line 160) | function CardsDataTable() {
FILE: src/components/custom/theme-example-cards/metric.tsx
function CardsMetric (line 7) | function CardsMetric() {
FILE: src/components/custom/theme-example-cards/payment-method.tsx
function CardsPaymentMethod (line 15) | function CardsPaymentMethod() {
FILE: src/components/custom/theme-example-cards/report-issue.tsx
function CardsReportIssue (line 4) | function CardsReportIssue() {
FILE: src/components/custom/theme-example-cards/share.tsx
function CardsShare (line 3) | function CardsShare() {
FILE: src/components/custom/theme-example-cards/stats.tsx
function CardsStats (line 39) | function CardsStats() {
FILE: src/components/custom/theme-example-cards/team-members.tsx
function CardsTeamMembers (line 5) | function CardsTeamMembers() {
FILE: src/components/layouts/page-layout.tsx
type LayoutProps (line 8) | interface LayoutProps {
FILE: src/components/mantine/demo/CodeDemo/CodeDemo.tsx
type CodeDemoProps (line 7) | interface CodeDemoProps extends DemoCodeProps, DemoAreaProps {}
function CodeDemo (line 9) | function CodeDemo({
FILE: src/components/mantine/demo/ConfiguratorDemo/ConfiguratorDemo.tsx
type ConfiguratorControlOptions (line 36) | type ConfiguratorControlOptions =
type ConfiguratorDemoProps (line 45) | interface ConfiguratorDemoProps extends DemoAreaProps {
function ConfiguratorDemo (line 50) | function ConfiguratorDemo({
FILE: src/components/mantine/demo/ConfiguratorDemo/clear-props.ts
type Values (line 3) | type Values = Record<string, any>;
function clearProps (line 5) | function clearProps(controls: ConfiguratorControlOptions[], state: Value...
FILE: src/components/mantine/demo/ConfiguratorDemo/controls/ColorWheelIcon.tsx
function ColorWheelIcon (line 3) | function ColorWheelIcon() {
FILE: src/components/mantine/demo/ConfiguratorDemo/controls/ConfiguratorBoolean.control.tsx
type ConfiguratorBooleanControlOptions (line 5) | type ConfiguratorBooleanControlOptions = ConfiguratorControl<
type ConfiguratorBooleanControlProps (line 10) | interface ConfiguratorBooleanControlProps
function ConfiguratorBooleanControl (line 18) | function ConfiguratorBooleanControl({
FILE: src/components/mantine/demo/ConfiguratorDemo/controls/ConfiguratorColor.control.tsx
type ConfiguratorColorControlOptions (line 21) | type ConfiguratorColorControlOptions = ConfiguratorControl<
type ConfiguratorColorControlProps (line 26) | interface ConfiguratorColorControlProps
function ConfiguratorColorControl (line 34) | function ConfiguratorColorControl({
FILE: src/components/mantine/demo/ConfiguratorDemo/controls/ConfiguratorNumber.control.tsx
type ConfiguratorNumberControlOptions (line 5) | type ConfiguratorNumberControlOptions = ConfiguratorControl<
type ConfiguratorNumberControlProps (line 10) | interface ConfiguratorNumberControlProps extends BoxProps, ElementProps<...
function ConfiguratorNumberControl (line 19) | function ConfiguratorNumberControl({
FILE: src/components/mantine/demo/ConfiguratorDemo/controls/ConfiguratorSegmented.control.tsx
type ConfiguratorSegmentedControlOptions (line 6) | type ConfiguratorSegmentedControlOptions = ConfiguratorControl<
type ConfiguratorSegmentedControlProps (line 11) | interface ConfiguratorSegmentedControlProps
function ConfiguratorSegmentedControl (line 21) | function ConfiguratorSegmentedControl({
FILE: src/components/mantine/demo/ConfiguratorDemo/controls/ConfiguratorSelect.control.tsx
type ConfiguratorSelectControlOptions (line 6) | type ConfiguratorSelectControlOptions = ConfiguratorControl<
type ConfiguratorSelectControlProps (line 11) | interface ConfiguratorSelectControlProps
function ConfiguratorSelectControl (line 20) | function ConfiguratorSelectControl({
FILE: src/components/mantine/demo/ConfiguratorDemo/controls/ConfiguratorSize.control.tsx
constant MARKS (line 5) | const MARKS = [
type ConfiguratorSizeControlOptions (line 13) | type ConfiguratorSizeControlOptions = ConfiguratorControl<'size', { init...
type ConfiguratorSizeControlProps (line 15) | interface ConfiguratorSizeControlProps extends BoxProps, ElementProps<'d...
function ConfiguratorSizeControl (line 21) | function ConfiguratorSizeControl({
FILE: src/components/mantine/demo/ConfiguratorDemo/controls/ConfiguratorString.control.tsx
type ConfiguratorStringControlOptions (line 5) | type ConfiguratorStringControlOptions = ConfiguratorControl<
type ConfiguratorStringControlProps (line 10) | interface ConfiguratorStringControlProps
function ConfiguratorStringControl (line 18) | function ConfiguratorStringControl({
FILE: src/components/mantine/demo/ConfiguratorDemo/controls/get-control-label.ts
function getControlLabel (line 3) | function getControlLabel(label: string) {
FILE: src/components/mantine/demo/ConfiguratorDemo/controls/transform-select-data.ts
type SelectDataItem (line 3) | interface SelectDataItem {
type SelectData (line 8) | type SelectData = (string | SelectDataItem)[];
function transformSelectData (line 10) | function transformSelectData(data: SelectData): SelectDataItem[] {
FILE: src/components/mantine/demo/ConfiguratorDemo/controls/types.ts
type ConfiguratorControl (line 1) | type ConfiguratorControl<Type extends string, Params extends Record<stri...
type ShikiLanguage (line 9) | type ShikiLanguage = "tsx" | "scss" | "html" | "bash" | "json";
FILE: src/components/mantine/demo/ConfiguratorDemo/get-code-array.ts
type CodePayload (line 7) | type CodePayload = string | ((props: Record<string, any>) => string);
type Code (line 10) | type Code = CodePayload | { code: CodePayload; language: ShikiLanguage; ...
type GetCodeArrayInput (line 12) | interface GetCodeArrayInput {
type TransformCodePayloadInput (line 18) | interface TransformCodePayloadInput {
function transformCodePayload (line 24) | function transformCodePayload({ code, controls, state }: TransformCodePa...
function getCodeArray (line 30) | function getCodeArray({ code, controls, state }: GetCodeArrayInput) {
FILE: src/components/mantine/demo/ConfiguratorDemo/inject-props.tsx
function isMultiLine (line 1) | function isMultiLine(code: string) {
function injectProps (line 6) | function injectProps(props: any, code: string) {
FILE: src/components/mantine/demo/Demo/Demo.tsx
type DemoComponent (line 5) | interface DemoComponent {
type MantineDemo (line 9) | type MantineDemo =
type DemoProps (line 14) | interface DemoProps {
function Demo (line 18) | function Demo({ data }: DemoProps) {
FILE: src/components/mantine/demo/DemoArea/DemoArea.tsx
type DemoAreaProps (line 4) | interface DemoAreaProps {
function DemoArea (line 14) | function DemoArea({
FILE: src/components/mantine/demo/DemoCode/DemoCode.tsx
type DemoCodeProps (line 6) | interface DemoCodeProps {
function DemoCode (line 11) | function DemoCode({ code, defaultExpanded = true }: DemoCodeProps) {
FILE: src/components/mantine/demo/DemoColumns/DemoColumns.tsx
type DemoColumnsProps (line 5) | interface DemoColumnsProps extends DemoAreaProps {
function DemoColumns (line 11) | function DemoColumns({
FILE: src/components/mantine/demo/DemoRoot/DemoRoot.tsx
function DemoRoot (line 4) | function DemoRoot({ className, ...others }: React.ComponentPropsWithoutR...
FILE: src/components/mantine/demo/StylesApiDemo/StylesApiDemo.tsx
type StylesApiDemoProps (line 9) | interface StylesApiDemoProps extends DemoAreaProps {
function getCss (line 14) | function getCss(hovered: string | null) {
function StylesApiDemo (line 20) | function StylesApiDemo({
FILE: src/components/ui/chart-tooltip.tsx
type ChartTooltipProps (line 4) | interface ChartTooltipProps {
function ChartTooltip (line 9) | function ChartTooltip({ payload }: ChartTooltipProps) {
FILE: src/components/ui/header/header.tsx
constant APP_NAME (line 18) | const APP_NAME = "MantineHub";
type IMenuItem (line 19) | type IMenuItem = {
function Header (line 27) | function Header() {
FILE: src/components/ui/icons.tsx
type IconProps (line 1) | type IconProps = React.HTMLAttributes<SVGElement>
FILE: src/components/ui/navbar/navbar-links-group.tsx
type NavbarLinksGroupProps (line 8) | interface NavbarLinksGroupProps extends NavbarProps {
function NavbarLinksGroup (line 13) | function NavbarLinksGroup({ label, initiallyOpened, links, selected, set...
FILE: src/components/ui/navbar/navbar.tsx
type NavbarProps (line 6) | interface NavbarProps {
function Navbar (line 12) | function Navbar({menu}: {menu: NavbarProps[]}) {
FILE: src/feature/blocks/components/categories/category-card.tsx
type CategoryCardProps (line 7) | interface CategoryCardProps {
function CategoryCard (line 13) | function CategoryCard({ count, category, className }: CategoryCardProps) {
FILE: src/feature/blocks/components/categories/category-list.tsx
type CategoriesListProps (line 9) | interface CategoriesListProps {
function CategoriesList (line 13) | function CategoriesList({ groups }: CategoriesListProps) {
FILE: src/feature/blocks/components/categories/category-page.tsx
type CategoryPageProps (line 9) | interface CategoryPageProps {
FILE: src/feature/blocks/components/component-canvas/canvas-header.tsx
type CanvasHeaderProps (line 9) | interface CanvasHeaderProps extends UiComponent, React.ComponentPropsWit...
function CanvasHeader (line 18) | function CanvasHeader({
FILE: src/feature/blocks/components/component-canvas/color-control.tsx
type ColorControlProps (line 5) | interface ColorControlProps {
function ColorControl (line 10) | function ColorControl({ onChange, value }: ColorControlProps) {
FILE: src/feature/blocks/components/component-canvas/component-canvas.tsx
function ComponentCanvas (line 15) | function ComponentCanvas(props: UiComponent & { zindex: number }) {
FILE: src/feature/blocks/components/component-preview/component-preview.tsx
type ComponentPreviewProps (line 4) | interface ComponentPreviewProps {
function ComponentPreview (line 10) | function ComponentPreview({ children, canvas, withSpacing = false }: Com...
FILE: src/feature/blocks/components/shell/shell.tsx
type ShellProps (line 6) | interface ShellProps {
FILE: src/feature/blocks/data/categories.ts
constant CATEGORIES (line 4) | const CATEGORIES: CategoriesGroup[] = [
constant ALL_CATEGORIES (line 53) | const ALL_CATEGORIES = CATEGORIES.reduce<Category[]>((acc, group) => {
constant CATEGORIES_SLUGS (line 58) | const CATEGORIES_SLUGS = ALL_CATEGORIES.map((item) => item.slug);
FILE: src/feature/blocks/data/fn.ts
function getComponentsByCategory (line 4) | function getComponentsByCategory(): ComponentsMap {
function countComponentsByCategory (line 14) | function countComponentsByCategory() {
FILE: src/feature/blocks/data/types.ts
type Category (line 1) | interface Category {
type CategoriesGroup (line 8) | interface CategoriesGroup {
type CanvasAttributes (line 13) | interface CanvasAttributes {
type UiComponent (line 23) | interface UiComponent {
type ComponentInfo (line 30) | interface ComponentInfo {
type ComponentsMap (line 37) | interface ComponentsMap {
FILE: src/feature/blocks/lib/meet-our-team-1/meet-our-team-1.tsx
type IMember (line 52) | interface IMember {
FILE: src/feature/blocks/lib/meet-our-team-2/meet-our-team-2.tsx
type IMember (line 40) | interface IMember {
FILE: src/feature/blocks/lib/meet-our-team-3/meet-our-team-3.tsx
type IMember (line 35) | interface IMember {
FILE: src/feature/blocks/lib/meet-our-team-4/meet-our-team-4.tsx
type IMember (line 47) | interface IMember {
FILE: src/routeTree.gen.ts
type FileRoutesByPath (line 62) | interface FileRoutesByPath {
type FileRoutesByFullPath (line 110) | interface FileRoutesByFullPath {
type FileRoutesByTo (line 119) | interface FileRoutesByTo {
type FileRoutesById (line 128) | interface FileRoutesById {
type FileRouteTypes (line 138) | interface FileRouteTypes {
type RootRouteChildren (line 147) | interface RootRouteChildren {
FILE: src/theme-context.tsx
type ThemeContextType (line 12) | interface ThemeContextType {
function loadShiki (line 87) | async function loadShiki(): Promise<HighlighterGeneric<any, any>> {
FILE: src/themes/mantine/mantine-theme.ts
constant CONTAINER_SIZES (line 4) | const CONTAINER_SIZES: Record<string, string> = {
FILE: src/themes/shadcn/shadcn-theme.ts
constant CONTAINER_SIZES (line 34) | const CONTAINER_SIZES: Record<string, string> = {
FILE: src/themes/test/shadcn-theme-test.ts
constant CONTAINER_SIZES (line 33) | const CONTAINER_SIZES: Record<string, string> = {
FILE: src/utils/colors.ts
constant MANTINE_DEFAULT_COLORS (line 329) | const MANTINE_DEFAULT_COLORS = [
constant SHADCN_DEFAULT_COLORS (line 345) | const SHADCN_DEFAULT_COLORS = [
FILE: src/utils/data.ts
constant ICON_SIZE (line 92) | const ICON_SIZE = 16;
FILE: src/utils/theme-functions.ts
function generateShadcnCSSFilledColorVariables (line 107) | function generateShadcnCSSFilledColorVariables(mode: string, isGeneratio...
function getPrimaryColorLight (line 128) | function getPrimaryColorLight(color: string) {
function getPrimaryColorLightHover (line 132) | function getPrimaryColorLightHover(color: string) {
function getPrimaryColorLightColor (line 136) | function getPrimaryColorLightColor(color: string) {
function generateShadcnCSSLightColorVariables (line 140) | function generateShadcnCSSLightColorVariables(mode: string, isGeneration...
function generateShadcnCSSOutlineColorVariables (line 167) | function generateShadcnCSSOutlineColorVariables(mode: string, isGenerati...
function generateShadcnCSSContrastColorVariables (line 188) | function generateShadcnCSSContrastColorVariables(mode: string) {
FILE: src/utils/variants-data.ts
constant STATIC_VARIANTS (line 3) | const STATIC_VARIANTS = ['filled', 'light', 'outline', 'transparent', 'w...
constant INTERACTIVE_VARIANTS (line 5) | const INTERACTIVE_VARIANTS = [
Condensed preview — 334 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (2,689K chars).
[
{
"path": ".gitignore",
"chars": 292,
"preview": "# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\npnpm-debug.log*\nlerna-debug.log*\n\nnode_modules\ndist\ndis"
},
{
"path": ".prettierrc",
"chars": 90,
"preview": "{\n \"semi\": true,\n \"singleQuote\": false,\n \"trailingComma\": \"es5\",\n \"printWidth\": 120\n}\n"
},
{
"path": "CONTRIBUTING.md",
"chars": 2613,
"preview": "\n# Contributing to Mantine Theme Builder\n\nWe are excited that you're interested in contributing to **Mantine Theme Build"
},
{
"path": "LICENSE",
"chars": 1078,
"preview": "MIT License\n\nCopyright (c) 2024 RubixCube Innovations\n\nPermission is hereby granted, free of charge, to any person obtai"
},
{
"path": "README.md",
"chars": 3653,
"preview": "\n# Mantine Hub - Modern Themes, UI Blocks, Templates and much more for [Mantine UI Library](https://mantine.dev)\n\n**Mant"
},
{
"path": "_mantine.scss",
"chars": 996,
"preview": "@use \"sass:math\";\n\n// Define variables for your breakpoints,\n// values must be the same as in your theme\n$mantine-breakp"
},
{
"path": "eslint.config.js",
"chars": 844,
"preview": "import js from \"@eslint/js\";\nimport globals from \"globals\";\nimport reactHooks from \"eslint-plugin-react-hooks\";\nimport r"
},
{
"path": "js/generated/colors.cjs",
"chars": 17666,
"preview": "\"use strict\";\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.SHADCN_DEFAULT_COLORS = exports.MAN"
},
{
"path": "js/generated/colors.js",
"chars": 17666,
"preview": "\"use strict\";\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.SHADCN_DEFAULT_COLORS = exports.MAN"
},
{
"path": "js/generated/theme-functions.cjs",
"chars": 9784,
"preview": "\"use strict\";\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.getShadcnInputBg = exports.getShadc"
},
{
"path": "js/scripts/compileTS.cjs",
"chars": 1589,
"preview": "const { exec } = require(\"child_process\");\nconst path = require(\"path\");\nconst fs = require(\"fs\");\n\n// Function to conve"
},
{
"path": "js/scripts/components.cjs",
"chars": 3078,
"preview": "const path = require(\"path\");\nconst fs = require(\"fs\");\n\nfunction convertCase(string) {\n const splitted = string\n .r"
},
{
"path": "js/scripts/generateCssVariableResolver.cjs",
"chars": 4944,
"preview": "const fs = require(\"fs\");\nconst path = require(\"path\");\nconst { MANTINE_DEFAULT_COLORS, SHADCN_DEFAULT_COLORS } = requir"
},
{
"path": "js/scripts/generateStyles.cjs",
"chars": 855,
"preview": "const fs = require(\"fs\");\nconst path = require(\"path\");\n\nfunction generateCssStyles(location, outputFileName) {\n // Rea"
},
{
"path": "js/scripts/generateThemes.cjs",
"chars": 3482,
"preview": "const fs = require(\"fs\");\nconst path = require(\"path\");\nconst { MANTINE_DEFAULT_COLORS, SHADCN_DEFAULT_COLORS } = requir"
},
{
"path": "next.config.js",
"chars": 464,
"preview": "/** @type {import('next').NextConfig} */\nimport path from \"node:path\";\n\nconst nextConfig = {\n output: \"export\", // Outp"
},
{
"path": "package.json",
"chars": 2299,
"preview": "{\n \"name\": \"mantine-modern-theme\",\n \"private\": true,\n \"version\": \"0.0.0\",\n \"type\": \"module\",\n \"engines\": {\n \"nod"
},
{
"path": "postcss.config.js",
"chars": 384,
"preview": "export default {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n \"postcss-preset-mantine\": {},\n \"postcss-"
},
{
"path": "public/_redirects",
"chars": 20,
"preview": "/* /index.html 200"
},
{
"path": "public/robots.txt",
"chars": 198,
"preview": "# Allow all crawlers\nUser-agent: *\nAllow: /\n\n# Sitemap location\nSitemap: https://mantinehub.com/sitemap.xml\n\n# Disallow "
},
{
"path": "src/_mantine.scss",
"chars": 996,
"preview": "@use \"sass:math\";\n\n// Define variables for your breakpoints,\n// values must be the same as in your theme\n$mantine-breakp"
},
{
"path": "src/app/about/page.tsx",
"chars": 1277,
"preview": "\"use client\";\n\nimport { AboutPage } from \"@/components/custom/about/about\";\nimport PageLayout from \"@/components/layouts"
},
{
"path": "src/app/blocks/[slug]/page.tsx",
"chars": 847,
"preview": "import CategoryPage from \"@/feature/blocks/components/categories/category-page\";\nimport { CATEGORIES_SLUGS, getCategoryD"
},
{
"path": "src/app/blocks/layout.tsx",
"chars": 539,
"preview": "import PageLayout from \"@/components/layouts/page-layout\";\nimport BlockComponents from \"@/feature/blocks/components/bloc"
},
{
"path": "src/app/blocks/page.tsx",
"chars": 356,
"preview": "\"use client\";\nimport { CATEGORIES } from \"@/feature/blocks/data/categories\";\nimport { redirect } from \"next/navigation\";"
},
{
"path": "src/app/feedback/page.tsx",
"chars": 1234,
"preview": "\"use client\";\n\nimport { TestimonialGrid } from \"@/components/custom/testimonial/testimonial-grid\";\nimport PageLayout fro"
},
{
"path": "src/app/how-to-use/page.tsx",
"chars": 713,
"preview": "\"use client\";\n\nimport { HowToUsePage } from \"@/components/custom/how-to-use/how-to-use\";\nimport PageLayout from \"@/compo"
},
{
"path": "src/app/layout.tsx",
"chars": 5043,
"preview": "import type { Metadata } from \"next\";\n\nimport \"@mantine/core/styles.css\";\nimport \"@mantine/charts/styles.css\";\nimport \"@"
},
{
"path": "src/app/loading.tsx",
"chars": 195,
"preview": "import { Center, Loader } from \"@mantine/core\";\n\nexport default function Loading() {\n return (\n <Center w={\"100vw\"} "
},
{
"path": "src/app/page.tsx",
"chars": 650,
"preview": "\"use client\";\n\nimport MantineCards from \"@/components/custom/theme-example-cards/mantine-cards\";\nimport PageLayout from "
},
{
"path": "src/app/playground/page.tsx",
"chars": 441,
"preview": "\"use client\";\n\nimport ComponentsDemo from \"@/components/custom/components-demo/components-demo\";\nimport PageLayout from "
},
{
"path": "src/app/sitemap.ts",
"chars": 1069,
"preview": "import { MetadataRoute } from 'next'\n\n// Configure for static export\nexport const dynamic = 'force-static'\nexport const "
},
{
"path": "src/components/GoogleAnalytics.tsx",
"chars": 545,
"preview": "'use client';\n\nimport Script from 'next/script';\n\nexport default function GoogleAnalytics() {\n return (\n <>\n <S"
},
{
"path": "src/components/MicrosoftClarity.tsx",
"chars": 531,
"preview": "'use client';\n\nimport Script from 'next/script';\n\nexport default function MicrosoftClarity() {\n return (\n <Script id"
},
{
"path": "src/components/custom/about/about.tsx",
"chars": 7340,
"preview": "import { Anchor, Box, Divider, List, Stack, Text, Title } from \"@mantine/core\";\n\nexport const AboutPage = () => {\n retu"
},
{
"path": "src/components/custom/blocks/coming-soon/coming-soon.module.css",
"chars": 702,
"preview": ".container {\n padding: 4rem 1rem;\n}\n\n.title {\n font-size: 8rem;\n font-weight: 800;\n background: linear-gradient(135d"
},
{
"path": "src/components/custom/blocks/coming-soon/coming-soon.tsx",
"chars": 2812,
"preview": "import { Box, Container, Text, Group, Stack } from \"@mantine/core\";\n// import { MagnifyingGlassIcon, TwitterLogoIcon, In"
},
{
"path": "src/components/custom/change-theme-section/change-theme-button.tsx",
"chars": 8208,
"preview": "import {\n Box,\n Button,\n ColorSwatch,\n Group,\n MantineColorShade,\n MantineColorsTuple,\n Popover,\n SimpleGrid,\n "
},
{
"path": "src/components/custom/change-theme-section/change-theme-section.tsx",
"chars": 652,
"preview": "import { Button, Group } from \"@mantine/core\";\nimport ChangeThemeButton from \"./change-theme-button\";\nimport CopyThemeCo"
},
{
"path": "src/components/custom/change-theme-section/copy-theme-code-button.tsx",
"chars": 5242,
"preview": "import { CodeHighlightTabs } from \"@mantine/code-highlight\";\nimport {\n ActionIcon,\n Anchor,\n Box,\n Button,\n CloseIc"
},
{
"path": "src/components/custom/components-demo/buttons/action-icon-demo.tsx",
"chars": 1213,
"preview": "import { ActionIcon } from '@mantine/core';\nimport { IconAdjustments } from '@tabler/icons-react';\nimport { interactiveV"
},
{
"path": "src/components/custom/components-demo/buttons/button-demo.tsx",
"chars": 937,
"preview": "import { Button } from '@mantine/core';\nimport { interactiveVariantsControl } from '../../../../utils/variants-data';\nim"
},
{
"path": "src/components/custom/components-demo/buttons/close-button-demo.tsx",
"chars": 666,
"preview": "import { CloseButton } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\n\nconst code = `\nimport"
},
{
"path": "src/components/custom/components-demo/charts/area-chart-demo.tsx",
"chars": 2648,
"preview": "import { AreaChart } from '@mantine/charts';\nimport { MantineDemo } from '../../../mantine/demo';\nimport { data, dataCod"
},
{
"path": "src/components/custom/components-demo/charts/bar-chart-demo.tsx",
"chars": 1952,
"preview": "import { BarChart } from '@mantine/charts';\nimport { MantineDemo } from '../../../mantine/demo';\nimport { data, dataCode"
},
{
"path": "src/components/custom/components-demo/charts/bubble-chart-demo.tsx",
"chars": 942,
"preview": "import { BubbleChart } from '@mantine/charts';\nimport { MantineDemo } from '../../../mantine/demo';\nimport { data, dataC"
},
{
"path": "src/components/custom/components-demo/charts/composite-chart-demo.tsx",
"chars": 2717,
"preview": "import { CompositeChart } from '@mantine/charts';\nimport { data, dataCode } from './data/_area-data';\nimport { MantineDe"
},
{
"path": "src/components/custom/components-demo/charts/data/_area-data.ts",
"chars": 3913,
"preview": "export const data = [\n {\n date: 'Mar 22',\n Apples: 2890,\n Oranges: 2338,\n Tomatoes: 2452,\n },\n {\n date"
},
{
"path": "src/components/custom/components-demo/charts/data/_bar-data.ts",
"chars": 4035,
"preview": "export const data = [\n { month: 'January', Smartphones: 1200, Laptops: 900, Tablets: 200 },\n { month: 'February', Smar"
},
{
"path": "src/components/custom/components-demo/charts/data/_bubble-data.ts",
"chars": 768,
"preview": "export const data = [\n { hour: '08:00', index: 1, value: 150 },\n { hour: '10:00', index: 1, value: 180 },\n { hour: '1"
},
{
"path": "src/components/custom/components-demo/charts/data/_donut-data.ts",
"chars": 484,
"preview": "export const data = [\n { name: 'USA', value: 400, color: 'indigo.6' },\n { name: 'India', value: 300, color: 'yellow.6'"
},
{
"path": "src/components/custom/components-demo/charts/data/_pie-data.ts",
"chars": 484,
"preview": "export const data = [\n { name: 'USA', value: 400, color: 'indigo.6' },\n { name: 'India', value: 300, color: 'yellow.6'"
},
{
"path": "src/components/custom/components-demo/charts/data/_radar-data.ts",
"chars": 1756,
"preview": "export const data = [\n {\n product: 'Apples',\n sales: 120,\n },\n {\n product: 'Oranges',\n sales: 98,\n },\n "
},
{
"path": "src/components/custom/components-demo/charts/data/_scatter-data.ts",
"chars": 8909,
"preview": "export const data = [\n {\n color: 'blue.5',\n name: 'Group 1',\n data: [\n { age: 25, BMI: 20 },\n { age:"
},
{
"path": "src/components/custom/components-demo/charts/donot-chart-demo.tsx",
"chars": 1499,
"preview": "import { DonutChart } from '@mantine/charts';\nimport { MantineDemo } from '../../../mantine/demo';\nimport { data, dataCo"
},
{
"path": "src/components/custom/components-demo/charts/line-chart-demo.tsx",
"chars": 2532,
"preview": "import { LineChart } from '@mantine/charts';\nimport { data, dataCode } from './data/_area-data';\nimport { MantineDemo } "
},
{
"path": "src/components/custom/components-demo/charts/pie-chart-demo.tsx",
"chars": 1624,
"preview": "import { PieChart } from '@mantine/charts';\nimport { MantineDemo } from '../../../mantine/demo';\nimport { data, dataCode"
},
{
"path": "src/components/custom/components-demo/charts/radar-chart-demo.tsx",
"chars": 1402,
"preview": "import { RadarChart } from '@mantine/charts';\nimport { multiData, multiDataCode } from './data/_radar-data';\nimport { Ma"
},
{
"path": "src/components/custom/components-demo/charts/scatter-chart-demo.tsx",
"chars": 1006,
"preview": "import { ScatterChart } from '@mantine/charts';\nimport { doubleData, doubleDataCode } from './data/_scatter-data';\nimpor"
},
{
"path": "src/components/custom/components-demo/charts/sparkline-demo.tsx",
"chars": 1546,
"preview": "import { Sparkline } from '@mantine/charts';\nimport { MantineDemo } from '../../../mantine/demo';\n\nconst code = `\nimport"
},
{
"path": "src/components/custom/components-demo/combobox/autocomplete-demo.tsx",
"chars": 760,
"preview": "import { Autocomplete } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\nimport { inputControl"
},
{
"path": "src/components/custom/components-demo/combobox/multi-select-demo.tsx",
"chars": 753,
"preview": "import { MultiSelect } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\nimport { inputControls"
},
{
"path": "src/components/custom/components-demo/combobox/pills-input-demo.tsx",
"chars": 939,
"preview": "import { Pill, PillsInput } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\nimport { inputCon"
},
{
"path": "src/components/custom/components-demo/combobox/select-demo.tsx",
"chars": 718,
"preview": "import { Select } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\nimport { inputControls } fr"
},
{
"path": "src/components/custom/components-demo/combobox/tags-input-demo.tsx",
"chars": 807,
"preview": "import { TagsInput } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\nimport { inputControls }"
},
{
"path": "src/components/custom/components-demo/components-demo.module.css",
"chars": 97,
"preview": ".navbarWrapper{\n position: sticky;\n top: 80px;\n z-index: 1;\n}\n\n.content {\n flex: 1;\n}"
},
{
"path": "src/components/custom/components-demo/components-demo.tsx",
"chars": 1335,
"preview": "import { Box, Divider, Group, Stack, Title } from \"@mantine/core\";\nimport { demoComponentsNavbarData } from \"../../../ut"
},
{
"path": "src/components/custom/components-demo/data-display/accordion-demo.tsx",
"chars": 2680,
"preview": "import { Accordion, AccordionProps } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\n\nconst c"
},
{
"path": "src/components/custom/components-demo/data-display/avatar-demo.tsx",
"chars": 730,
"preview": "import { Avatar } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\nimport { staticVariantsCont"
},
{
"path": "src/components/custom/components-demo/data-display/background-image-demo.tsx",
"chars": 1424,
"preview": "import { BackgroundImage, BackgroundImageProps, Box, Center, Text } from '@mantine/core';\nimport { MantineDemo } from '."
},
{
"path": "src/components/custom/components-demo/data-display/badge-demo.tsx",
"chars": 854,
"preview": "import { Badge } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\n\nconst code = `\nimport { Bad"
},
{
"path": "src/components/custom/components-demo/data-display/card-demo.tsx",
"chars": 2036,
"preview": "import { Badge, Button, Card, Group, Image, Text } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/d"
},
{
"path": "src/components/custom/components-demo/data-display/color-swatch-demo.tsx",
"chars": 715,
"preview": "import { ColorSwatch, Group } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\n\nconst code = `"
},
{
"path": "src/components/custom/components-demo/data-display/image-demo.tsx",
"chars": 571,
"preview": "import { Image } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\n\nconst code = `\nimport { Ima"
},
{
"path": "src/components/custom/components-demo/data-display/indicator-demo.tsx",
"chars": 2160,
"preview": "import { Avatar, Indicator, IndicatorProps } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\n"
},
{
"path": "src/components/custom/components-demo/data-display/spoiler-demo.tsx",
"chars": 1738,
"preview": "\nimport { Box, Spoiler, SpoilerProps, Text } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\n"
},
{
"path": "src/components/custom/components-demo/data-display/theme-icon-demo.tsx",
"chars": 1417,
"preview": "import { ThemeIcon, ThemeIconProps } from '@mantine/core';\nimport { IconPhoto } from '@tabler/icons-react';\nimport { Man"
},
{
"path": "src/components/custom/components-demo/data-display/timeline-demo.tsx",
"chars": 3580,
"preview": "import { Box, Text, Timeline, TimelineProps } from '@mantine/core';\nimport { IconGitBranch, IconGitCommit, IconGitPullRe"
},
{
"path": "src/components/custom/components-demo/feedback/alert-demo.tsx",
"chars": 1362,
"preview": "import { Alert } from '@mantine/core';\nimport { IconInfoCircle } from '@tabler/icons-react';\nimport { staticVariantsCont"
},
{
"path": "src/components/custom/components-demo/feedback/loader-demo.tsx",
"chars": 640,
"preview": "import { Loader } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\n\nconst code = `\nimport { Lo"
},
{
"path": "src/components/custom/components-demo/feedback/notification-demo.tsx",
"chars": 1318,
"preview": "import { Box, Notification, NotificationProps } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo"
},
{
"path": "src/components/custom/components-demo/feedback/progress-demo.tsx",
"chars": 975,
"preview": "import { Progress } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\n\nconst code = `\nimport { "
},
{
"path": "src/components/custom/components-demo/feedback/ring-progress-demo.tsx",
"chars": 1672,
"preview": "import { RingProgress, RingProgressProps, Text } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/dem"
},
{
"path": "src/components/custom/components-demo/feedback/semi-circle-progress-demo.tsx",
"chars": 1391,
"preview": "import { SemiCircleProgress } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\n\nconst code = `"
},
{
"path": "src/components/custom/components-demo/feedback/skeleton-demo.tsx",
"chars": 1174,
"preview": "import { Skeleton, SkeletonProps } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\n\nfunction "
},
{
"path": "src/components/custom/components-demo/inputs/checkbox-demo.tsx",
"chars": 1594,
"preview": "import { Checkbox, CheckboxProps } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\n\nconst cod"
},
{
"path": "src/components/custom/components-demo/inputs/checkbox-group-demo.tsx",
"chars": 1505,
"preview": "import { Checkbox, CheckboxGroupProps, Group } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo'"
},
{
"path": "src/components/custom/components-demo/inputs/chip-demo.tsx",
"chars": 1134,
"preview": "import { Chip, ChipProps } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\n\nfunction Wrapper("
},
{
"path": "src/components/custom/components-demo/inputs/color-input-demo.tsx",
"chars": 608,
"preview": "import { ColorInput } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\nimport { inputControls "
},
{
"path": "src/components/custom/components-demo/inputs/fieldset-demo.tsx",
"chars": 1130,
"preview": "import { Fieldset, TextInput } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\n\nconst code = "
},
{
"path": "src/components/custom/components-demo/inputs/file-input.tsx",
"chars": 603,
"preview": "import { FileInput } from \"@mantine/core\";\nimport { MantineDemo } from \"../../../mantine/demo\";\nimport { inputControls }"
},
{
"path": "src/components/custom/components-demo/inputs/native-select-demo.tsx",
"chars": 596,
"preview": "import { NativeSelect } from \"@mantine/core\";\nimport { MantineDemo } from \"../../../mantine/demo\";\nimport { inputControl"
},
{
"path": "src/components/custom/components-demo/inputs/pin-input-demo.tsx",
"chars": 1103,
"preview": "import { PinInput, PinInputProps } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\n\nconst cod"
},
{
"path": "src/components/custom/components-demo/inputs/radio-demo.tsx",
"chars": 1484,
"preview": "import { Radio, RadioProps } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\n\nconst code = `\n"
},
{
"path": "src/components/custom/components-demo/inputs/radio-group-demo.tsx",
"chars": 1452,
"preview": "import { Group, Radio, RadioGroupProps } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\n\ncon"
},
{
"path": "src/components/custom/components-demo/inputs/rating-demo.tsx",
"chars": 808,
"preview": "import { Rating, RatingProps } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\n\nconst code = "
},
{
"path": "src/components/custom/components-demo/inputs/segmented-control-demo.tsx",
"chars": 1436,
"preview": "import { SegmentedControl } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\n\nconst code = `\ni"
},
{
"path": "src/components/custom/components-demo/inputs/slider-demo.tsx",
"chars": 1274,
"preview": "import { Slider } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\n\nfunction Wrapper(props: an"
},
{
"path": "src/components/custom/components-demo/inputs/switch-demo.tsx",
"chars": 1231,
"preview": "import { Switch } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\n\nconst code = `\nimport { Sw"
},
{
"path": "src/components/custom/components-demo/inputs/switch-group-demo.tsx",
"chars": 1438,
"preview": "import { Group, Switch, SwitchGroupProps } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\n\nc"
},
{
"path": "src/components/custom/components-demo/inputs/text-input-demo.tsx",
"chars": 604,
"preview": "import { TextInput } from '@mantine/core';\nimport { inputControls } from '../../../../utils/input-controls';\nimport { Ma"
},
{
"path": "src/components/custom/components-demo/inputs/textarea-demo.tsx",
"chars": 598,
"preview": "import { Textarea } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\nimport { inputControls } "
},
{
"path": "src/components/custom/components-demo/miscellaneous/date-picker-input-demo.tsx",
"chars": 605,
"preview": "import { DateInput } from '@mantine/dates';\nimport { MantineDemo } from '../../../mantine/demo';\nimport { inputControls "
},
{
"path": "src/components/custom/components-demo/miscellaneous/divider-demo.tsx",
"chars": 2748,
"preview": "import { Divider, Text } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\n\nconst code = `\nimpo"
},
{
"path": "src/components/custom/components-demo/miscellaneous/paper-demo.tsx",
"chars": 1174,
"preview": "import { Box, Paper, Text } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\n\nfunction Wrapper"
},
{
"path": "src/components/custom/components-demo/miscellaneous/scroll-area-demo.tsx",
"chars": 3522,
"preview": "import { Box, ScrollArea, ScrollAreaProps, Text } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/de"
},
{
"path": "src/components/custom/components-demo/navigation/anchor-demo.tsx",
"chars": 901,
"preview": "import { Anchor } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\n\nconst code = `\nimport { An"
},
{
"path": "src/components/custom/components-demo/navigation/nav-link-demo.tsx",
"chars": 2490,
"preview": "import { Box, Group, NavLink } from '@mantine/core';\nimport { IconActivity, IconChevronRight, IconFingerprint, IconGauge"
},
{
"path": "src/components/custom/components-demo/navigation/pagination-demo.tsx",
"chars": 933,
"preview": "import { Pagination } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\n\nfunction Wrapper(props"
},
{
"path": "src/components/custom/components-demo/navigation/stepper-demo.tsx",
"chars": 1028,
"preview": "import { Stepper, StepperProps } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\n\nfunction Wr"
},
{
"path": "src/components/custom/components-demo/navigation/tabs-demo.tsx",
"chars": 3047,
"preview": "import { rem, Tabs, TabsProps, useDirection } from '@mantine/core';\nimport { IconMessageCircle, IconPhoto, IconSettings "
},
{
"path": "src/components/custom/components-demo/overlays/authentication-form.tsx",
"chars": 3839,
"preview": "import { useState } from 'react';\nimport { IconAt, IconLock } from '@tabler/icons-react';\nimport {\n Anchor,\n Button,\n "
},
{
"path": "src/components/custom/components-demo/overlays/dialog-demo.tsx",
"chars": 1654,
"preview": "import { Button, Dialog, Group, Text, TextInput } from '@mantine/core';\nimport { useDisclosure } from '@mantine/hooks';\n"
},
{
"path": "src/components/custom/components-demo/overlays/drawer-demo.tsx",
"chars": 1007,
"preview": "import { Button, Drawer } from '@mantine/core';\nimport { useDisclosure } from '@mantine/hooks';\nimport { MantineDemo } f"
},
{
"path": "src/components/custom/components-demo/overlays/hover-card-demo.tsx",
"chars": 1314,
"preview": "import { Button, Group, HoverCard, Text } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\n\nco"
},
{
"path": "src/components/custom/components-demo/overlays/loading-overlay-demo.tsx",
"chars": 1345,
"preview": "import { Box, Button, Group, LoadingOverlay } from '@mantine/core';\nimport { useDisclosure } from '@mantine/hooks';\nimpo"
},
{
"path": "src/components/custom/components-demo/overlays/menu-demo.tsx",
"chars": 3362,
"preview": "import {\n IconArrowsLeftRight,\n IconMessageCircle,\n IconPhoto,\n IconSearch,\n IconSettings,\n IconTrash,"
},
{
"path": "src/components/custom/components-demo/overlays/modal-demo.tsx",
"chars": 997,
"preview": "import { Button, Modal } from '@mantine/core';\nimport { useDisclosure } from '@mantine/hooks';\nimport { AuthenticationFo"
},
{
"path": "src/components/custom/components-demo/overlays/overlay-demo.tsx",
"chars": 1423,
"preview": "import { useState } from 'react';\nimport { AspectRatio, Button, Overlay } from '@mantine/core';\nimport { MantineDemo } f"
},
{
"path": "src/components/custom/components-demo/overlays/popover-demo.tsx",
"chars": 995,
"preview": "import { Button, Popover, Text } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\n\nconst code "
},
{
"path": "src/components/custom/components-demo/overlays/tooltip-demo.tsx",
"chars": 527,
"preview": "import { Button, Tooltip } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\n\nconst code = `\nim"
},
{
"path": "src/components/custom/components-demo/typography/blockquote-demo.tsx",
"chars": 1216,
"preview": "import { Blockquote } from '@mantine/core';\nimport { IconInfoCircle } from '@tabler/icons-react';\nimport { MantineDemo }"
},
{
"path": "src/components/custom/components-demo/typography/code-demo.tsx",
"chars": 654,
"preview": "import { Code } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\n\nconst code = `\nimport { Code"
},
{
"path": "src/components/custom/components-demo/typography/highlight-demo.tsx",
"chars": 845,
"preview": "import { Highlight, HighlightProps } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\n\nfunctio"
},
{
"path": "src/components/custom/components-demo/typography/list-demo.tsx",
"chars": 1577,
"preview": "import { List, ListProps } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\n\nfunction Wrapper("
},
{
"path": "src/components/custom/components-demo/typography/mark-demo.tsx",
"chars": 653,
"preview": "import { Mark, MarkProps, Text } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\n\nfunction Wr"
},
{
"path": "src/components/custom/components-demo/typography/table-demo.tsx",
"chars": 1875,
"preview": "import { Table, TableProps } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\n\nconst elements "
},
{
"path": "src/components/custom/components-demo/typography/text-demo.tsx",
"chars": 1802,
"preview": "import { Text } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\n\nconst code = `\nimport { Text"
},
{
"path": "src/components/custom/components-demo/typography/title-demo.tsx",
"chars": 917,
"preview": "import { Title } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\n\nconst code = `\nimport { Tit"
},
{
"path": "src/components/custom/how-to-use/how-to-use.tsx",
"chars": 5438,
"preview": "import { CodeHighlightTabs } from \"@mantine/code-highlight\";\nimport { Anchor, Box, Code, Divider, List, Stack, Text, Tit"
},
{
"path": "src/components/custom/testimonial/testimonial-grid.tsx",
"chars": 460,
"preview": "import { SimpleGrid } from \"@mantine/core\";\nimport { ITestimonialItem, TestimonialItem } from \"./testimonial-item\";\n\nexp"
},
{
"path": "src/components/custom/testimonial/testimonial-item.tsx",
"chars": 1423,
"preview": "import { Box, Text, Group, Stack, Avatar, UnstyledButton } from \"@mantine/core\";\n\nexport interface ITestimonialItem {\n "
},
{
"path": "src/components/custom/theme-example-cards/activity-goal.tsx",
"chars": 3243,
"preview": "import * as React from \"react\"\nimport { MinusIcon, PlusIcon } from \"@radix-ui/react-icons\"\nimport { ActionIcon, alpha, B"
},
{
"path": "src/components/custom/theme-example-cards/calendar.tsx",
"chars": 638,
"preview": "import { useState } from \"react\";\nimport { Card } from \"@mantine/core\";\nimport { DatePicker } from \"@mantine/dates\";\n\nex"
},
{
"path": "src/components/custom/theme-example-cards/chat.tsx",
"chars": 5936,
"preview": "import {\n ActionIcon,\n Avatar,\n Box,\n Button,\n Card,\n Divider,\n Group,\n rem,\n Space,\n Stack,\n Text,\n TextInp"
},
{
"path": "src/components/custom/theme-example-cards/cookie-settings.tsx",
"chars": 1965,
"preview": "import { Button, Card, Text, Switch, Group, Title } from '@mantine/core';\n\nexport function CardsCookieSettings() {\n r"
},
{
"path": "src/components/custom/theme-example-cards/create-account.tsx",
"chars": 1348,
"preview": "\nimport { Button, Card, TextInput, Divider, Text, Group, Title } from '@mantine/core';\nimport { Icons } from '../../ui/i"
},
{
"path": "src/components/custom/theme-example-cards/data-table.tsx",
"chars": 7396,
"preview": "import {\n Box,\n Button,\n Card,\n Checkbox,\n Group,\n Menu,\n Select,\n Stack,\n Table,\n Text,\n TextInput,\n Title\n"
},
{
"path": "src/components/custom/theme-example-cards/mantine-cards.tsx",
"chars": 1726,
"preview": "import { Grid, Group, SimpleGrid, Stack } from \"@mantine/core\";\nimport { CardsActivityGoal } from \"./activity-goal\";\nimp"
},
{
"path": "src/components/custom/theme-example-cards/metric.tsx",
"chars": 1507,
"preview": "import { LineChart } from \"@mantine/charts\";\nimport { alpha, Box, Card, Text, Title, useMantineTheme } from \"@mantine/co"
},
{
"path": "src/components/custom/theme-example-cards/payment-method.tsx",
"chars": 6230,
"preview": "import {\n Button,\n Card,\n Group,\n Radio,\n Select,\n Space,\n Stack,\n Text,\n TextInput,\n Titl"
},
{
"path": "src/components/custom/theme-example-cards/report-issue.tsx",
"chars": 1925,
"preview": "import { Button, Card, Group, Select, Stack, Text, TextInput, Textarea, Title } from \"@mantine/core\";\nimport * as React "
},
{
"path": "src/components/custom/theme-example-cards/share.tsx",
"chars": 2765,
"preview": "import { Avatar, Button, Card, Input, Select, Text, Divider, Title, Group, Box } from '@mantine/core';\n\nexport function "
},
{
"path": "src/components/custom/theme-example-cards/stats.tsx",
"chars": 2242,
"preview": "import { BarChart, LineChart } from \"@mantine/charts\";\nimport { Box, Card, rem, SimpleGrid, Text } from \"@mantine/core\";"
},
{
"path": "src/components/custom/theme-example-cards/team-members.tsx",
"chars": 6446,
"preview": "import { ChevronDownIcon } from \"@radix-ui/react-icons\"\nimport { Avatar, Button, Card, Text, Popover, TextInput, Group, "
},
{
"path": "src/components/layouts/page-layout.tsx",
"chars": 2395,
"preview": "'use client'\n\nimport { Anchor, Box, Container, Divider, Group, Stack, Text, Title } from \"@mantine/core\";\nimport React f"
},
{
"path": "src/components/mantine/demo/CodeDemo/CodeDemo.tsx",
"chars": 1083,
"preview": "import { DemoArea, DemoAreaProps } from \"../DemoArea\";\nimport { DemoCode, DemoCodeProps } from \"../DemoCode\";\nimport { D"
},
{
"path": "src/components/mantine/demo/ConfiguratorDemo/ConfiguratorDemo.module.css",
"chars": 64,
"preview": ".controls {\n padding: calc(var(--mantine-spacing-md) - 4px);\n}\n"
},
{
"path": "src/components/mantine/demo/ConfiguratorDemo/ConfiguratorDemo.tsx",
"chars": 3189,
"preview": "import { cloneElement, useState } from \"react\";\nimport { Button, Stack } from \"@mantine/core\";\nimport { DemoAreaProps } "
},
{
"path": "src/components/mantine/demo/ConfiguratorDemo/clear-props.ts",
"chars": 509,
"preview": "import type { ConfiguratorControlOptions } from './ConfiguratorDemo';\n\ntype Values = Record<string, any>;\n\nexport functi"
},
{
"path": "src/components/mantine/demo/ConfiguratorDemo/controls/ColorWheelIcon.tsx",
"chars": 1985,
"preview": "import { rem } from '@mantine/core';\n\nexport function ColorWheelIcon() {\n return (\n <svg\n xmlns=\"http://www.w3."
},
{
"path": "src/components/mantine/demo/ConfiguratorDemo/controls/ConfiguratorBoolean.control.tsx",
"chars": 787,
"preview": "import { BoxProps, ElementProps, Switch } from '@mantine/core';\nimport { getControlLabel } from './get-control-label';\ni"
},
{
"path": "src/components/mantine/demo/ConfiguratorDemo/controls/ConfiguratorColor.control.module.css",
"chars": 570,
"preview": ".swatch {\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--mantine-c"
},
{
"path": "src/components/mantine/demo/ConfiguratorDemo/controls/ConfiguratorColor.control.tsx",
"chars": 2693,
"preview": "import {\n BoxProps,\n CheckIcon,\n ColorPicker,\n ColorSwatch,\n ElementProps,\n Group,\n Input,\n Popover,\n TextInput"
},
{
"path": "src/components/mantine/demo/ConfiguratorDemo/controls/ConfiguratorNumber.control.tsx",
"chars": 915,
"preview": "import { BoxProps, ElementProps, Input, Slider } from '@mantine/core';\nimport { getControlLabel } from './get-control-la"
},
{
"path": "src/components/mantine/demo/ConfiguratorDemo/controls/ConfiguratorSegmented.control.tsx",
"chars": 1104,
"preview": "import { BoxProps, ElementProps, Input, SegmentedControl } from '@mantine/core';\nimport { getControlLabel } from './get-"
},
{
"path": "src/components/mantine/demo/ConfiguratorDemo/controls/ConfiguratorSelect.control.tsx",
"chars": 948,
"preview": "import { BoxProps, ElementProps, NativeSelect } from '@mantine/core';\nimport { getControlLabel } from './get-control-lab"
},
{
"path": "src/components/mantine/demo/ConfiguratorDemo/controls/ConfiguratorSize.control.tsx",
"chars": 1291,
"preview": "import { BoxProps, ElementProps, Input, Slider } from '@mantine/core';\nimport { getControlLabel } from './get-control-la"
},
{
"path": "src/components/mantine/demo/ConfiguratorDemo/controls/ConfiguratorString.control.tsx",
"chars": 818,
"preview": "import { BoxProps, ElementProps, TextInput } from '@mantine/core';\nimport { getControlLabel } from './get-control-label'"
},
{
"path": "src/components/mantine/demo/ConfiguratorDemo/controls/get-control-label.ts",
"chars": 175,
"preview": "import { upperFirst } from '@mantine/hooks';\n\nexport function getControlLabel(label: string) {\n return upperFirst(label"
},
{
"path": "src/components/mantine/demo/ConfiguratorDemo/controls/index.ts",
"chars": 1125,
"preview": "export { ConfiguratorBooleanControl } from './ConfiguratorBoolean.control';\nexport { ConfiguratorSegmentedControl } from"
},
{
"path": "src/components/mantine/demo/ConfiguratorDemo/controls/transform-select-data.ts",
"chars": 440,
"preview": "import { upperFirst } from '@mantine/hooks';\n\ninterface SelectDataItem {\n label: string;\n value: string;\n}\n\nexport typ"
},
{
"path": "src/components/mantine/demo/ConfiguratorDemo/controls/types.ts",
"chars": 279,
"preview": "export type ConfiguratorControl<Type extends string, Params extends Record<string, any>> = {\n type: Type;\n prop: strin"
},
{
"path": "src/components/mantine/demo/ConfiguratorDemo/get-code-array.ts",
"chars": 1464,
"preview": "\nimport { clearProps } from './clear-props';\nimport type { ConfiguratorControlOptions } from './ConfiguratorDemo';\nimpor"
},
{
"path": "src/components/mantine/demo/ConfiguratorDemo/inject-props.tsx",
"chars": 1526,
"preview": "function isMultiLine(code: string) {\n const placeholderLine = code.split('\\n').find((line) => line.includes('{{props}}'"
},
{
"path": "src/components/mantine/demo/Demo/Demo.tsx",
"chars": 1069,
"preview": "import { CodeDemo, CodeDemoProps } from '../CodeDemo/CodeDemo';\nimport { ConfiguratorDemo, ConfiguratorDemoProps } from "
},
{
"path": "src/components/mantine/demo/DemoArea/DemoArea.module.css",
"chars": 1378,
"preview": ".demo {\n flex: 1;\n border-top-left-radius: calc(var(--mantine-radius-md) - 1px);\n border-top-right-radius: calc(var(-"
},
{
"path": "src/components/mantine/demo/DemoArea/DemoArea.tsx",
"chars": 927,
"preview": "import { Box, rem } from '@mantine/core';\nimport classes from './DemoArea.module.css';\n\nexport interface DemoAreaProps {"
},
{
"path": "src/components/mantine/demo/DemoArea/index.ts",
"chars": 88,
"preview": "export { DemoArea } from './DemoArea';\nexport type { DemoAreaProps } from './DemoArea';\n"
},
{
"path": "src/components/mantine/demo/DemoCode/DemoCode.module.scss",
"chars": 243,
"preview": ".code {\n border-bottom-right-radius: var(--mantine-radius-md);\n border-bottom-left-radius: var(--mantine-radius-md);\n "
},
{
"path": "src/components/mantine/demo/DemoCode/DemoCode.tsx",
"chars": 771,
"preview": "import { getCodeFileIcon } from '@mantinex/dev-icons';\nimport classes from './DemoCode.module.scss';\nimport { CodeHighli"
},
{
"path": "src/components/mantine/demo/DemoCode/index.ts",
"chars": 88,
"preview": "export { DemoCode } from './DemoCode';\nexport type { DemoCodeProps } from './DemoCode';\n"
},
{
"path": "src/components/mantine/demo/DemoColumns/DemoColumns.module.css",
"chars": 811,
"preview": ".columns {\n display: flex;\n\n @media (max-width: 55em) {\n flex-direction: column;\n }\n}\n\n.controls {\n flex: 0 0 250"
},
{
"path": "src/components/mantine/demo/DemoColumns/DemoColumns.tsx",
"chars": 1162,
"preview": "import { Text } from '@mantine/core';\nimport { DemoArea, DemoAreaProps } from '../DemoArea';\nimport classes from './Demo"
},
{
"path": "src/components/mantine/demo/DemoColumns/index.ts",
"chars": 45,
"preview": "export { DemoColumns } from './DemoColumns';\n"
},
{
"path": "src/components/mantine/demo/DemoRoot/DemoRoot.module.css",
"chars": 147,
"preview": ".root {\n border: 1px solid var(--demo-border);\n border-radius: var(--mantine-radius-md);\n --demo-border: var(--mantin"
},
{
"path": "src/components/mantine/demo/DemoRoot/DemoRoot.tsx",
"chars": 233,
"preview": "import cx from \"clsx\";\nimport classes from \"./DemoRoot.module.css\";\n\nexport function DemoRoot({ className, ...others }: "
},
{
"path": "src/components/mantine/demo/DemoRoot/index.ts",
"chars": 39,
"preview": "export { DemoRoot } from './DemoRoot';\n"
},
{
"path": "src/components/mantine/demo/StylesApiDemo/StylesApiDemo.module.css",
"chars": 368,
"preview": ".selector {\n display: block;\n width: 100%;\n font-size: var(--mantine-font-size-sm);\n padding: 6px var(--mantine-spac"
},
{
"path": "src/components/mantine/demo/StylesApiDemo/StylesApiDemo.tsx",
"chars": 2410,
"preview": "import { cloneElement, useState } from 'react';\nimport { Text, UnstyledButton } from '@mantine/core';\nimport { DemoAreaP"
},
{
"path": "src/components/mantine/demo/index.ts",
"chars": 171,
"preview": "export { Demo } from './Demo/Demo';\nexport type { MantineDemo } from './Demo/Demo';\nexport type { ConfiguratorControlOpt"
},
{
"path": "src/components/ui/chart-tooltip.tsx",
"chars": 1016,
"preview": "/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { Flex, Paper, Stack, Text } from \"@mantine/core\";\n\ninter"
},
{
"path": "src/components/ui/color-scheme-switch/color-scheme-switch.module.css",
"chars": 224,
"preview": ".icon {\n width: 18x;\n height: 18x;\n}\n\n.dark {\n @mixin dark {\n display: none;\n }\n\n @mixin light {\n display: bl"
},
{
"path": "src/components/ui/color-scheme-switch/color-scheme-switch.tsx",
"chars": 900,
"preview": "import {\n ActionIcon,\n useComputedColorScheme,\n useMantineColorScheme,\n} from \"@mantine/core\";\n\nimport { IconSun, Ico"
},
{
"path": "src/components/ui/color-scheme-switch/index.ts",
"chars": 39,
"preview": "export * from \"./color-scheme-switch\";\n"
},
{
"path": "src/components/ui/header/header.module.scss",
"chars": 1135,
"preview": ".header {\n height: mantine.rem(56px);\n background-color: var(--mantine-color-body);\n padding-right: var(--manti"
},
{
"path": "src/components/ui/header/header.tsx",
"chars": 5849,
"preview": "import { Box, Button, Divider, Drawer, Group, rem, ScrollArea, Stack, Tabs, Text } from \"@mantine/core\";\nimport { useDis"
},
{
"path": "src/components/ui/icons.tsx",
"chars": 12771,
"preview": "type IconProps = React.HTMLAttributes<SVGElement>\n\nexport const Icons = {\n logo: (props: IconProps) => (\n <svg xmlns"
},
{
"path": "src/components/ui/navbar/navbar-links-group.tsx",
"chars": 2040,
"preview": "import { Box, Collapse, Group, rem, Text, UnstyledButton } from \"@mantine/core\";\nimport { IconChevronRight } from \"@tabl"
},
{
"path": "src/components/ui/navbar/navbar.module.scss",
"chars": 1416,
"preview": "\n.navbar {\n width: mantine.rem(290px);\n padding: var(--mantine-spacing-2xs);\n border: 1px solid var(--mantine-color-d"
},
{
"path": "src/components/ui/navbar/navbar.tsx",
"chars": 788,
"preview": "import { ScrollArea } from '@mantine/core';\nimport { useState } from 'react';\nimport NavbarLinksGroup from './navbar-lin"
},
{
"path": "src/feature/blocks/components/block-components/block-components.tsx",
"chars": 400,
"preview": "import { Container } from \"@mantine/core\";\nimport { CategoriesList } from \"../categories/category-list\";\nimport { CATEGO"
},
{
"path": "src/feature/blocks/components/categories/category-card.module.css",
"chars": 869,
"preview": ".image {\n transition: transform 500ms ease;\n \n &[data-dark] {\n @mixin light {\n display: none;\n }"
},
{
"path": "src/feature/blocks/components/categories/category-card.tsx",
"chars": 1056,
"preview": "import Link from \"next/link\";\nimport cx from \"clsx\";\nimport { Card, CardSection, Image, Text } from \"@mantine/core\";\nimp"
},
{
"path": "src/feature/blocks/components/categories/category-list.module.css",
"chars": 926,
"preview": ".wrapper {\n padding-top: 20px;\n margin-bottom: var(--mantine-spacing-xl);;\n}\n\n.header {\n display: flex;\n align-items"
},
{
"path": "src/feature/blocks/components/categories/category-list.tsx",
"chars": 2179,
"preview": "\"use client\";\n\nimport { Container, Group, Tabs, Tooltip } from \"@mantine/core\";\nimport { IconLock } from \"@tabler/icons-"
},
{
"path": "src/feature/blocks/components/categories/category-page.tsx",
"chars": 1347,
"preview": "\"use client\";\n\nimport { IconArrowUp } from \"@tabler/icons-react\";\nimport { useWindowScroll } from \"@mantine/hooks\";\nimpo"
},
{
"path": "src/feature/blocks/components/component-canvas/canvas-header.module.css",
"chars": 2433,
"preview": "/* import { createStyles, rem } from '@mantine/core';\n\nexport default createStyles((theme) => ({\n header: {\n positio"
},
{
"path": "src/feature/blocks/components/component-canvas/canvas-header.tsx",
"chars": 2884,
"preview": "import { IconCode, IconEye } from \"@tabler/icons-react\";\nimport { Group, Text, SegmentedControl, Center, Box } from \"@ma"
},
{
"path": "src/feature/blocks/components/component-canvas/color-control.tsx",
"chars": 1601,
"preview": "import { useState } from \"react\";\nimport { IconColorPicker } from \"@tabler/icons-react\";\nimport { ColorSwatch, Group, Po"
}
]
// ... and 134 more files (download for full content)
About this extraction
This page contains the full source code of the RubixCube-Innovations/mantine-theme-builder GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 334 files (2.4 MB), approximately 647.5k tokens, and a symbol index with 250 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.