Next.js

Everything you need to set up Secptrum UI with Next.js.

Installation

You can install Secptrum UI using your favorite package manager

npm

yarn

pnpm

npm install secptrum-ui react-icons

Setup Secptrum UI

After the installation, you need to set up Secptrum UI registry in your Next.js project.

Initialize the registry file

Run the following command to generate the registry file.

npm

yarn

pnpm

npx secptrum-ui init

This will create a SecptrumUIRegistry component in your project and add it to lib/registry.js or lib/registry.tsx

Import SecptrumUIRegistry

Finally, import the SecptrumUIRegistry component in your layout.js or layout.tsx file:


// app/layout.tsx
import SecptrumUIRegistry from '@/lib/registry';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        <SecptrumUIRegistry>{children}</SecptrumUIRegistry>
      </body>
    </html>
  );
}

These steps ensure that Secptrum UI components are properly registered and available throughout your application.

Note: When using styled to customize components, you need to add the 'use client' directive at the top of the file. Don't worry about style glitches, Secptrum UI Registry will handle those for you.

ModeProvider

ModeProvider is a component that provides the mode context to all components.

Implementation

Create a ModeProvider component in your project and paste the code below.


// app/components/ModeProvider.tsx
'use client';
    
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;

Import ModeProvider

Finally, import the ModeProvider component in your layout.js or layout.tsx along with ThemeProvider:


// app/layout.tsx
import ModeProvider from '@/components/ModeProvider';
import { ThemeProvider } from 'secptrum-ui';

export default function RootLayout({ children }: { children: React.ReactNode }) {
// Define your theme, it's better to define your theme in a separate file
const theme = {
 light: {
  colors: {
      background: '#fff',
    },
  },
  dark: {
    colors: {
      background: '#000',
    },
    },
  };

  return (
    <html>
      <body>
        <ThemeProvider theme={theme}>
          <ModeProvider>{children}</ModeProvider>
        </ThemeProvider>
      </body>
    </html>
  );
}

Single Mode

If your application has only one mode, import the ModeProvider component directly from "secptrum-ui" and pass the mode to it.


// app/layout.tsx
import { ModeProvider } from 'secptrum-ui';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        <ModeProvider mode="dark">{children}</ModeProvider>
      </body>
    </html>
  );
}

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.