Installation - Develop

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 you can install the library from npmjs and start using the components right away.

Implementation Options

Direct Repository Cloning:

  • Clone the main Cherry repository.
  • Dive into the components’ code.
  • Customize to your heart’s content.
  • Ideal for extensive modifications.
git clone [email protected]:cherry-design-system/styled-components.git

NPM Installation:

  • Install the Cherry library from npmjs.
  • Import components directly into your project.
  • Get started quickly.
  • Perfect for smaller projects or rapid development.
npm i cherry-styled-components

Feel free to explore Cherry’s React components and choose the path that suits your project best. That’s it! Happy coding!

Theme Context

Always make sure to wrap your application in the CherryThemeProvider component. Ensure that your theme prop is passed down correctly. Here’s an example of how to do this:

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

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

Next.js

When integrating Cherry Styled Components into your Next.js app, pay attention to how you import them. To ensure compatibility with compiled modules, follow this approach. First install both dependencies:

npm i cherry-styled-components styled-components

Make sure to always import uncompiled components from:

"cherry-styled-components/src/lib"

To render the CSS when using Cherry React Components in your Next.js app, follow these instructions:

  1. Open your layout.tsx file.
  2. Wrap your entire application in the following components:
import {
  StyledComponentsRegistry,
  CherryThemeProvider,
} from "cherry-styled-components/src/lib";

Make sure you pass down the theme prop. Here’s how it should look:

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

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

By following these steps, your Cherry components will be styled correctly, Next.js requires these additional steps because it uses server-side rendering.