Nextui

npm install @nextui-org/react

Source: nextui.org

Nextui

import { createTheme } from '@nextui-org/react';

const lightTheme = createTheme({
  type: 'light',
});

return (
  <ShopCard className={lightTheme} />
);


const darkTheme = createTheme({
  type: 'dark',
});

return (
  <ShopCard className={darkTheme} />
);



const lightModernTheme = createTheme({
  type: 'light',
  className: 'light-modern',
  theme: {
    colors: {
      primary: '#7928CA',
      primaryLight: '#d9c2f0',
      success: '#FF1CF7'
    }
  }
});

return (
  <ShopCard className={lightModernTheme}/>
)

const darkModernTheme = createTheme({
  type: 'dark',
  className: 'dark-modern',
  theme: {
    colors: {
      primary: '#7928CA',
      primaryLight: '#582A87',
      success: '#FF1CF7'
    }
  }
});

return (
  <ShopCard className={darkModernTheme} />
);

const lightElegantTheme = createTheme({
  type: 'light',
  className: 'light-elegant',
  theme: {
    colors: {
      primary: '#000000',
      primaryLight: '#AAAAAA',
      success: '#a2a2a2'
    },
    radii: {
      md: '4px'
    }
  }
});

return (
  <ShopCard className={lightElegantTheme}/>
);

const darkElegantTheme = createTheme({
  type: 'dark',
  className: 'dark-elegant',
  theme: {
    colors: {
      primary: '#ffffff',
      primaryLight: '#222222',
      success: '#a2a2a2'
    },
    radii: {
      md: '4px'
    }
  }
});

return (
  <ShopCard className={darkElegantTheme}/>
);


const lightRetroTheme = createTheme({
  type: 'light',
  className: 'light-retro',
  theme: {
    colors: {
      primary: '#FFD34E',
      primaryLight: 'transparent',
      error: '#EE457E'
    }
  }
});

return (
  <ShopCard className={lightRetroTheme}/>
);

const darkRetroTheme = createTheme({
  type: 'dark',
  className: 'dark-retro',
  theme: {
    colors: {
      primary: '#FFD34E',
      primaryLight: 'transparent',
      error: '#EE457E'
    }
  }
});

return (
  <ShopCard className={darkRetroTheme}/>
);

Source: nextui.org

Similar codes

0 vote199 views1 answer
Git config --global http.sslverify "false" This command resolve my problem
Shell/Bash
16 votes178 views5 answers
Gitignore is not working
Shell/Bash
3 votes219 views3 answers
Uninstall vscode linux
Shell/Bash
0 vote172 views1 answer
How to turn off bluetooth in ubuntu 18.04 terminal
Shell/Bash
6 votes180 views3 answers
How to activate conda environment on linux terminal
Shell/Bash
0 vote189 views1 answer
Bluetooth settings not opening in ubuntu
Shell/Bash
0 vote160 views1 answer
Github invites
Shell/Bash
1 vote157 views1 answer
Install gromit-mpx to mint
Shell/Bash
0 vote185 views1 answer
How to see all files in commit
Shell/Bash
1 vote174 views1 answer
How to overwrite file linux cli
Shell/Bash