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.
Avatar
Circular identity badge with image, initials, and icon fallbacks.
AvatarDropzone
Circular single-file dropzone for profile pictures.
Button
The gateway to interaction. Various styles and states.
Callout
Tinted admonition boxes with five semantic intents.
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.
Prose
Cherry typography for rendered markdown and long-form content.
Range
Sliders for numeric input.
Select
Dropdown menus for options.
Spinner
Rotating loading indicator with theme-aware color.
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.
Chat Kit
Everything needed to build an AI-assistant chat UI: a headless provider that owns the transcript and streaming bookkeeping, plus presentational components. You bring the transport.
Chat Kit & ChatProvider
Architecture, the provider, the useChat hook, and showcase mode.
ChatPanel
The shell: side drawer, inline container, or fullscreen dialog.
Chat Messages
Transcript list, message bubbles, typing indicator, source chips.
ChatInput
Auto-growing composer with an optional rainbow glow.
ChatLauncher
The "Ask AI" pill that toggles the panel.
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
useOnClickOutside, useMediaQuery, useBelowBreakpoint, and useLockBodyScroll.
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. Imported from
cherry-styled-components/next. - 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.