import { Text } from './ui/text/Text';

<Text size="lg">Large body - section ledes and emphasis.</Text>
<Text>Default body - eighteen pixels minimum.</Text>
<Text size="sm" tone="muted">Caption - annotations, metadata, footnotes.</Text>

import { Heading } from './ui/heading/Heading';

<Heading level={1} size="display">Command-line Chic.</Heading>
<Heading level={2} size="xl">Ship interfaces.</Heading>
<Heading level={3} size="lg">Composable primitives.</Heading>
<Heading level={4} size="md">Flat surfaces.</Heading>
<Heading level={5} size="sm">Square corners.</Heading>

import { Badge } from './ui/badge/Badge';

<Badge>Default</Badge>
<Badge variant="success">Passed</Badge>
<Badge variant="warning">In review</Badge>
<Badge variant="danger">Failed</Badge>

import { Avatar } from './ui/avatar/Avatar';

<Avatar size="sm" initials="RW" />
<Avatar size="md" initials="QC" status="online" />
<Avatar size="lg" src="/u/quincy.jpg" alt="Quincy Larson" status="away" />

import { Divider } from './ui/divider/Divider';

<Divider />
<Divider variant="dashed" />
<Divider orientation="vertical" />

import { Spacer } from './ui/spacer/Spacer';

<div style={{ display: 'flex' }}>
  <span>start</span>
  <Spacer size={6} />
  <span>end</span>
</div>

import { Link } from './ui/link/Link';

<p>Explore the <Link href="#tokens">token layer</Link> to recolor every component.</p>

import { Image } from './ui/image/Image';

<Image src="/brand/fcc-secondary.svg" alt="freeCodeCamp mark" caption="freeCodeCamp mark" />

import { Button } from './ui/button/Button';

export function Actions() {
  return (
    <div style={{ display: 'flex', gap: 12 }}>
      <Button variant="cta">Start curriculum</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="danger">Dangerous</Button>
      <Button variant="ghost">Ghost</Button>
    </div>
  );
}

import { useState } from 'react';
import { ToggleButton } from './ui/toggle-button/ToggleButton';
export function Pressed() {
  const [on, setOn] = useState(false);
  return (
    <ToggleButton pressed={on} onPressedChange={setOn}>
      {on ? 'On' : 'Off'}
    </ToggleButton>
  );
}

import { CloseButton } from './ui/close-button/CloseButton';

<CloseButton onClick={onDismiss} aria-label="Dismiss" />

import { FormGroup } from './ui/form-group/FormGroup';
import { Input } from './ui/input/Input';
import { HelpBlock } from './ui/help-block/HelpBlock';

<FormGroup>
  <label htmlFor="email">Email address</label>
  <Input id="email" type="email" placeholder="camper@example.com" />
  <HelpBlock>We send one curriculum update per week.</HelpBlock>
</FormGroup>

import { Textarea } from './ui/textarea/Textarea';

<Textarea
  id="bio"
  rows={3}
  placeholder="What are you learning right now?"
/>

import { Select } from './ui/select/Select';

<Select id="difficulty" defaultValue="intermediate">
  <option value="beginner">Beginner</option>
  <option value="intermediate">Intermediate</option>
  <option value="advanced">Advanced</option>
</Select>

import { Checkbox } from './ui/checkbox/Checkbox';

<Checkbox defaultChecked label="I accept the honor code" />
<Checkbox label="Email me certificate alerts" />

import { Radio, RadioGroup } from './ui/radio/Radio';

<RadioGroup name="theme" defaultValue="dark" label="Theme">
  <Radio value="dark" label="Dark - default" />
  <Radio value="light" label="Light" />
  <Radio value="system" label="System" />
</RadioGroup>

import { Switch } from './ui/switch/Switch';

<Switch defaultChecked label="Keyboard shortcuts" />
<Switch label="Sound effects" />

import { Fieldset } from './ui/fieldset/Fieldset';
import { RadioGroup, Radio } from './ui/radio/Radio';

<Fieldset legend="Notification cadence">
  <RadioGroup name="cadence" defaultValue="weekly">
    <Radio value="weekly" label="Weekly digest" />
    <Radio value="per-cert" label="Per-cert" />
    <Radio value="never" label="Never" />
  </RadioGroup>
</Fieldset>

