AI Assistant

Installation

There are two main ways to install Cherry Styled Components into your project. You can either clone the main repository and customize the components to your liking, or install the library from npm.

Implementation Options

Install the Cherry library from npm. Import components directly into your project. Perfect for smaller projects or rapid development.

npm i cherry-styled-components

Theme Context

Always wrap your application in the CherryThemeProvider component. Ensure that your theme prop is passed down correctly:

import { CherryThemeProvider, theme } from "cherry-styled-components";

export default function App({ Component, pageProps }) {
  return (
    <CherryThemeProvider theme={theme}>
      <Component {...pageProps} />
    </CherryThemeProvider>
  );
}

Next.js Integration

When integrating into a Next.js app, first install both dependencies:

npm i cherry-styled-components styled-components

To render the CSS, open your layout.tsx and wrap your application:

import {
  StyledComponentsRegistry,
  CherryThemeProvider,
  theme,
} from "cherry-styled-components";

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>
        <StyledComponentsRegistry>
          <CherryThemeProvider theme={theme}>
            {children}
          </CherryThemeProvider>
        </StyledComponentsRegistry>
      </body>
    </html>
  );
}

Next.js requires these additional steps because it uses server-side rendering.

Overview PreviousThemeNext
GitHubDiscord