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 install cherry-styled-components styled-componentsComponents
Accordion
Show and hide content behind a clickable, animated title.
AvatarDropzone
Circular single-file dropzone for profile pictures.
Button
The gateway to interaction. Various styles and states.
Dropzone
File drop target with drag & drop, validation, and previews.
Icon
Render any Lucide icon by name.
IconButton
Circular icon-only button for compact actions.
Input
Text fields, checkboxes, radio buttons - everything input-related.
Modal
Animated dialog with Escape and outside-click dismissal.
Password
Password input with a built-in show/hide reveal toggle.
Range
Sliders for numeric input.
Select
Dropdown menus for options.
Tabs
Accessible tabbed panels with keyboard navigation.
Textarea
Multiline text input for longer messages.
ThemeToggle
Pill-shaped sun/moon switch for light and dark mode.
Toast
Transient notifications with semantic colors and auto-hide.
Toggle
Simplify binary choices.
Layout
Box
The versatile container for layout, spacing, or as a wrapper.
Col
Create responsive column layouts with ease.
Container
A container for your content.
Flex
Arrange items horizontally or vertically.
Grid
Build grids effortlessly using CSS grid.
MaxWidth
Control the maximum width of your content.
Space
Responsive vertical or horizontal spacing between elements.
Cherry Helpers
Global Styles
Consistency across your app. Define global rules here.
Hooks
Utility hooks like useOnClickOutside for floating UI.
Mixins
Reusable code snippets. Efficiency meets elegance.
Theme
Define spacings, colors, typography, and more.
Icons
Basic icons for elements like checkbox and dropdown arrow.
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.
- ClientThemeProvider - SSR-aware theme provider for flash-free dark mode.
- themeInitScript / createThemeInitScript - Blocking head script that prevents the dark-mode flash.
- resolveTheme - Resolve the
themecookie to a theme object in server code. - ThemeContext - Access
setThemeandtoggleThemefor custom theme controls.