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

Components

• 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 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.
• Textarea - Multiline text input for longer messages.
• Toggle - Simplify binary choices.

Cherry Helpers

• Global Styles - Consistency across your app. Define global rules here.
• Icons - Basic icons for elements like checkbox 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.