Minimal UI

https://docs.minimals.cc
Admin
Minimal UI is a comprehensive React UI Kit and Admin Dashboard template designed to accelerate web...
Tokens:18,251
Snippets:140
Trust Score:7.7
Update:1 year ago
Show doc for...
Tokens:
Raw
### Configure Local API Port in package.json

Source: https://docs.minimals.cc/mock-server

This snippet demonstrates how to configure the development and start scripts in `package.json` for a Next.js project to use a specific port. This allows running the Next.js development server on a custom port.

```json
"dev": "next dev -p 7272",
"start": "next start -p 7272",
```

--------------------------------

### Set Production API URL in .env

Source: https://docs.minimals.cc/mock-server

This snippet shows how to configure the production API URL and asset URL in a `.env` file for projects using Vite.js or Next.js. It uses a placeholder for the production domain.

```dotenv
VITE_SERVER_URL=https://your-domain-api.vercel.app
VITE_ASSET_URL=https://your-domain-api.vercel.app
```

--------------------------------

### Install Tailwind CSS

Source: https://docs.minimals.cc/tailwind

Installs Tailwind CSS, PostCSS, and Autoprefixer as development dependencies using npm.

```bash
npm install -D tailwindcss postcss autoprefixer
```

--------------------------------

### Configure Local API Port in next.config.mjs

Source: https://docs.minimals.cc/mock-server

This snippet shows how to configure the development API port in the `next.config.mjs` file for a Next.js project. It ensures the local development server runs on the specified port.

```javascript
DEV_API: "http://localhost:7272",
```

--------------------------------

### Usage of Logo Component

Source: https://docs.minimals.cc/logo

This is a usage example for importing and rendering a custom logo component. It shows how to import the `Logo` component from its path and apply custom styling, such as width and height, using the `sx` prop.

```jsx
import Logo from 'src/components/logo';

<Logo sx={{ width: 64, height: 64 }} />

```

--------------------------------

### Configure Production API URL in next.config.mjs

Source: https://docs.minimals.cc/mock-server

This snippet illustrates how to define environment variables for both development and production API endpoints within the `next.config.mjs` file for a Next.js project. It includes a placeholder for the production API URL.

```javascript
const nextConfig = {
reactStrictMode: true,
  env: {
    DEV_API: 'http://localhost:7272',
    PRODUCTION_API: 'https://your-domain-api.vercel.app',
  },
};
 
export default nextConfig;
```

--------------------------------

### Integrate Contrast Option into Theme Settings

Source: https://docs.minimals.cc/v5/settings

This code example shows how to apply different contrast levels to the theme. It uses the `themeContrast` and `themeMode` settings to dynamically generate contrast-specific palette and component overrides, enhancing accessibility and visual distinction.

```jsx
export default function ThemeProvider({ children }: Props) {
  const settings = useSettingsContext();
 
  const contrast = createContrast(settings.themeContrast, settings.themeMode);
 
  const memoizedValue = useMemo(
    () => ({
      palette: {
        ...palette('light'),
        ...contrast.palette,
      },
      customShadows: {
        ...customShadows('light'),
      },
      shadows: shadows('light'),
      shape: { borderRadius: 8 },
      typography,
    }),
    [contrast.palette]
  );
 
  const theme = createTheme(memoizedValue as ThemeOptions);
 
  theme.components = merge(componentsOverrides(theme), contrast.components);
 
  return (
    <MuiThemeProvider theme={theme}>
      <CssBaseline />
      {children}
    </MuiThemeProvider>
  );
}
```

--------------------------------

### Set Local Mock API URL in .env

Source: https://docs.minimals.cc/mock-server

This snippet shows how to set environment variables for the local mock API URL and asset URL in a `.env` file. This configuration is used by projects built with Vite.js or Next.js.

```dotenv
VITE_SERVER_URL=http://localhost:7272
VITE_ASSET_URL=http://localhost:7272
```

--------------------------------

### Install Custom Font via npm

Source: https://docs.minimals.cc/typography

Installs the Inter Variable font using npm. This is the first step in adding a custom font to the project. It relies on the npm package manager.

```bash
npm install @fontsource-variable/inter
```

--------------------------------

### Global Configuration Setup (TypeScript)

Source: https://docs.minimals.cc/global-config

Defines the main configuration object for the application. It includes application name, version, server and asset paths, static export status, and specific configurations for various authentication methods (JWT, Amplify, Firebase, Supabase, Auth0) and Mapbox. Values are sourced from environment variables and `package.json`.