import { FormControl } from './ui/form-control/FormControl';

<FormControl placeholder="Search the curriculum" />

import { FormGroup } from './ui/form-group/FormGroup';
import { Input } from './ui/input/Input';
import { HelpBlock } from './ui/help-block/HelpBlock';

<FormGroup>
  <label htmlFor="username">Username</label>
  <Input id="username" defaultValue="camper-42" />
  <HelpBlock>Letters, numbers, and dashes. Public.</HelpBlock>
</FormGroup>

import { HelpBlock } from './ui/help-block/HelpBlock';

<HelpBlock>We send one curriculum update per week.</HelpBlock>
<HelpBlock variant="success">Username available.</HelpBlock>
<HelpBlock variant="error">Username already in use.</HelpBlock>

import { FormStepper } from './ui/form-stepper/FormStepper';
import { useState } from 'react';

const STEPS = [
  { id: 'account',  label: 'Account',  description: 'Email + handle' },
  { id: 'goals',    label: 'Goals',    description: 'What to learn first' },
  { id: 'confirm',  label: 'Confirm',  description: 'Review + start' }
];

const [current, setCurrent] = useState('account');

<FormStepper steps={STEPS} current={current} onStepChange={setCurrent} />

import { Navbar } from './ui/navbar/Navbar';
import { Button } from './ui/button/Button';
import { Link } from './ui/link/Link';

<Navbar
  start={<strong>freeCodeCamp</strong>}
  center={
    <>
      <Link href="/learn">Curriculum</Link>
      <Link href="/forum">Forum</Link>
      <Link href="/news">News</Link>
    </>
  }
  end={<Button variant="cta">Sign in</Button>}
/>

import { Sidebar } from './ui/sidebar/Sidebar';

<Sidebar
  sections={[
    { id: 'primitives', label: 'Primitives', items: [
      { id: 'text', label: 'Text', href: '#text' },
      { id: 'button', label: 'Button', href: '#button', current: true }
    ]}
  ]}
/>

import { Tabs, Tab } from './ui/tabs/Tabs';

<Tabs defaultActiveKey="instructions">
  <Tab eventKey="instructions" title="Instructions">...</Tab>
  <Tab eventKey="tests" title="Tests">...</Tab>
  <Tab eventKey="console" title="Console">...</Tab>
</Tabs>

import { Pagination } from './ui/pagination/Pagination';

<Pagination
  count={120}
  pageSize={10}
  page={2}
  onPageChange={(page) => setPage(page)}
/>

import { Listbox } from './ui/listbox/Listbox';
import { useState } from 'react';

const ITEMS = [
  { value: 'frontend', label: 'Frontend' },
  { value: 'backend',  label: 'Backend' }
];

const [value, setValue] = useState<string | string[]>('frontend');

<Listbox items={ITEMS} value={value} onValueChange={setValue} />

import { Combobox, filterItemsByLabel } from './ui/combobox/Combobox';
import { useMemo, useState } from 'react';

const ALL = [
  { value: 'rwd', label: 'Responsive Web Design' },
  { value: 'js',  label: 'JavaScript Algorithms' }
];

const [query, setQuery] = useState('');
const [value, setValue] = useState<string | null>(null);
const items = useMemo(() => filterItemsByLabel(ALL, query), [query]);

<Combobox
  inputValue={query}
  onInputValueChange={setQuery}
  value={value}
  onValueChange={setValue}
  items={items}
  placeholder='Pick a certification'
/>

import { CommandPalette } from './ui/command-palette/CommandPalette';

const GROUPS = [
  { label: 'Navigation', items: [
    { id: 'curriculum', label: 'Go to curriculum', shortcut: 'G C' }
  ]}
];

<CommandPalette
  open={open}
  onClose={() => setOpen(false)}
  onSelect={id => navigate(id)}
  groups={GROUPS}
  placeholder='Type a command or search…'
/>

import { Breadcrumb } from './ui/breadcrumb/Breadcrumb';

<Breadcrumb>
  <Breadcrumb.Item href="/">Docs</Breadcrumb.Item>
  <Breadcrumb.Item href="/#navigation">Navigation</Breadcrumb.Item>
  <Breadcrumb.Item active>Breadcrumb</Breadcrumb.Item>
</Breadcrumb>

import { Modal } from './ui/modal/Modal';
import { Button } from './ui/button/Button';

