@op-ent/unstyled-ui-theme

@op-ent/unstyled-ui-theme is the official theme of op-ent, to use with unstyled-ui and Tailwind CSS.

Prerequisites

Have Tailwind CSS setup in your project
Have unstyled-ui installed

Usage

Install package:

# npm
npm install @op-ent/unstyled-ui-theme

# yarn
yarn install @op-ent/unstyled-ui-theme

# pnpm
pnpm install @op-ent/unstyled-ui-theme

Wrap your config in tailwind.config.js with withTheme:

const { withTheme } = require('@op-ent/unstyled-ui-theme')

/** @type {import('tailwindcss').Config} */
module.exports = withTheme({
    // your config
})

Import the colors in your app. For example in a Next.js project in /pages/_app.tsx:

import '@op-ent/unstyled-ui-theme/dist/colors.css'
// rest of your app

Create a theme, for example in /lib/theme.tsx (use JSX because the config can use JSX):

import { extendTheme } from '@op-ent/unstyled-ui-theme'

export const theme = extendTheme({})

Wrap your app with the ThemeProvider. For example in a Next.js project in /pages/_app.tsx:

function MyApp({ Component, pageProps }) {
    return (
        <ThemeProvider value={theme}>
            <Component {...pageProps} />
        </ThemeProvider>
    )
}

export default MyApp

And you're good to go!

💻 Development

Clone this repository
Install dependencies using yarn install
Watch files in development using yarn dev
Run interactive tests using yarn test

License

Published under MIT License.

Made with ❤️ by Florian LEFEBVRE in France.

Sponsors