```typescript
export const CONFIG: ConfigValue = {
  appName: 'Minimal UI', // Application name
  appVersion: packageJson.version, // Application version from package.json
  serverUrl: process.env.NEXT_PUBLIC_SERVER_URL ?? '', // Server URL from environment variables
  assetsDir: process.env.NEXT_PUBLIC_ASSETS_DIR ?? '', // Assets directory from environment variables
  isStaticExport: JSON.parse(`${process.env.BUILD_STATIC_EXPORT}`), // Static export option (next.config.mjs)
  /**
   * Auth
   * @method jwt | amplify | firebase | supabase | auth0
   */
  auth: {
    method: 'jwt', // Authentication method
    skip: false, // Skip authentication
    redirectPath: paths.dashboard.root, // Redirect path after authentication
  },
  /**
   * Mapbox
   */
  mapboxApiKey: process.env.NEXT_PUBLIC_MAPBOX_API_KEY ?? '', // Mapbox API key from environment variables
  /**
   * Firebase
   */
  firebase: {
    apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY ?? '', // Firebase API key from environment variables
    authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN ?? '', // Firebase Auth Domain from environment variables
    projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID ?? '', // Firebase Project ID from environment variables
    storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET ?? '', // Firebase Storage Bucket from environment variables
    messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID ?? '', // Firebase Messaging Sender ID from environment variables
    appId: process.env.NEXT_PUBLIC_FIREBASE_APPID ?? '', // Firebase App ID from environment variables
    measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID ?? '', // Firebase Measurement ID from environment variables
  },
  /**
   * Amplify
   */
  amplify: {
    userPoolId: process.env.NEXT_PUBLIC_AWS_AMPLIFY_USER_POOL_ID ?? '', // AWS Amplify User Pool ID from environment variables
    userPoolWebClientId: process.env.NEXT_PUBLIC_AWS_AMPLIFY_USER_POOL_WEB_CLIENT_ID ?? '', // AWS Amplify User Pool Web Client ID from environment variables
    region: process.env.NEXT_PUBLIC_AWS_AMPLIFY_REGION ?? '', // AWS Amplify Region from environment variables
  },
  /**
   * Auth0
   */
  auth0: {
    clientId: process.env.NEXT_PUBLIC_AUTH0_CLIENT_ID ?? '', // Auth0 Client ID from environment variables
    domain: process.env.NEXT_PUBLIC_AUTH0_DOMAIN ?? '', // Auth0 Domain from environment variables
    callbackUrl: process.env.NEXT_PUBLIC_AUTH0_CALLBACK_URL ?? '', // Auth0 Callback URL from environment variables
  },
  /**
   * Supabase
   */
  supabase: {
    url: process.env.NEXT_PUBLIC_SUPABASE_URL ?? '', // Supabase URL from environment variables
    key: process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY ?? '', // Supabase Key from environment variables
  },
};
```

--------------------------------

### Using Axios and SWR with Base URL

Source: https://docs.minimals.cc/api-calls

Demonstrates integrating SWR with a pre-configured Axios instance that includes a base URL. The fetcher function is defined to use the configured axios instance for GET requests. This setup simplifies API calls by abstracting the base URL. Dependencies include 'swr' and the custom axios instance.

```javascript
import useSWR from 'swr';
import axios, { fetcher } from 'src/utils/axios';
 
const fetcher = (url) => axios.get(url).then((res) => res.data);
 
function ProductList() {
  // const { data, error, isLoading } = useSWR(`https://www.your-domain.com/api/product/list`, fetcher);
  const { data, error, isLoading } = useSWR(`/api/product/list`, fetcher);
 
  if (error) return <div>failed to load</div>;
 
  if (isLoading) return <div>loading...</div>;
 
  return (
    <>
      {data.products.map((product) => (
        <div key={product.id}>{product.name}</div>
      ))}
    </>
  );
}
```

--------------------------------

### Import Custom Font in Global CSS

Source: https://docs.minimals.cc/typography

Imports the installed custom font ('Inter Variable') into the global CSS file. This makes the font available throughout the application. It requires the font to be previously installed.

```css
@import '@fontsource-variable/inter';
```

--------------------------------

### Change Logo using Image File

Source: https://docs.minimals.cc/logo

This code demonstrates how to set a logo using a static image file from the `public` directory in a React component. It utilizes a `Box` component to render the image with specified dimensions.

```jsx
const logo = (
  <Box
    alt="logo"
    component="img"
    src="/logo/logo-single.svg"
    width={width}
    height={height}
  />
);

```

--------------------------------

### Create Theme with Localization Support

Source: https://docs.minimals.cc/settings

This function extends the base theme to include localization support by accepting `localeComponents` as a parameter. This allows for internationalization within the theme, enhancing the user experience across different regions. Refer to MUI documentation for localization guides.

```javascript
// src/theme/create-theme.(js | ts)

export const baseTheme = {
  colorSchemes: {
    light: {
      palette: palette.light,
      shadows: shadows.light,
      customShadows: customShadows.light
    },
    dark: {
      palette: palette.dark,
      shadows: shadows.dark,
      customShadows: customShadows.dark
    },
  },
  mixins,
  components,
  typography,
  shape: { borderRadius: 8 },
  direction: themeConfig.direction,
  cssVariables: themeConfig.cssVariables,
}

export function createTheme({ themeOverrides, localeComponents }) {
  const theme = createMuiTheme(baseTheme, localeComponents, themeOverrides);

  return theme;
}
```

--------------------------------

### Logo Component: Change Size (React)

Source: https://docs.minimals.cc/v5/logo

Demonstrates how to resize the Logo component by passing custom sx props for width and height. This example assumes the Logo component is imported from 'src/components/logo'.

```javascript
import Logo from 'src/components/logo';

<Logo sx={{ width: 64, height: 64 }} />
```

--------------------------------

### SWR Data Fetching without Base URL

Source: https://docs.minimals.cc/api-calls

Provides an example of using SWR to fetch data directly from a full API URL without relying on a pre-configured Axios instance with a base URL. This is useful for making requests to external APIs or when a base URL is not set. Dependencies include 'swr' and 'axios'.

```javascript
import useSWR from 'swr';
import axios from 'axios';
 
const fetcher = (url) => axios.get(url).then((res) => res.data);
 
