Vite.js

A guide to setting up Secptrum UI with Vite.js.

Installation

You can install Secptrum UI using your favorite package manager

npm

yarn

pnpm

npm install secptrum-ui react-icons

Setup ModeProvider

Below is an example of how to configure the mode in your project.

ModeProvider


// src/components/ModeProvider.tsx

import React from 'react';
import { ModeProvider as Provider, useTheme } from 'secptrum-ui';
        
const ModeProvider = ({ children }: { children: React.ReactNode }) => {
  const { mode } = useTheme();
  return <Provider mode={mode}>{children}</Provider>;
};

export default ModeProvider;

Usage

Wrap your application in the ThemeProvider and ModeProvider components to use the mode provider.


// src/App.tsx or src/App.jsx

import React from 'react';
import ModeProvider from './components/ModeProvider';

const App = () => {
const theme = {
 light:{
  colors:{
    text: '#000',
    background: '#fff',
  },
 },
 dark:{
  colors:{
    text: '#fff',
    background: '#000',
  },
 },
}
  return (
    <ThemeProvider theme={theme}>
      <ModeProvider>
        ...
      </ModeProvider>
    </ThemeProvider>
  );
};

export default App;

Single Mode

If you want to use a single mode, you can import the ModeProvider component directly from "secptrum-ui" and pass the mode to it.


// src/App.tsx or src/App.jsx

import { ModeProvider } from 'secptrum-ui';

const App = () => {
  return <ModeProvider mode="dark">...</ModeProvider>;
};

export default App;

Enjoy!

Congrats on setting up Secptrum UI! Start building and explore our examples to make the most of its features.

If you encounter any bugs or issues while using Spectrum UI, please report them by creating a new issue. Your feedback is invaluable and helps improve the library.