# Cherry Design System ## Design ### Getting Started - [Introduction](https://cherry.al/): Cherry is a design system for the modern web. Designed in Figma, built in React using TypeScript and Styled Components. - [Figma](https://cherry.al/figma): Get started with the Cherry Design System Figma template and plugin for extracting design tokens. ### Foundations - [Colors](https://cherry.al/colors): Cherry's curated color palette with 18 predefined colors for light and dark themes. - [Typography](https://cherry.al/typography): Cherry's responsive typography system with definitions for desktop and mobile breakpoints. - [Shadows](https://cherry.al/shadows): Cherry's shadow elevation system with five levels for light and dark modes. - [Icons](https://cherry.al/icons): Cherry uses the Lucide icon set - over 1,500 consistent, open-source icons available in every component. ### Components - [Buttons](https://cherry.al/buttons): Cherry button design specifications with three variations, sizes, outline variants, icon buttons, and all interactive states. - [Inputs](https://cherry.al/inputs): Cherry input design specifications covering text fields, password fields, checkboxes, radios, toggles, range sliders, and dropzones. - [Accordions](https://cherry.al/accordions): Cherry accordion design specifications with card and inline variants. - [Tabs](https://cherry.al/tabs): Cherry tabs design specifications with tab states and panel styling. - [Overlays](https://cherry.al/overlays): Cherry overlay design specifications for modals and toast notifications. ### Resources - [Site Images](https://cherry.al/site-images): Icons and thumbnail specifications for favicons, Apple Touch Icons, Google Manifest Icons, and social images. ## Code ### Getting Started - [Overview](https://cherry.al/code): Get started with Cherry's React components built with Styled Components and TypeScript. - [Installation](https://cherry.al/code/installation): Install Cherry Styled Components via npm or by cloning the repository. - [Skill for AI Agents](https://cherry.al/code/skill-for-ai-agents): Teach Claude and other coding agents to build with Cherry correctly using the official Agent Skill. - [Changelog](https://cherry.al/code/changelog): Release notes for every cherry-styled-components version. ### Configuration - [Theme](https://cherry.al/code/theme): The Cherry theme object defines media queries, spacing, colors, font sizes, line heights, and shadows. - [Dark Mode](https://cherry.al/code/dark-mode): Enable dark mode in Cherry with automatic detection, manual toggle support, and flash-free server-side rendering. - [Global Styles](https://cherry.al/code/global-styles): Cherry's global CSS reset and base styles for consistent rendering across browsers. ### Components - [Button](https://cherry.al/code/button): Cherry Button component - primary, secondary, and tertiary variants, sizes, and outline mode. - [IconButton](https://cherry.al/code/icon-button): Cherry IconButton component - a circular icon-only button with three sizes, an error variant, and an active toggle state. - [Input](https://cherry.al/code/input): Cherry Input component - text fields, checkboxes, and radio buttons with validation states. - [Textarea](https://cherry.al/code/textarea): Cherry Textarea component - multiline text input with validation states. - [Select](https://cherry.al/code/select): Cherry Select component - dropdown menus with validation states. - [Password](https://cherry.al/code/password): Cherry Password component - a password input with a built-in show/hide reveal toggle. - [Toggle](https://cherry.al/code/toggle): Cherry Toggle component - a stylish checkbox/radio alternative with validation states. - [Range](https://cherry.al/code/range): Cherry Range component - validation states and label support. - [Dropzone](https://cherry.al/code/dropzone): Cherry Dropzone component - a file input drop target with drag & drop, validation, and preview thumbnails. - [AvatarDropzone](https://cherry.al/code/avatar-dropzone): Cherry AvatarDropzone component - a circular single-file dropzone for profile pictures in three sizes. - [Modal](https://cherry.al/code/modal): Cherry Modal component - an animated dialog rendered in a portal with Escape and outside-click dismissal. - [Toast](https://cherry.al/code/toast): Cherry Toast component - provider, hook, and animated toast stack with semantic colors and auto-hide. - [Accordion](https://cherry.al/code/accordion): Cherry Accordion component - animated disclosure with a card style and an inline variant. - [Tabs](https://cherry.al/code/tabs): Cherry Tabs component - accessible tabbed panels with keyboard navigation and controlled or uncontrolled selection. - [Icon](https://cherry.al/code/icon): Cherry Icon component - renders any Lucide icon by name with color, size, and accessibility control. - [ThemeToggle](https://cherry.al/code/theme-toggle): Cherry ThemeToggle component - a pill-shaped sun and moon switch for light and dark mode. ### Layout - [Container](https://cherry.al/code/container): Cherry Container component - fluid width, text alignment, and responsive padding. - [Box](https://cherry.al/code/box): Cherry Box component - extends Container with additional visual styling for tiles and card layouts. - [MaxWidth](https://cherry.al/code/max-width): Cherry MaxWidth component - constrains content width with responsive breakpoints. - [Flex](https://cherry.al/code/flex): Cherry Flex component - responsive flexbox layouts with gap and alignment control. - [Grid](https://cherry.al/code/grid): Cherry Grid component - responsive CSS grid layouts. - [Col](https://cherry.al/code/col): Cherry Col component - responsive column spans within Grid layouts. - [Space](https://cherry.al/code/space): Cherry Space component - responsive vertical and horizontal spacing between elements. ### Utilities - [Mixins](https://cherry.al/code/mixins): Cherry's reusable CSS mixins: interaction affordances, resets, and form element helpers. - [Typography](https://cherry.al/code/typography): Cherry typography helpers - CSS mixins for every text style in the type scale. - [Hooks](https://cherry.al/code/hooks): Cherry utility hooks - useOnClickOutside for dismissing menus, popovers, and other floating UI.