@nextui-org/theme

What is @nextui-org/theme?

@nextui-org/theme is a customizable theme package for the NextUI library, which provides a set of design tokens and utilities to create consistent and visually appealing user interfaces. It allows developers to easily define and apply themes across their applications.

What are @nextui-org/theme's main functionalities?

Custom Theme Creation

This feature allows developers to create custom themes by defining their own color schemes, typography, and other design tokens. The `createTheme` function is used to generate a theme object that can be applied to the application.

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

const myTheme = createTheme({
  type: 'dark',
  theme: {
    colors: {
      primary: '#ff4ecd',
      secondary: '#fefefe',
      background: '#000000'
    }
  }
});

Theme Provider

The `NextUIProvider` component is used to apply the custom theme to the entire application. By wrapping the application with `NextUIProvider` and passing the custom theme, all components within the application will adhere to the defined theme.

import { NextUIProvider } from '@nextui-org/react';
import { myTheme } from './myTheme';

function App() {
  return (
    <NextUIProvider theme={myTheme}>
      <YourComponent />
    </NextUIProvider>
  );
}

Using Theme Tokens

This feature allows developers to use theme tokens in their styled components. By using the `styled` function and referencing theme tokens (e.g., `$primary`, `$secondary`), developers can ensure that their components are consistent with the defined theme.

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

const Button = styled('button', {
  backgroundColor: '$primary',
  color: '$secondary',
  padding: '10px 20px',
  borderRadius: '5px'
});

Other packages similar to @nextui-org/theme

styled-components

styled-components is a popular library for styling React applications using tagged template literals. It allows for defining component-level styles with support for theming. Compared to @nextui-org/theme, styled-components offers more flexibility in defining styles but requires more setup for theming.

emotion

Emotion is a performant and flexible CSS-in-JS library that allows developers to style applications with JavaScript. It provides powerful theming capabilities similar to @nextui-org/theme but is more general-purpose and can be used with various frameworks beyond NextUI.

chakra-ui

Chakra UI is a simple, modular, and accessible component library that provides a set of building blocks to create React applications. It includes a theming system that allows for easy customization of design tokens, similar to @nextui-org/theme, but with a broader set of pre-built components.

README

@nextui-org/theme

NextUI theme primitives, here you can find the TailwindCSS plugin, colors, layout, spacing, typography and some other utilities.

Please refer to the documentation for more information.

Installation

yarn add @nextui-org/theme
# or
npm i @nextui-org/theme

Contribution

Yes please! See the contributing guidelines for details.

License

This project is licensed under the terms of the MIT license.