# Installation > Install Cherry Styled Components via npm or by cloning the repository. Source: https://cherry.al/code/installation > For the complete documentation index, see [llms.txt](https://cherry.al/llms.txt). # 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 along with its peer dependencies. Import components directly into your project. Perfect for smaller projects or rapid development. The library requires `react` and `react-dom` (^18 or ^19) and `styled-components` (^6) as peer dependencies. Clone the main Cherry repository. Dive into the components' code and customize to your heart's content. Ideal for extensive modifications. ```bash git clone git@github.com:cherry-design-system/styled-components.git ``` ## Theme Context Always wrap your application in the `CherryThemeProvider` component. Ensure that your theme prop is passed down correctly. For server-rendered apps that need flash-free dark mode, use `ClientThemeProvider` instead - see [Dark Mode](/code/dark-mode). ```tsx import { CherryThemeProvider, theme } from "cherry-styled-components"; export default function App({ children }) { return {children}; } ``` ## Next.js Integration When integrating into a Next.js app, first install the dependencies: Next, enable the styled-components compiler in your `next.config.ts`. This keeps class names deterministic between server and client renders and avoids hydration mismatches:



To render the CSS, open your `layout.tsx` and wrap your application. The `StyledComponentsRegistry` component injects the server-rendered styles into the HTML via `useServerInsertedHTML`, so styled-components work with server-side rendering and the App Router.

It is the one export that depends on Next, so it ships from the `cherry-styled-components/next` subpath rather than the package root. Everything else imports from `cherry-styled-components` as usual:

) {
    return (
      
        
          
            {children}
          
        
      
    );
  }`} />


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