function ProductList() {
  const { data, error, isLoading } = useSWR(
    `https://www.your-domain.com/api/product/list`,
    fetcher
  );
 
  if (error) return <div>failed to load</div>;
 
  if (isLoading) return <div>loading...</div>;
 
  return (
    <>
      {data.products.map((product) => (
        <div key={product.id}>{product.name}</div>
      ))}
    </>
  );
}
```

--------------------------------

### Next.js Subfolder Configuration (.env and next.config.mjs)

Source: https://docs.minimals.cc/subfolder

Configure Next.js projects to use a subfolder. This involves setting the NEXT_PUBLIC_ASSETS_DIR environment variable and the basePath in the next.config.mjs file. This setup ensures all assets and routes are correctly served from the specified subfolder.

```dotenv
NEXT_PUBLIC_ASSETS_DIR=/sub
```

```javascript
const nextConfig = {
  basePath: '/sub',
  ...
};
```

--------------------------------

### Navigation Link Usage with RouterLink

Source: https://docs.minimals.cc/routing

This example shows how to create a navigation link using Material-UI's Link component and a custom `RouterLink` component. It's used to navigate to a specific route, such as '/new', and can be styled with various properties like `underline` and `variant`.

```javascript
import Link from '@mui/material/Link';
import { RouterLink } from 'src/routes/components';

<Link component={RouterLink} href="/new" underline="none" variant="subtitle2">
  Go to About us
</Link>;
```

--------------------------------

### Configure Local Fonts in Create React App/Vite.js

Source: https://docs.minimals.cc/v5/typography

This example demonstrates how to set up local fonts for Create React App or Vite.js. It involves placing font files in the `public/fonts` directory and creating an `index.css` file within it to define these fonts using the `@font-face` CSS rule. The provided CSS includes definitions for 'CircularStd' and 'Barlow' with specified weights and formats.

```html
<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/fonts/index.css" />
  </head>
</html>
```

```css
@font-face {
  font-family: 'CircularStd';
  font-weight: 500;
  font-style: normal;
  src:
    local('CircularStd'),
    url('CircularStd-Medium.otf') format('opentype');
}
@font-face {
  font-family: 'CircularStd';
  font-weight: 700;
  font-style: normal;
  src:
    local('CircularStd'),
    url('CircularStd-Bold.otf') format('opentype');
}
@font-face {
  font-family: 'Barlow';
  font-weight: 500;
  font-style: normal;
  src:
    local('Barlow'),
    url('Barlow-Medium.ttf') format('truetype');
}
```

--------------------------------

### Usage Example with Custom Localization Hooks

Source: https://docs.minimals.cc/multi-language

This React component demonstrates the usage of custom localization hooks (`useLocales` and `useTranslate`) for managing language selection and displaying translated text. It includes a `RadioGroup` for language switching and renders translated strings based on the selected language.

```javascript
import { useLocales, useTranslate } from 'src/locales';
 
function MultiLanguage() {
const { t, onChangeLang } = useTranslate();
const { allLang, currentLang } = useLocales();
 
return (
<>
  <RadioGroup
    row
    value={currentLang.value}
    onChange={(event) => onChangeLang(event.target.value)} // TODO: need to fix bug, use event.target.value
  >
    {allLang.map((lang) => (
      <FormControlLabel
        key={lang.label}
        value={lang.value}
        label={lang.label}
        control={<Radio />}
      />
    ))}
  </RadioGroup>
 
  <Typography variant="h2">{t('heading')}</Typography>
  <Typography variant="body2">{t('nested.nested1')}</Typography>
</>
);
}

```

--------------------------------

### Usage of Fonts with styled-components in Next.js

Source: https://docs.minimals.cc/v5/typography

This example shows how to use imported font configurations (both local and Google Fonts) with styled-components in a Next.js application. It imports `primaryFont` and `secondaryFont` and applies their respective font families to styled `h1` and `h2` components.

```javascript
import { primaryFont, secondaryFont } from 'src/theme/typography';

const StyledTextH1 = styled('h1')({
  fontSize: 16,
  fontFamily: primaryFont.style.fontFamily,
});

const StyledTextH2 = styled('h2')({
  fontSize: 16,
  fontFamily: secondaryFont.style.fontFamily,
});
```

--------------------------------

### Role-Based Navigation Configuration

Source: https://docs.minimals.cc/routing

This configuration snippet demonstrates how to implement role-based access control for navigation items. Each navigation item can be assigned specific roles (e.g., 'admin', 'user'). If a user's role matches, the item will be displayed in the navigation menu. This example includes a 'caption' for additional display information.

```javascript
const navData = [
  {
    subheader: 'Marketing',
    items: [
      {
        title: 'Landing',
        path: '/landing',
        icon: <Iconify icon="carbon:bat" width={1} />,
        roles: ['admin'],
        caption: 'Display only admin role',
      },
      {
        title: 'Services',
        path: '/services',
        icon: <Iconify icon="carbon:cyclist" width={1} />,
        roles: ['admin', 'user'],
      },
    ],
  },
];
```

--------------------------------

### Define Global Color Palettes (JavaScript)

Source: https://docs.minimals.cc/v5/colors

Example of defining global color palettes in JavaScript for a theme. This snippet shows the structure for primary, secondary, info, success, warning, and error color sets, each with lighter, light, main, dark, and darker variations. This is typically used in theme configuration files.

```javascript
const PRIMARY = {
  lighter: '#C8FACD',
  light: '#5BE584',
  main: '#00AB55',
  dark: '#007B55',
  darker: '#005249'
};
const SECONDARY = {...};
const INFO = { ... };
const SUCCESS = {...};
const WARNING = {...};
const ERROR = {...};
...
```

--------------------------------

### Update Next.js Favicon Metadata

Source: https://docs.minimals.cc/logo

This snippet shows how to update the favicon metadata in Next.js applications by modifying the `metadata` object in the layout file. It ensures the correct favicon path is used.

```typescript
// src/app/layout.(tsx | jsx)

