# freeCodeCamp Design: Command-line Chic > Design guidance and copyable React + TypeScript components with ordinary CSS. Read the relevant component document before adapting it. Each document contains source, shared dependencies, styles, an example, and copy destinations. No freeCodeCamp SDK is required. Preserve semantics and keyboard behavior; check the result in the consuming project. ## Start here - [Style guide](https://design.freecodecamp.org/handbook.md): Brand, typography, color, layout, and interaction guidance. - [Setup](https://design.freecodecamp.org/registry/starter.md): Theme, fonts, and how to copy components. - [Manifest](https://design.freecodecamp.org/registry/index.json): Source file URLs, destinations, and dependencies. ## Components - [Alert](https://design.freecodecamp.org/components/alert.md): Full-width status surface for page-level state - saved, failed, queued. - [Auth layout](https://design.freecodecamp.org/components/auth-layout.md): Centered card on a tile-pattern backdrop - sign-in, sign-up, password reset. - [Avatar](https://design.freecodecamp.org/components/avatar.md): User mark - image, initials fallback, optional online/away status dot. - [Badge](https://design.freecodecamp.org/components/badge.md): Inline status chip - sparingly. Max 2 per row. - [Breadcrumb](https://design.freecodecamp.org/components/breadcrumb.md): Hierarchical trail with the current page marked via aria-current. - [Button](https://design.freecodecamp.org/components/button.md): The workhorse. 3px square border, inverted fill on primary, no shadow. - [Callout](https://design.freecodecamp.org/components/callout.md): Inline sidebar for curriculum notes, tips, and cautions. - [Card](https://design.freecodecamp.org/components/card.md): Flat bordered container. Grid-friendly. No shadow, no hover lift. - [Checkbox](https://design.freecodecamp.org/components/checkbox.md): Flat, square, accent-filled checkmark. - [Close button](https://design.freecodecamp.org/components/close-button.md): Inline dismiss affordance - modals, alerts, drawers. - [Combobox](https://design.freecodecamp.org/components/combobox.md): Typeahead select. Filters as you type. - [Command palette](https://design.freecodecamp.org/components/command-palette.md): ⌘K spotlight - global commands, grouped, keyboard-shortcut hinted. - [Data table](https://design.freecodecamp.org/components/data-table.md): Sortable, selectable, paginated table - header sort buttons, optional row select. - [Description list](https://design.freecodecamp.org/components/description-list.md): Term + detail metadata pair - stacked or inline layout. - [Divider](https://design.freecodecamp.org/components/divider.md): Hairline rule. Solid or dashed; horizontal or vertical. - [Dropdown](https://design.freecodecamp.org/components/dropdown.md): Menu anchored to a trigger - overflow actions, filters, sort. - [Empty state](https://design.freecodecamp.org/components/empty-state.md): No-data placeholder with title, description, and a primary action. - [Fieldset](https://design.freecodecamp.org/components/fieldset.md): Groups related controls under a legend - required for radio groups. - [Form control](https://design.freecodecamp.org/components/form-control.md): Low-level text control - no label wrapper, for custom layouts. - [Form group](https://design.freecodecamp.org/components/form-group.md): Groups a label, control, and help text with consistent spacing. - [Form stepper](https://design.freecodecamp.org/components/form-stepper.md): Multi-step form progress - keyboard navigable. - [Heading](https://design.freecodecamp.org/components/heading.md): Headline primitive - independent of HTML level. Five visual sizes; tag chosen for outline. - [Help block](https://design.freecodecamp.org/components/help-block.md): Field-level guidance - neutral, success, or error tone. - [Hotspots](https://design.freecodecamp.org/components/hotspots.md): Clickable regions overlaid on a background image or diagram. Quiz mode with target, feedback, and hints. - [Image](https://design.freecodecamp.org/components/image.md): Responsive image wrapper with built-in aspect caption and alt enforcement. - [Input](https://design.freecodecamp.org/components/input.md): Text input with a built-in label, helper text, and error slot. - [Link](https://design.freecodecamp.org/components/link.md): Inline links carry the highlight accent and thicken on hover. - [Listbox](https://design.freecodecamp.org/components/listbox.md): Persistent selection list - keyboard navigable, single or multi-select. - [Modal](https://design.freecodecamp.org/components/modal.md): Blocking dialog - confirmations and short-form destructive choices. - [Navbar](https://design.freecodecamp.org/components/navbar.md): Top app bar - three-zone (start / center / end), theme-flat, no shadow. - [Pagination](https://design.freecodecamp.org/components/pagination.md): Page selector - Ark UI pagination machine, keyboard navigable. - [Panel](https://design.freecodecamp.org/components/panel.md): Borderless surface-two container - sidebars, inspectors, nested regions. - [Radio](https://design.freecodecamp.org/components/radio.md): Mutually exclusive choice - group with `name` or `radio-group`. - [Select](https://design.freecodecamp.org/components/select.md): Native select wrapper - square chevron, matching height with Input. - [Sidebar](https://design.freecodecamp.org/components/sidebar.md): Left rail - sections + items, optional collapsible groups. - [Sidebar layout](https://design.freecodecamp.org/components/sidebar-layout.md): Header + left rail + main - the curriculum chrome shape. - [Skeleton](https://design.freecodecamp.org/components/skeleton.md): Placeholder bars during data fetch - reduced-motion aware shimmer. - [Spacer](https://design.freecodecamp.org/components/spacer.md): Explicit whitespace on an 8-step scale. - [Stacked layout](https://design.freecodecamp.org/components/stacked-layout.md): Header + main + footer - the marketing/news chrome shape. - [Switch](https://design.freecodecamp.org/components/switch.md): For settings that take effect immediately - theme, audio, keybinds. - [Table](https://design.freecodecamp.org/components/table.md): Rule-heavy, square, mono-numeric - for progress and diagnostic data. - [Tabs](https://design.freecodecamp.org/components/tabs.md): Inverted-fill selected state, matches the platform editor panel. - [Text](https://design.freecodecamp.org/components/text.md): Body-text primitive - semantic-tag agnostic, size + weight + tone variants. - [Textarea](https://design.freecodecamp.org/components/textarea.md): Multi-line text control with mono variant for code snippets. - [Tile matcher](https://design.freecodecamp.org/components/tile-matcher.md): Data-driven memory / matching game for interactive curricula. Flip to reveal, match pairs, fire callbacks. - [Toast](https://design.freecodecamp.org/components/toast.md): Transient status surface - Ark UI toaster machine, reduced-motion aware. - [Toggle button](https://design.freecodecamp.org/components/toggle-button.md): For stateful binary choices - hours pressed, unit selected, dark mode on. - [Tooltip](https://design.freecodecamp.org/components/tooltip.md): Contextual hint on hover or focus - keep to 80 chars. ## Shared source - [Theme](https://design.freecodecamp.org/registry/theme.md): Design tokens (colors, type, spacing, motion) + shared base helpers. Every component depends on this. Dark by default; add .light-palette to opt into light mode. - [Icons](https://design.freecodecamp.org/registry/icons.md): Curated Lucide subset: Icon React component + icon map. Copy Icon.tsx and a subset of icons.ts, or grab raw SVGs per icon. - [useAsyncComboboxItems](https://design.freecodecamp.org/registry/use-async-combobox-items.md): Debounced + cancellable async item loading for the Combobox component. - [HotspotShapes](https://design.freecodecamp.org/registry/hotspot-shapes.md): Shape helpers (rect, circle, polygon) for the Hotspots game component. ## Website - [Overview](https://design.freecodecamp.org/): Introduction to the system. - [Style guide](https://design.freecodecamp.org/handbook): Human-readable guide and brand downloads. - [Playground](https://design.freecodecamp.org/playground): Interactive previews and source copying.