llms.txt
# 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.
