# Cherry Design System > Documentation for Cherry Design System. Every page link below points to a markdown mirror; drop the .md suffix for the HTML version. Full corpus in one file: https://cherry.al/llms-full.txt Agent skill: https://cherry.al/skill.md MCP server (streamable HTTP; tools: search_docs, get_doc, list_docs): https://cherry.al/api/mcp ## Design ### Getting Started - [Introduction](https://cherry.al/index.md): 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.md): Get started with the Cherry Design System Figma template and plugin for extracting design tokens. ### Foundations - [Colors](https://cherry.al/colors.md): Cherry's curated color palette with 18 predefined colors for light and dark themes. - [Typography](https://cherry.al/typography.md): Cherry's responsive typography system with definitions for desktop and mobile breakpoints. - [Shadows](https://cherry.al/shadows.md): Cherry's shadow elevation system with five levels for light and dark modes. - [Icons](https://cherry.al/icons.md): Cherry uses the Lucide icon set - over 1,500 consistent, open-source icons available in every component. ### Components - [Buttons](https://cherry.al/buttons.md): Cherry button design specifications with three variations, sizes, outline variants, icon buttons, and all interactive states. - [Inputs](https://cherry.al/inputs.md): Cherry input design specifications covering text fields, password fields, checkboxes, radios, toggles, range sliders, and dropzones. - [Accordions](https://cherry.al/accordions.md): Cherry accordion design specifications with card and inline variants. - [Tabs](https://cherry.al/tabs.md): Cherry tabs design specifications with tab states and panel styling. - [Overlays](https://cherry.al/overlays.md): Cherry overlay design specifications for modals and toast notifications. ### Resources - [Site Images](https://cherry.al/site-images.md): Icons and thumbnail specifications for the favicon, Apple Touch Icons, Google Manifest Icons, and social images. ## Code ### Getting Started - [Overview](https://cherry.al/code.md): Get started with Cherry's React components built with Styled Components and TypeScript. - [Installation](https://cherry.al/code/installation.md): Install Cherry Styled Components via npm or by cloning the repository. - [Skill for AI Agents](https://cherry.al/code/skill-for-ai-agents.md): Teach Claude and other coding agents to build with Cherry correctly using the official Agent Skill. - [Changelog](https://cherry.al/code/changelog.md): Release notes for every cherry-styled-components version. ### Configuration - [Theme](https://cherry.al/code/theme.md): The Cherry theme object defines media queries, spacing, colors, font sizes, line heights, and shadows. - [Dark Mode](https://cherry.al/code/dark-mode.md): 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.md): Cherry's global CSS reset and base styles for consistent rendering across browsers. ### Components - [Button](https://cherry.al/code/button.md): Cherry Button component - primary, secondary, and tertiary variants, sizes, and outline mode. - [IconButton](https://cherry.al/code/icon-button.md): 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.md): Cherry Input component - text fields, checkboxes, and radio buttons with validation states. - [Textarea](https://cherry.al/code/textarea.md): Cherry Textarea component - multiline text input with validation states. - [Select](https://cherry.al/code/select.md): Cherry Select component - dropdown menus with validation states. - [Password](https://cherry.al/code/password.md): Cherry Password component - a password input with a built-in show/hide reveal toggle. - [Toggle](https://cherry.al/code/toggle.md): Cherry Toggle component - a stylish checkbox/radio alternative with validation states. - [Range](https://cherry.al/code/range.md): Cherry Range component - validation states and label support. - [Dropzone](https://cherry.al/code/dropzone.md): Cherry Dropzone component - a file input drop target with drag & drop, validation, and preview thumbnails. - [AvatarDropzone](https://cherry.al/code/avatar-dropzone.md): Cherry AvatarDropzone component - a circular single-file dropzone for profile pictures in three sizes. - [Modal](https://cherry.al/code/modal.md): Cherry Modal component - an animated dialog rendered in a portal with Escape and outside-click dismissal. - [Toast](https://cherry.al/code/toast.md): Cherry Toast component - provider, hook, and animated toast stack with semantic colors and auto-hide. - [Accordion](https://cherry.al/code/accordion.md): Cherry Accordion component - animated disclosure with a card style and an inline variant. - [Tabs](https://cherry.al/code/tabs.md): Cherry Tabs component - accessible tabbed panels with keyboard navigation and controlled or uncontrolled selection. - [Icon](https://cherry.al/code/icon.md): Cherry Icon component - renders an imported Lucide glyph with color, size, and accessibility control, plus DynamicIcon for names chosen at runtime. - [ThemeToggle](https://cherry.al/code/theme-toggle.md): Cherry ThemeToggle component - a pill-shaped sun and moon switch for light and dark mode. - [Avatar](https://cherry.al/code/avatar.md): Cherry Avatar component - a circular identity badge with image, initials, and icon fallbacks in three sizes. - [Callout](https://cherry.al/code/callout.md): Cherry Callout component - tinted admonition boxes with five semantic intents and automatic icons. - [Prose](https://cherry.al/code/prose.md): Cherry Prose component - typography for rendered markdown: headings, links, lists, tables, code, and media. - [Spinner](https://cherry.al/code/spinner.md): Cherry Spinner component - a rotating loading indicator built on the Icon component with theme-aware color. ### Chat - [Chat Kit](https://cherry.al/code/chat.md): Cherry's chat kit - a headless ChatProvider plus panel, messages, composer, and launcher for building AI-assistant UIs. - [ChatPanel](https://cherry.al/code/chat-panel.md): Cherry ChatPanel component - the chat shell as a side drawer, inline container, or fullscreen dialog, with full focus management. - [Chat Messages](https://cherry.al/code/chat-messages.md): Cherry chat transcript components - ChatMessageList, ChatMessage, ChatTyping, and ChatSources. - [ChatInput](https://cherry.al/code/chat-input.md): Cherry ChatInput component - the auto-growing chat composer with an optional animated rainbow glow. - [ChatLauncher](https://cherry.al/code/chat-launcher.md): Cherry ChatLauncher component - the compact Ask AI pill that toggles the chat panel, with an optional rainbow halo. ### Layout - [Container](https://cherry.al/code/container.md): Cherry Container component - fluid width, text alignment, and responsive padding. - [Box](https://cherry.al/code/box.md): Cherry Box component - extends Container with additional visual styling for tiles and card layouts. - [MaxWidth](https://cherry.al/code/max-width.md): Cherry MaxWidth component - constrains content width with responsive breakpoints. - [Flex](https://cherry.al/code/flex.md): Cherry Flex component - responsive flexbox layouts with gap and alignment control. - [Grid](https://cherry.al/code/grid.md): Cherry Grid component - responsive CSS grid layouts. - [Col](https://cherry.al/code/col.md): Cherry Col component - responsive column spans within Grid layouts. - [Space](https://cherry.al/code/space.md): Cherry Space component - responsive vertical and horizontal spacing between elements. ### Utilities - [Mixins](https://cherry.al/code/mixins.md): Cherry's reusable CSS mixins: interaction affordances, resets, and form element helpers. - [Typography](https://cherry.al/code/typography.md): Cherry typography helpers - CSS mixins for every text style in the type scale. - [Hooks](https://cherry.al/code/hooks.md): Cherry utility hooks - useOnClickOutside, useMediaQuery, useBelowBreakpoint, and useLockBodyScroll.