export const metadata: Metadata = {
  icons: [
    { rel: 'icon', url: '/favicon.ico' },
  ],
};

```

--------------------------------

### Add Navigation Item for Vite.js, CRA, Next.js

Source: https://docs.minimals.cc/routing

This code demonstrates how to add a new navigation item to the dashboard layout. It's applicable to Vite.js, CRA, and Next.js projects. The example shows how to include a 'New page' item with its title, path, and icon.

```typescript
export const navData = [
  {
    subheader: 'Overview',
    items: [
      {
        title: 'One',
        path: paths.dashboard.root,
        icon: ICONS.dashboard,
        info: <Label>v{CONFIG.appVersion}</Label>,
      },
      { title: 'Two', path: paths.dashboard.two, icon: ICONS.ecommerce },
      { title: 'Three', path: paths.dashboard.three, icon: ICONS.analytics },
      { title: 'New page', path: '/dashboard/new-page', icon: ICONS.analytics },
    ],
  },
  {
    subheader: 'Management',
    items: [
      {
        title: 'Group',
        path: paths.dashboard.group.root,
        icon: ICONS.user,
        children: [
          { title: 'Four', path: paths.dashboard.group.root },
          { title: 'Five', path: paths.dashboard.group.five },
          { title: 'Six', path: paths.dashboard.group.six },
        ],
      },
    ],
  },
];
```

--------------------------------

### Change Logo using SVG Component

Source: https://docs.minimals.cc/logo

This snippet provides an inline SVG component for the logo, supporting gradients and theming. It defines linear gradients and uses paths to construct the SVG logo, allowing for dynamic color application via variables like PRIMARY_DARK, PRIMARY_MAIN, and PRIMARY_LIGHT.

```jsx
const logo = (
  <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 512 512">
    <defs>
      <linearGradient id={`${gradientId}-1`} x1="100%" x2="50%" y1="9.946%" y2="50%">
        <stop offset="0%" stopColor={PRIMARY_DARK} />
        <stop offset="100%" stopColor={PRIMARY_MAIN} />
      </linearGradient>

      <linearGradient id={`${gradientId}-2`} x1="50%" x2="50%" y1="0%" y2="100%">
        <stop offset="0%" stopColor={PRIMARY_LIGHT} />
        <stop offset="100%" stopColor={PRIMARY_MAIN} />
      </linearGradient>

      <linearGradient id={`${gradientId}-3`} x1="50%" x2="50%" y1="0%" y2="100%">
        <stop offset="0%" stopColor={PRIMARY_LIGHT} />
        <stop offset="100%" stopColor={PRIMARY_MAIN} />
      </linearGradient>
    </defs>

    <g fill={PRIMARY_MAIN} fillRule="evenodd" stroke="none" strokeWidth="1">
      <path
        fill={`url(#${`${gradientId}-1`})`}
        d="M183.168 285.573l-2.918 5.298-2.973 5.363-2.846 5.095-2.274 4.043-2.186 3.857-2.506 4.383-1.6 2.774-2.294 3.939-1.099 1.869-1.416 2.388-1.025 1.713-1.317 2.18-.95 1.558-1.514 2.447-.866 1.38-.833 1.312-.802 1.246-.77 1.18-.739 1.111-.935 1.38-.664.956-.425.6-.41.572-.59.8-.376.497-.537.69-.171.214c-10.76 13.37-22.496 23.493-36.93 29.334-30.346 14.262-68.07 14.929-97.202-2.704l72.347-124.682 2.8-1.72c49.257-29.326 73.08 1.117 94.02 40.927z"
      />
      <path
        fill={`url(#${`${gradientId}-2`})`}
        d="M444.31 229.726c-46.27-80.956-94.1-157.228-149.043-45.344-7.516 14.384-12.995 42.337-25.267 42.337v-.142c-12.272 0-17.75-27.953-25.265-42.337C189.79 72.356 141.96 148.628 95.69 229.584c-3.483 6.106-6.828 11.932-9.69 16.996 106.038-67.127 97.11 135.667 184 137.278V384c86.891-1.611 77.962-204.405 184-137.28-2.86-5.062-6.206-10.888-9.69-16.994"
      />
      <path
        fill={`url(#${`${gradientId}-3`})`}
        d="M450 384c26.509 0 48-21.491 48-48s-21.491-48-48-48-48 21.491-48 48 21.491 48 48 48"
      />
    </g>
  </svg>
);