<Modal open={open} onClose={close} title="Reset progress?">
  <Modal.Body>
    You completed 17 of 32 steps in Responsive Web Design.
  </Modal.Body>
  <Modal.Footer>
    <Button onClick={close}>Cancel</Button>
    <Button variant="danger" onClick={reset}>Reset progress</Button>
  </Modal.Footer>
</Modal>

import { Dropdown } from './ui/dropdown/Dropdown';

<Dropdown>
  <Dropdown.Toggle>Sort</Dropdown.Toggle>
  <Dropdown.Menu>
    <Dropdown.Item>Most recent</Dropdown.Item>
    <Dropdown.Item active>Alphabetical</Dropdown.Item>
    <Dropdown.Item>Hardest first</Dropdown.Item>
  </Dropdown.Menu>
</Dropdown>

import { Tooltip } from './ui/tooltip/Tooltip';
import { Button } from './ui/button/Button';

<Tooltip content="Runs the public test suite against your code.">
  <Button>Run tests</Button>
</Tooltip>

import { Toast, Toaster, createToaster } from './ui/toast/Toast';

// 1) Static - render Toast directly (the showcase variant).
<Toast variant='success' title='Saved' description='Synced.' />

// 2) Dynamic - drive a stack via createToaster + <Toaster>.
const toaster = createToaster({});

<Toaster toaster={toaster} />
toaster.create({ title: 'Saved', type: 'success' });

import { Alert } from './ui/alert/Alert';

<Alert variant="success">All 28 tests pass. Next challenge unlocked.</Alert>
<Alert variant="warning">You have one unsaved edit.</Alert>
<Alert variant="danger">Sign-in failed - check your email address.</Alert>

import { Callout } from './ui/callout/Callout';

<Callout variant="tip" label="Tip">
  Open the editor fullscreen with <kbd>F11</kbd>.
</Callout>

import { Skeleton } from './ui/skeleton/Skeleton';

<Skeleton variant="circle" size={48} />
<Skeleton variant="text" width="80%" />
<Skeleton variant="text" width="60%" />

import { EmptyState } from './ui/empty-state/EmptyState';
import { Button } from './ui/button/Button';

<EmptyState
  title="No certifications yet"
  description="Pick a track and complete five projects."
  action={<Button variant="cta">Browse curriculum →</Button>}
/>

import { Card } from './ui/card/Card';
import { Link } from './ui/link/Link';

<Card>
  <Card.Header>
    <span className="card__dot card__dot--purple" aria-hidden="true" />
    <p className="card__hours">300 HOURS</p>
  </Card.Header>
  <Card.Title>Responsive Web Design</Card.Title>
  <Card.Body>Build five certification projects...</Card.Body>
  <div className="progress">
    <div className="progress__bar progress__bar--purple" style={{ width: '62%' }} />
  </div>
  <Card.Footer>
    <span>62% complete</span>
    <Link href="/learn/rwd">Resume →</Link>
  </Card.Footer>
</Card>

import { Panel } from './ui/panel/Panel';

<Panel title="Editor hints">
  Your code runs against the first test each time you save.
</Panel>

import { Table } from './ui/table/Table';
import { Badge } from './ui/badge/Badge';

<Table>
  <thead>
    <tr><th>Certification</th><th>Projects</th><th>Status</th></tr>
  </thead>
  <tbody>
    <tr><td>Responsive Web Design</td><td>5 / 5</td><td><Badge variant="success">Passed</Badge></td></tr>
  </tbody>
</Table>

import { DataTable } from './ui/data-table/DataTable';
import { useState } from 'react';

const [sortBy, setSortBy] = useState({ columnId: 'cert', direction: 'asc' });

<DataTable
  columns={[
    { id: 'cert', header: 'Cert', sortable: true },
    { id: 'hours', header: 'Hours', align: 'right' },
    { id: 'status', header: 'Status', align: 'center' }
  ]}
  rows={rows}
  sortBy={sortBy}
  onSortChange={setSortBy}
/>

import { DescriptionList } from './ui/description-list/DescriptionList';

<DescriptionList
  items={[
    { term: 'Username', detail: 'camper-42' },
    { term: 'Joined', detail: '2014-04-12' },
    { term: 'Certifications', detail: '3 of 14' }
  ]}
/>