Every component in the Cherry Design System is meticulously crafted using React and Styled Components. These building blocks empower you to create delightful user interfaces.

npm i cherry-styled-components

Let’s dive into the essentials:

  • Box: The versatile container that adapts to your needs. Use it for layout, spacing, or as a wrapper.
  • Button: The gateway to interaction. Choose from various styles and states.
  • Container: A container for your content.
  • Flex: Flexibility at its best. Arrange items horizontally or vertically.
  • Grid: Build grids effortlessly using the CSS grid.
  • Col: Create responsive column layouts with ease.
  • Input: Text fields, checkboxes, radio buttons—everything input-related.
  • MaxWidth: Control the maximum width of your content.
  • Range: Sliders for numeric input.
  • Select: Dropdown menus for options galore.
  • Textarea: Multiline text input for longer messages.
  • Toggle: Toggles simplify binary choices.

Cherry Helpers

  • Global Styles: Consistency across your app. Define global rules here.
  • Icons: Basic icons for elements like chebox and dropdown arrow.
  • Mixins: Reusable code snippets. Efficiency meets elegance.
  • Theme: Set the tone for your entire application. Define spacings, colors, typography, and more.
  • Typography: Text matters. Set font styles and sizes effortlessly.

Styled Components Helpers

  • StyledComponentsRegistry: Renders CSS in your Next.js app.
  • CherryThemeProvider: Wrap your app with the Cherry Theme context.
InstallationGet started with development.