```

--------------------------------

### Configure Full ThemeProvider with Settings and Localization (JavaScript)

Source: https://docs.minimals.cc/v5/settings

Implements a comprehensive ThemeProvider in JavaScript, combining UI mode, color presets, contrast settings, direction, and localization. It leverages `useMemo` and `createTheme` for dynamic and optimized theme generation.

```javascript
export default function ThemeProvider({ children }: Props) {
  const { currentLang } = useLocales();
 
  const settings = useSettingsContext();
 
  const presets = createPresets(settings.themeColorPresets);
 
  const contrast = createContrast(settings.themeContrast, settings.themeMode);
 
  const memoizedValue = useMemo(
    () => ({
      palette: {
        ...palette(settings.themeMode),
        ...presets.palette,
        ...contrast.palette,
      },
      customShadows: {
        ...customShadows(settings.themeMode),
        ...presets.customShadows,
      },
      direction: settings.themeDirection,
      shadows: shadows(settings.themeMode),
      shape: { borderRadius: 8 },
      typography,
    }),
    [
      settings.themeMode,
      settings.themeDirection,
      presets.palette,
      presets.customShadows,
      contrast.palette,
    ]
  );
 
  const theme = createTheme(memoizedValue as ThemeOptions);
 
  theme.components = merge(componentsOverrides(theme), contrast.components);
 
  const themeWithLocale = useMemo(
    () => createTheme(theme, currentLang.systemValue),
    [currentLang.systemValue, theme]
  );
 
  return (
    <MuiThemeProvider theme={themeWithLocale}>
      <RTL themeDirection={settings.themeDirection}>
        <CssBaseline />
        {children}
      </RTL>
    </MuiThemeProvider>
  );
}
```

--------------------------------

### Setting up Axios Instance

Source: https://docs.minimals.cc/api-calls

Illustrates how to create a custom Axios instance with a specified base URL, read from environment variables. This is typically done in a utility file like src/utils/axios.js to centralize Axios configurations. It requires the 'axios' library.

```javascript
const axiosInstance = axios.create({ baseURL: process.env.REACT_APP_HOST_API });
```

--------------------------------

### Configure Default Theme Settings using SettingsProvider

Source: https://docs.minimals.cc/v5/settings

This snippet shows how to set default theme configurations such as theme mode, direction, contrast, layout, color presets, and stretch using the SettingsProvider component. It's useful for initializing the theme's base appearance.

```jsx
<SettingsProvider
  defaultSettings={{
    themeMode: 'light', // 'light' | 'dark'
    themeDirection: 'ltr', //  'rtl' | 'ltr'
    themeContrast: 'default', // 'default' | 'bold'
    themeLayout: 'vertical', // 'vertical' | 'horizontal' | 'mini'
    themeColorPresets: 'default', // 'default' | 'cyan' | 'purple' | 'blue' | 'orange' | 'red'
    themeStretch: false,
  }}
/>
```

--------------------------------

### Minimal Javascript Resources (Standard License)

Source: https://docs.minimals.cc/package

This snippet lists the Javascript-related resources available under the Standard license. These include starter kits and full versions for Next.js and Vite.js frameworks. This license is intended for free products.

```plaintext
Minimal_Javascript
├─ next-js
├─ vite-js
├─ starter-next-js
├─ starter-vite-js
```

--------------------------------

### Implement Base Theme Configuration in React

Source: https://docs.minimals.cc/v5/settings

This code demonstrates how to set up the base theme for a React application using Material-UI's createTheme. It defines the palette, shadows, typography, and component overrides, serving as the foundation for theme customization.

```jsx
export default function ThemeProvider({ children }: Props) {
  const memoizedValue = useMemo(
    () => ({
      palette: palette('light'), // or palette('dark')
      shadows: shadows('light'), // or shadows('dark')
      customShadows: customShadows('light'), // or customShadows('dark')
      shape: { borderRadius: 8 },
      typography,
    }),
    []
  );
 
  const theme = createTheme(memoizedValue as ThemeOptions);
 
  theme.components = componentsOverrides(theme);
 
  return (
    <MuiThemeProvider theme={theme}>
      <CssBaseline />
      {children}
    </MuiThemeProvider>
  );
}
```

--------------------------------

### Configure ThemeProvider with Localization (TypeScript)

Source: https://docs.minimals.cc/v5/settings

Sets up the Material-UI ThemeProvider, integrating current language settings for localization. It uses `useMemo` to optimize theme creation based on language, ensuring efficient rendering.

```typescript
export default function ThemeProvider({ children }: Props) {
  const { currentLang } = useLocales();
 
  const memoizedValue = useMemo(
    () => ({
      palette: palette('light'),
      shadows: shadows('light'),
      customShadows: customShadows('light'),
      shape: { borderRadius: 8 },
      typography,
    }),
    []
  );
 
  const theme = createTheme(memoizedValue as ThemeOptions);
 
  theme.components = componentsOverrides(theme);
 
  const themeWithLocale = useMemo(
    () => createTheme(theme, currentLang.systemValue),
    [currentLang.systemValue, theme]
  );
 
  return (
    <MuiThemeProvider theme={themeWithLocale}>
      <CssBaseline />
      {children}
    </MuiThemeProvider>
  );
}
```

--------------------------------

### Basic SWR Data Fetching

Source: https://docs.minimals.cc/api-calls

Demonstrates a basic implementation of data fetching using SWR with a custom fetcher function. It handles loading and error states for a product list API endpoint. Dependencies include 'swr' and a utility function 'fetcher' from 'src/utils/axios'.

```javascript
import useSWR from 'swr';
import { fetcher } from 'src/utils/axios';
 
function ProductList() {
  const { data, error, isLoading } = useSWR('/api/product/list', fetcher);
 
  if (error) return <div>failed to load</div>;
 
  if (isLoading) return <div>loading...</div>;
 
  return (
    <>
      {data.products.map((product) => (
        <div key={product.id}>{product.name}</div>
      ))}
    </>
  );
}
```

--------------------------------

### Create Theme with User Settings Applied

Source: https://docs.minimals.cc/settings

This code snippet demonstrates creating a theme that incorporates user-defined settings. It uses `applySettingsToTheme` and `applySettingsToComponents` to modify the core theme and its components based on the provided `settingsState`. This allows for dynamic theme customization.

```javascript
// src/theme/create-theme.(js | ts)

export const baseTheme = {
  colorSchemes: {
    light: {
      palette: palette.light,
      shadows: shadows.light,
      customShadows: customShadows.light
    },
    dark: {
      palette: palette.dark,
      shadows: shadows.dark,
      customShadows: customShadows.dark
    },
  },
  mixins,
  components,
  typography,
  shape: { borderRadius: 8 },
  direction: themeConfig.direction,
  cssVariables: themeConfig.cssVariables,
}

