# Overview

> Get started with Cherry's React components built with Styled Components and TypeScript.

Source: https://cherry.al/code

> For the complete documentation index, see [llms.txt](https://cherry.al/llms.txt).

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

<CodeTabs tabs={[{ label: "npm", code: "npm install cherry-styled-components styled-components" }, { label: "pnpm", code: "pnpm add cherry-styled-components styled-components" }, { label: "yarn", code: "yarn add cherry-styled-components styled-components" }]} />

## Components

<Columns cols={2}>
  <Card title="Accordion" icon="chevrons-up-down" href="/code/accordion">
    Show and hide content behind a clickable, animated title.
  </Card>
  <Card title="Avatar" icon="circle-user" href="/code/avatar">
    Circular identity badge with image, initials, and icon fallbacks.
  </Card>
  <Card title="AvatarDropzone" icon="circle-user-round" href="/code/avatar-dropzone">
    Circular single-file dropzone for profile pictures.
  </Card>
  <Card title="Button" icon="mouse-pointer-click" href="/code/button">
    The gateway to interaction. Various styles and states.
  </Card>
  <Card title="Callout" icon="message-square-warning" href="/code/callout">
    Tinted admonition boxes with five semantic intents.
  </Card>
  <Card title="Dropzone" icon="upload" href="/code/dropzone">
    File drop target with drag & drop, validation, and previews.
  </Card>
  <Card title="Icon" icon="smile" href="/code/icon">
    Render any Lucide icon by name.
  </Card>
  <Card title="IconButton" icon="circle-plus" href="/code/icon-button">
    Circular icon-only button for compact actions.
  </Card>
  <Card title="Input" icon="text-cursor-input" href="/code/input">
    Text fields, checkboxes, radio buttons - everything input-related.
  </Card>
  <Card title="Modal" icon="app-window" href="/code/modal">
    Animated dialog with Escape and outside-click dismissal.
  </Card>
  <Card title="Password" icon="key-round" href="/code/password">
    Password input with a built-in show/hide reveal toggle.
  </Card>
  <Card title="Prose" icon="pilcrow" href="/code/prose">
    Cherry typography for rendered markdown and long-form content.
  </Card>
  <Card title="Range" icon="sliders-horizontal" href="/code/range">
    Sliders for numeric input.
  </Card>
  <Card title="Select" icon="chevron-down" href="/code/select">
    Dropdown menus for options.
  </Card>
  <Card title="Spinner" icon="loader-circle" href="/code/spinner">
    Rotating loading indicator with theme-aware color.
  </Card>
  <Card title="Tabs" icon="panels-top-left" href="/code/tabs">
    Accessible tabbed panels with keyboard navigation.
  </Card>
  <Card title="Textarea" icon="notebook-text" href="/code/textarea">
    Multiline text input for longer messages.
  </Card>
  <Card title="ThemeToggle" icon="sun-moon" href="/code/theme-toggle">
    Pill-shaped sun/moon switch for light and dark mode.
  </Card>
  <Card title="Toast" icon="bell" href="/code/toast">
    Transient notifications with semantic colors and auto-hide.
  </Card>
  <Card title="Toggle" icon="toggle-right" href="/code/toggle">
    Simplify binary choices.
  </Card>
</Columns>

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

<Columns cols={2}>
  <Card title="Chat Kit & ChatProvider" icon="bot-message-square" href="/code/chat">
    Architecture, the provider, the useChat hook, and showcase mode.
  </Card>
  <Card title="ChatPanel" icon="panel-right" href="/code/chat-panel">
    The shell: side drawer, inline container, or fullscreen dialog.
  </Card>
  <Card title="Chat Messages" icon="messages-square" href="/code/chat-messages">
    Transcript list, message bubbles, typing indicator, source chips.
  </Card>
  <Card title="ChatInput" icon="send" href="/code/chat-input">
    Auto-growing composer with an optional rainbow glow.
  </Card>
  <Card title="ChatLauncher" icon="sparkles" href="/code/chat-launcher">
    The "Ask AI" pill that toggles the panel.
  </Card>
</Columns>

## Layout

<Columns cols={2}>
  <Card title="Box" icon="box" href="/code/box">
    The versatile container for layout, spacing, or as a wrapper.
  </Card>
  <Card title="Col" icon="columns-3" href="/code/col">
    Create responsive column layouts with ease.
  </Card>
  <Card title="Container" icon="square" href="/code/container">
    A container for your content.
  </Card>
  <Card title="Flex" icon="stretch-horizontal" href="/code/flex">
    Arrange items horizontally or vertically.
  </Card>
  <Card title="Grid" icon="grid-3x3" href="/code/grid">
    Build grids effortlessly using CSS grid.
  </Card>
  <Card title="MaxWidth" icon="move-horizontal" href="/code/max-width">
    Control the maximum width of your content.
  </Card>
  <Card title="Space" icon="stretch-vertical" href="/code/space">
    Responsive vertical or horizontal spacing between elements.
  </Card>
</Columns>

## Cherry Helpers

<Columns cols={2}>
  <Card title="Global Styles" icon="globe" href="/code/global-styles">
    Consistency across your app. Define global rules here.
  </Card>
  <Card title="Hooks" icon="webhook" href="/code/hooks">
    `useOnClickOutside`, `useMediaQuery`, `useBelowBreakpoint`, and `useLockBodyScroll`.
  </Card>
  <Card title="Mixins" icon="blend" href="/code/mixins">
    Reusable code snippets. Efficiency meets elegance.
  </Card>
  <Card title="Theme" icon="paintbrush" href="/code/theme">
    Define spacings, colors, typography, and more.
  </Card>
  <Card title="Icons" icon="smile" href="/code/icon">
    Basic icons for elements like checkbox and dropdown arrow.
  </Card>
  <Card title="Typography" icon="type" href="/code/typography">
    Text matters. Set font styles and sizes effortlessly.
  </Card>
</Columns>

## Styled Components Helpers

- **[StyledComponentsRegistry](/code/installation)** - Renders CSS in your Next.js app. Imported from `cherry-styled-components/next`.
- **[CherryThemeProvider](/code/installation)** - Wrap your app with the Cherry Theme context.
- **[ClientThemeProvider](/code/dark-mode)** - SSR-aware theme provider for flash-free dark mode.
- **[themeInitScript / createThemeInitScript](/code/dark-mode)** - Blocking head script that prevents the dark-mode flash.
- **[resolveTheme](/code/dark-mode)** - Resolve the `theme` cookie to a theme object in server code.
- **[ThemeContext](/code/dark-mode)** - Access `setTheme` and `toggleTheme` for custom theme controls.

## Next Steps

<Columns cols={2}>
  <Card title="Live Demo" icon="play" href="https://demo.cherry.al/">
    See every component in one interactive playground.
  </Card>
  <Card title="Installation" icon="download" href="/code/installation">
    Get started with development.
  </Card>
  <Card title="Dark Mode" icon="moon" href="/code/dark-mode">
    Flash-free dark mode with SSR support.
  </Card>
  <Card title="Changelog" icon="history" href="/code/changelog">
    Release notes for every version.
  </Card>
</Columns>