Develop

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.