export function createTheme({ settingsState, themeOverrides }) {
  const updatedCore = settingsState ? applySettingsToTheme(baseTheme, settingsState) : baseTheme;

  const updatedComponents = settingsState
    ? applySettingsToComponents(baseTheme.components, settingsState)
    : {};

  const theme = createMuiTheme(updatedCore, updatedComponents, themeOverrides);

  return theme;
}
```

--------------------------------

### Configure Primary Font Family in theme-config.ts

Source: https://docs.minimals.cc/typography

Sets the 'Inter Variable' font as the primary font family in the theme configuration file. This step integrates the custom font into the project's design system by updating the theme settings.

```typescript
fontFamily: {
  primary: 'Inter Variable',
  // other font configurations
}
```

--------------------------------

### Run vite-to-cra CLI for Minimal UI v5

Source: https://docs.minimals.cc/migrate-to-cra

Execute the `vite-to-cra` CLI tool version 1.1.1 to migrate projects using Minimal UI version 5. This command should be run from the project's root directory.

```shell
npx vite-to-cra@1.1.1
```

--------------------------------

### Minimal Javascript and Typescript Resources (Plus License)

Source: https://docs.minimals.cc/package

This snippet details the Javascript and Typescript resources included with the Plus license. It covers both Next.js and Vite.js frameworks in their full and starter versions, along with Figma design files. This license is also for free products.

```plaintext
Minimal_Javascript
├─ next-js
├─ vite-js
├─ starter-next-js
├─ starter-vite-js

Minimal_Typescript
├─ next-ts
├─ vite-ts
├─ starter-next-ts
├─ starter-vite-ts

Minimal_Design
├─ Figma file
```

--------------------------------

### Add Color Presets Option to Theme Configuration

Source: https://docs.minimals.cc/v5/settings

This snippet demonstrates how to implement color presets for theme customization. It merges predefined palette and custom shadow configurations based on the selected `themeColorPresets` setting, allowing for distinct visual styles.

```jsx
export default function ThemeProvider({ children }: Props) {
  const settings = useSettingsContext();
 
  const presets = createPresets(settings.themeColorPresets);
 
  const memoizedValue = useMemo(
    () => ({
      palette: {
        ...palette('light'),
        ...presets.palette,
      },
      customShadows: {
        ...customShadows('light'),
        ...presets.customShadows,
      },
      shadows: shadows('light'),
      shape: { borderRadius: 8 },
      typography,
    }),
    [presets.customShadows, presets.palette]
  );
 
  const theme = createTheme(memoizedValue as ThemeOptions);
 
  theme.components = componentsOverrides(theme);
 
  return (
    <MuiThemeProvider theme={theme}>
      <CssBaseline />
      {children}
    </MuiThemeProvider>
  );
}
```

--------------------------------

### Create Base Theme Configuration

Source: https://docs.minimals.cc/v7/settings

This JavaScript function, `createTheme`, generates the base theme object without considering settings or locales. It initializes theme properties like color schemes, shadows, typography, and components.

```javascript
export function createTheme() {
  const initialTheme = {
    colorSchemes,
    shadows: shadows('light'),
    customShadows: customShadows('light'),
    shape: { borderRadius: 8 },
    components,
    typography,
    cssVarPrefix: '',
    shouldSkipGeneratingVar,
  };
 
  const theme = extendTheme(initialTheme, overridesTheme);
 
  return theme;
}
```

--------------------------------

### Run vite-to-cra CLI for Minimal UI v6.2.0+

Source: https://docs.minimals.cc/migrate-to-cra

Execute the `vite-to-cra` CLI tool version 1.3.0 to migrate projects using Minimal UI versions 6.2.0, 6.3.0, or 7.0.0. This command should be run from the project's root directory.

```shell
npx vite-to-cra@1.3.0
```

--------------------------------

### Run vite-to-cra CLI for Minimal UI v6.0.0 - v6.1.0

Source: https://docs.minimals.cc/migrate-to-cra

Execute the `vite-to-cra` CLI tool version 1.2.0 to migrate projects using Minimal UI versions 6.0.0, 6.0.1, or 6.1.0. This command should be run from the project's root directory.

```shell
npx vite-to-cra@1.2.0
```

--------------------------------

### Replace @dnd-kit with @atlaskit/pragmatic-drag-and-drop (JavaScript)

Source: https://docs.minimals.cc/changelog

This change involves swapping out the `@dnd-kit` drag-and-drop library for `@atlaskit/pragmatic-drag-and-drop`. This suggests a move towards a more specific or robust solution for drag-and-drop functionality, particularly relevant for kanban-style interfaces.

```javascript
Replace `@dnd-kit/*` with `@atlaskit/pragmatic-drag-and-drop/*` (kanban).
```

--------------------------------

### Create Base Theme (No Localization/Settings)

Source: https://docs.minimals.cc/settings

This code defines a base theme configuration for applications that do not require localization or dynamic settings. It includes color schemes, mixins, components, typography, shape, direction, and CSS variables. The `createTheme` function allows for theme overrides.

```javascript
// src/theme/create-theme.(js | ts)

export const baseTheme = {
  colorSchemes: {
    light: {
      palette: palette.light,
      shadows: shadows.light,
      customShadows: customShadows.light
    },
    dark: {
      palette: palette.dark,
      shadows: shadows.dark,
      customShadows: customShadows.dark
    },
  },
  mixins,
  components,
  typography,
  shape: { borderRadius: 8 },
  direction: themeConfig.direction,
  cssVariables: themeConfig.cssVariables,
}

