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

228 votes546 views10 answers
Minesweeper
Shell/Bash
0 vote339 views1 answer
Git schannel
Shell/Bash
1 vote327 views1 answer
Curl download file without output
Shell/Bash
0 vote338 views1 answer
Git remote add origin gitlab
Shell/Bash
1 vote313 views1 answer
Bash flags
Shell/Bash
21 votes331 views2 answers
Ls file size
Shell/Bash
0 vote300 views1 answer
Err:5 http://archive.ubuntu.com/ubuntu focal/main amd64 libgif7 amd64 5.1.9-1 Temporary failure resolving 'archive.ubuntu.com'
Shell/Bash
2 votes332 views2 answers
How to install cordova
Shell/Bash
0 vote323 views1 answer
Install k3s on ubuntu
Shell/Bash
0 vote323 views1 answer
How to clear a file without deleting it linux
Shell/Bash