export function createTheme({ themeOverrides }) {
  const theme = createMuiTheme(baseTheme, themeOverrides);

  return theme;
}
```

--------------------------------

### Create Theme with User Settings

Source: https://docs.minimals.cc/v7/settings

This TypeScript function creates a theme that is customized based on user-defined settings. It accepts a `settings` object to dynamically adjust aspects like color scheme, direction, and component styles.

```typescript
export function createTheme(
  settings
) {
  const initialTheme = {
    colorSchemes,
    shadows: shadows(settings.colorScheme),
    customShadows: customShadows(settings.colorScheme),
    direction: settings.direction,
    shape: { borderRadius: 8 },
    components,
    typography,
    cssVarPrefix: '',
    shouldSkipGeneratingVar,
  };
 
  const updateTheme = updateCoreWithSettings(initialTheme, settings);
 
  const theme = extendTheme(
    updateTheme,
    updateComponentsWithSettings(settings),
  );
 
  return theme;
}
```

--------------------------------

### Create Theme with Localization

Source: https://docs.minimals.cc/v7/settings

This TypeScript function extends the base theme creation to include localization. It accepts `localeComponents` as an argument to incorporate language-specific adjustments into the theme.

```typescript
export function createTheme(
  localeComponents,
) {
  const initialTheme = {
    colorSchemes,
    shadows: shadows('light'),
    customShadows: customShadows('light'),
    shape: { borderRadius: 8 },
    components,
    typography,
    cssVarPrefix: '',
    shouldSkipGeneratingVar,
  };
 
  const theme = extendTheme(
    initialTheme,
    localeComponents,
  );
 
  return theme;
}
```

--------------------------------

### Run Knip to Identify Unused Code

Source: https://docs.minimals.cc/clean-project

Executes the Knip command-line tool to analyze the project and report unused files, dependencies, and other potential code to be removed. The output helps in optimizing the project.

```bash
npx knip
```

--------------------------------

### Configure Default Settings with Local Storage

Source: https://docs.minimals.cc/settings

This snippet demonstrates how to set default theme settings using local storage. It involves wrapping the application with a SettingsProvider and passing defaultSettings. Ensure localStorage or cookies are cleared when modifying defaults to prevent conflicts.

```jsx
// src/App.(jsx | tsx) or src/app/layout.(jsx | tsx)

import { defaultSettings } from 'src/components/settings';

<SettingsProvider defaultSettings={defaultSettings}>
  ...
</SettingsProvider>
```

--------------------------------

### Navigate to Project Directory

Source: https://docs.minimals.cc/migrate-to-cra

Change the current directory to the root of your Vite.js project, either 'vite-ts' or 'starter-vite-ts', before running migration commands.

```shell
cd vite-ts
# OR
cd starter-vite-ts
```

--------------------------------

### Import Global Styles for Components in CSS

Source: https://docs.minimals.cc/global-styles

This CSS code demonstrates how to import styles for various components like scrollbar, map, lightbox, and chart into the global CSS file. It ensures that components function correctly by including their specific styling dependencies. Ensure the paths to the component style files are accurate.

```css
/* scrollbar */
/* https://minimals.cc/components/extra/scroll*/
/* src/components/scrollbar */
@import './components/scrollbar/styles.css';

/* map */
/* https://minimals.cc/components/extra/map*/
/* src/components/map */
@import './components/map/styles.css';

/* lightbox */
/* https://minimals.cc/components/extra/lightbox*/
/* src/components/lightbox */
@import './components/lightbox/styles.css';

/* chart */
/* https://minimals.cc/components/extra/chart*/
/* src/components/chart */
@import './components/chart/styles.css';

a {
  color: red;
  text-decoration: none;
}
...
```

--------------------------------

### Configure Default Settings with Cookies Storage (Next.js)

Source: https://docs.minimals.cc/settings

This snippet shows how to configure default theme settings using cookies storage, specifically for Next.js applications. It utilizes `detectSettings` to retrieve cookie-based settings and passes them along with default settings to the SettingsProvider.

```jsx
// src/App.(jsx | tsx) or src/app/layout.(jsx | tsx)

import { defaultSettings } from 'src/components/settings';
import { detectSettings } from 'src/components/settings/server';

export default async function RootLayout({ children }: RootLayoutProps) {
  const cookieSettings = await detectSettings();

  return (
    <html lang="en" dir={cookieSettings.direction} suppressHydrationWarning>
      <body>
        <SettingsProvider cookieSettings={cookieSettings} defaultSettings={defaultSettings}>
          ...
        </SettingsProvider>
      </body>
    </html>
  );
}
```

--------------------------------

### Replace mapbox-gl with maplibre-gl (JavaScript)

Source: https://docs.minimals.cc/changelog

This snippet details the replacement of the `mapbox-gl` library with `maplibre-gl`. This is a common migration for projects that need a fully open-source alternative to Mapbox's offerings, often due to licensing changes or a desire for greater control.

```javascript
Replace `mapbox-gl` with `maplibre-gl` (map).
```

--------------------------------

### Set Index Page Routing Configuration

Source: https://docs.minimals.cc/routing

This configuration defines the initial routing for the application. It includes a redirect from the root path to a configured default path and sets up the main layout with an index route for the homepage. This is essential for determining the default page displayed when a user visits the website.

```javascript
export const routesSection = [
    {
      // Redirect to default path (skip homepage)
      path: '/',
      element: <Navigate to={CONFIG.auth.redirectPath} replace />,
    },
    {
      // Show homepage as index
      path: '/',
      element: (
        <MainLayout>
          <Outlet />
        </MainLayout>
      ),
      children: [{ element: <HomePage />, index: true }],
    },
];
```

--------------------------------

### Implement Right-To-Left (RTL) Layout Option

Source: https://docs.minimals.cc/v5/settings

This code shows how to integrate a Right-To-Left (RTL) layout option into the theme. It uses the `themeDirection` setting from `useSettingsContext` and applies it within an `RTL` wrapper component to ensure correct text and layout direction.

```jsx
export default function ThemeProvider({ children }: Props) {
  const settings = useSettingsContext();
 
  const memoizedValue = useMemo(
    () => ({
      palette: palette('light'),
      shadows: shadows('light'),
      customShadows: customShadows('light'),
      direction: settings.themeDirection,
      shape: { borderRadius: 8 },
      typography,
    }),
    [settings.themeDirection]
  );
 
  const theme = createTheme(memoizedValue as ThemeOptions);
 
  theme.components = componentsOverrides(theme);
 
  return (
    <MuiThemeProvider theme={theme}>
      <RTL themeDirection={settings.themeDirection}>
        <CssBaseline />
        {children}
      </RTL>
    </MuiThemeProvider>
  );
}
```

--------------------------------

### Configure Default Theme Settings Provider

Source: https://docs.minimals.cc/v7/settings

This snippet shows how to use the SettingsProvider component to set default theme configurations such as color scheme, direction, layout, and primary color. It's typically used in the application's root or layout files.

```jsx
<SettingsProvider
  defaultSettings={{
    colorScheme: 'light',
    direction: 'ltr',
    contrast: 'default',
    navLayout: 'vertical',
    primaryColor: 'default',
    navColor: 'integrate',
    compactLayout: true,
    fontFamily: defaultFont,
  }}
/>
```

--------------------------------

### Configure Knip for Project Scanning

Source: https://docs.minimals.cc/clean-project

Sets up the Knip configuration file (`knip.jsonc`) to scan the project for unused code. It defines paths to include, project file types, and options to ignore certain exports or dependencies.

```json
{
  "$schema": "https://unpkg.com/knip@5/schema-jsonc.json",
  "paths": {
    "src/*": ["./src/*"]
  },
  "project": ["src/**/*.{js,cjs,mjs,jsx,ts,cts,mts,tsx}"],
  "ignoreExportsUsedInFile": true,
  "ignoreDependencies": [
    "@fontsource.+"
  ],
  "ignore": [
    "src/_mock/**"
  ]
}
```

--------------------------------

### Migrate Icon Component in React

Source: https://docs.minimals.cc/changelog

This code demonstrates the migration of an icon component from the '@iconify/react' library to a custom 'Iconify' component. The new approach simplifies icon usage by using string references and allows for easier styling with the 'sx' prop.

```javascript
// before
import { Icon } from '@iconify/react';
import menu2Fill from '@iconify/icons-eva/menu-2-fill';

<Icon icon={menu2Fill} />;

// after
import Iconify from 'src/components/Iconify';

<Iconify icon="eva:bell-fill" sx={{ width: 20, height: 20, color: 'red' }} />;
```

--------------------------------

### Layout Dimensions Configuration (JavaScript)

Source: https://docs.minimals.cc/v5/layout

Defines constants for header and navigation dimensions used in website layouts. These include mobile and desktop header heights, and vertical and mini navigation widths. This configuration is essential for responsive design and layout adjustments.

```javascript
export const HEADER = {
  H_MOBILE: 64,
  H_DESKTOP: 80,
  H_DESKTOP_OFFSET: 80 - 16,
}

export const NAV = {
  W_VERTICAL: 280,
  W_MINI: 88,
};
```

--------------------------------

### Setting Axios Base URL with .env

Source: https://docs.minimals.cc/api-calls

Shows how to configure the base URL for Axios requests by defining the REACT_APP_HOST_API environment variable in a .env file. This allows for centralized API endpoint configuration. This snippet is a configuration setting, not executable code.

```env
REACT_APP_HOST_API=https://www.your-domain.com
```

--------------------------------

### Static Export Configuration (Next.js)

Source: https://docs.minimals.cc/global-config

Sets the `isStaticExport` variable within Next.js configuration files. This is used to indicate whether the project is configured for static export. The value is hardcoded as a string 'true'.

```javascript
const isStaticExport = 'true';
```

--------------------------------

### Configure Google Fonts in Create React App/Vite.js

Source: https://docs.minimals.cc/v5/typography

This snippet shows how to link Google Fonts in the `index.html` file for Create React App or Vite.js projects. It includes adding `<link>` tags for 'Public Sans' and 'Barlow'. The JavaScript part defines CSS variables for these font families, which can then be used in your theme configuration.

```html
<!doctype html>
<html lang="en">
  <head>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link href="https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700;800&display=swap"
      rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css2?family=Barlow:wght@900&display=swap" rel="stylesheet" />
  </head>
</html>
```

```javascript
const primaryFont = 'Public Sans, sans-serif';
const secondaryFont = 'Barlow, sans-serif';

const typography = {
  fontFamily: primaryFont,
  h1: {
    fontFamily: primaryFont,
  },
  h2: {
    fontFamily: secondaryFont,
},
};
```

--------------------------------

### Primary Color Palette Definition (JSON)

Source: https://docs.minimals.cc/v6/colors

This snippet demonstrates the structure for defining a primary color palette within the project's theme configuration. It includes variations from 'lighter' to 'darker' along with 'contrastText'.

```json
{
  "primary": {
    "lighter": "#C8FAD6",
    "light": "#5BE49B",
    "main": "#00A76F",
    "dark": "#007867",
    "darker": "#004B50",
    "contrastText": "#FFFFFF"
  },
...
}
```
Tokens:
Raw