Geist Design System

https://vercel.com/geist
Admin
Geist is Vercel's design system for building consistent web experiences with components, colors,...
Tokens:101,850
Snippets:785
Trust Score:10
Update:2 months ago
Show doc for...
Tokens:
Raw
### Create Next.js App

Source: https://vercel.com/geist

Use this command to start a new Next.js project, which can then be integrated with the Geist Design System.

```bash
npx create-next-app
```

--------------------------------

### Default Command Menu Example

Source: https://vercel.com/geist/command-menu

Launches a command menu with predefined suggestions and commands. Use this for a standard command palette interface.

```tsx
import {
  CommandMenu,
  Button,
  CommandMenuInput,
  CommandMenuList,
  CommandMenuGroup,
  CommandMenuItem,
} from '@vercel/geistcn/components';
import { useState, type JSX } from 'react';

export function Component(): JSX.Element {
  const [open, setOpen] = useState(false);

  function callback(): void {
    // no op
  }

  return (
    <>
      <Button onClick={() => setOpen(true)}>Open Command Menu</Button>
      <CommandMenu open={open} setOpen={setOpen}>
        <CommandMenuInput placeholder="What do you need?" />
        <CommandMenuList>
          <CommandMenuGroup heading="Suggestions">
            <CommandMenuItem callback={callback}>Figma Import</CommandMenuItem>
          </CommandMenuGroup>
          <CommandMenuGroup heading="Commands">
            <CommandMenuItem callback={callback}>
              Import Extension
            </CommandMenuItem>
            <CommandMenuItem callback={callback}>
              Manage Extensions
            </CommandMenuItem>
          </CommandMenuGroup>
          <CommandMenuGroup heading="Collaboration">
            <CommandMenuItem callback={callback}>
              Flags Explorer
            </CommandMenuItem>
          </CommandMenuGroup>
        </CommandMenuList>
      </CommandMenu>
    </>
  );
}
```

--------------------------------

### Default Banner Example

Source: https://vercel.com/geist/banner

A basic example of the Banner component with a title, message, and a call-to-action button. Ensure you have the necessary imports from '@vercel/geistcn/components'.

```tsx
import { Banner } from '@vercel/geistcn/components';
import type { JSX } from 'react';

export function Component(): JSX.Element {
  return (
    <Banner button={{ href: '#', content: 'Read more' }} className="p-4">
      <b>Big News</b> – New components finally available
    </Banner>
  );
}
```

--------------------------------

### Displaying a Success Toast

Source: https://vercel.com/geist/toast

This example demonstrates how to display a success toast message. Ensure `Button` and `useToasts` are imported from '@vercel/geistcn/components'.

```tsx
import { Button, useToasts } from '@vercel/geistcn/components';
import type { JSX } from 'react';

export function Component(): JSX.Element {
  const toasts = useToasts();

  return (
    <Button
      onClick={(): void => {
        toasts.success('The Evil Rabbit jumped over the fence.');
      }}
    >
      Show Toast
    </Button>
  );
}
```

--------------------------------

### Responsive Grid with Guide Clipping

Source: https://vercel.com/geist/grid

Illustrates a responsive grid with guide clipping enabled on specific cells. This allows for more granular control over cell positioning and spanning across breakpoints.

```tsx
import { Grid, GridSystem, GridCell } from '@vercel/geistcn/components';
import type { JSX } from 'react';

export function Component(): JSX.Element {
  return (
    <GridSystem unstable_useContainer>
      <Grid columns={{ sm: 1, md: 2, lg: 3 }} rows={{ sm: 6, md: 3, lg: 2 }}>
        <GridCell
          column={{ sm: '1', md: '1/3' }}
          row={{ sm: '1/3', md: 1 }}
          solid
        >
          1 + 2
        </GridCell>
        <GridCell>3</GridCell>
        <GridCell>4</GridCell>
        <GridCell
          column={{ sm: 1, md: '1/3', lg: '2/4' }}
          row={{ sm: '5/7', md: 3, lg: 2 }}
          solid
        >
          5 + 6
        </GridCell>
      </Grid>
    </GridSystem>
  );
}
```

--------------------------------

### Grid with Guide Clipping

Source: https://vercel.com/geist/grid

Demonstrates how to enable guide clipping on specific cells within a Grid component. Use this for precise cell alignment and visual guides.

```tsx
import { Grid, GridSystem, GridCell } from '@vercel/geistcn/components';
import type { JSX } from 'react';

export function Component(): JSX.Element {
  return (
    <GridSystem guideWidth={1} unstable_useContainer>
      <Grid columns={3} rows={4}>
        <GridCell column="1/2" row="1/3" solid>
          1
        </GridCell>
        <GridCell column="3/4" row="1/2" solid>
          2
        </GridCell>
        <GridCell column="2/3" row="2/4">
          3
        </GridCell>
        <GridCell column="1/2" row="4/5" solid>
          4
        </GridCell>
        <GridCell column="3/4" row="3/5" solid>
          5
        </GridCell>
      </Grid>
    </GridSystem>
  );
}
```

--------------------------------

### Command Menu with Divider Example

Source: https://vercel.com/geist/command-menu

Demonstrates a command menu with a divider to visually separate groups of items. Useful for distinguishing distinct sections within the menu.

```tsx
import {
  Button,
  CommandMenu,
  CommandMenuDivider,
  CommandMenuGroup,
  CommandMenuInput,
  CommandMenuItem,
  CommandMenuList,
} from '@vercel/geistcn/components';
import { useState, type JSX } from 'react';

export function Component(): JSX.Element {
  const [open, setOpen] = useState(false);

  function callback(): void {
    // no op
  }

  return (
    <>
      <Button onClick={() => setOpen(true)}>Open Command Menu</Button>
      <CommandMenu open={open} setOpen={setOpen}>
        <CommandMenuInput placeholder="What do you need?" />
        <CommandMenuList>
          <CommandMenuItem callback={callback}>Item 1</CommandMenuItem>
          <CommandMenuItem callback={callback}>Item 2</CommandMenuItem>
          <CommandMenuDivider />
          <CommandMenuItem callback={callback}>Item 3</CommandMenuItem>
          <CommandMenuGroup heading="Group 1">
            <CommandMenuItem callback={callback}>
              Grouped Item 1
            </CommandMenuItem>
            <CommandMenuItem callback={callback}>
              Grouped Item 2
            </CommandMenuItem>
          </CommandMenuGroup>
        </CommandMenuList>
      </CommandMenu>
    </>
  );
}
```

--------------------------------

### Default Collapse Example

Source: https://vercel.com/geist/collapse

Demonstrates the default behavior of the Collapse component, where all sections are initially closed. Import Collapse and CollapseGroup from '@vercel/geistcn/components'.

```tsx
import { Collapse, CollapseGroup } from '@vercel/geistcn/components';
import type { JSX } from 'react';

export function Component(): JSX.Element {
  return (
    <CollapseGroup>
      <Collapse title="Question A">
        <p className="text-copy-16 mb-4">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat.
        </p>
      </Collapse>
      <Collapse title="Question B">
        <p className="text-copy-16 mb-4">
          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
          dolore eu fugiat nulla pariatur.
        </p>
      </Collapse>
    </CollapseGroup>
  );
}
```

--------------------------------

### Expanded Collapse Example

Source: https://vercel.com/geist/collapse

Shows how to have a Collapse section expanded by default using the 'defaultExpanded' prop. This is useful when initial content needs to be visible. Import Collapse and CollapseGroup from '@vercel/geistcn/components'.

```tsx
import { Collapse, CollapseGroup } from '@vercel/geistcn/components';
import type { JSX } from 'react';

export function Component(): JSX.Element {
  return (
    <CollapseGroup>
      <Collapse title="Question A">
        <p className="text-copy-16 mb-4">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat.
        </p>
      </Collapse>
      <Collapse defaultExpanded title="Question B">
        <p className="text-copy-16 mb-4">
          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
          dolore eu fugiat nulla pariatur.
        </p>
      </Collapse>
    </CollapseGroup>
  );
}
```

--------------------------------

### Command Menu with Suffixes

Source: https://vercel.com/geist/command-menu

This example demonstrates how to use the Command Menu component with different types of suffixes, including text and icons, within menu items. It requires importing necessary components from '@vercel/geistcn/components' and '@vercel/geistcn-assets/icons'.

```tsx
import {
  Button,
  CommandMenu,
  CommandMenuGroup,
  CommandMenuInput,
  CommandMenuItem,
  CommandMenuList,
} from '@vercel/geistcn/components';
import { IconCheckCircle } from '@vercel/geistcn-assets/icons';
import { useState, type JSX } from 'react';

export function Component(): JSX.Element {
  const [open, setOpen] = useState(false);

  function callback(): void {
    // no op
  }

  return (
    <>
      <Button onClick={() => setOpen(true)}>Open Command Menu</Button>
      <CommandMenu open={open} setOpen={setOpen}>
        <CommandMenuInput placeholder="What do you need?" />
        <CommandMenuList>
          <CommandMenuGroup heading="Group 1">
            <CommandMenuItem
              callback={callback}
              suffix={<p className="text-copy-14 text-gray-700">USA</p>}
            >
              United States of America
            </CommandMenuItem>
            <CommandMenuItem
              callback={callback}
              suffix={<p className="text-copy-14 text-gray-700">ESP</p>}
            >
              Spain
            </CommandMenuItem>
            <CommandMenuItem
              callback={callback}
              suffix={<p className="text-copy-14 text-gray-700">FRA</p>}
            >
              France
            </CommandMenuItem>
          </CommandMenuGroup>
          <CommandMenuGroup heading="Group 2">
            <CommandMenuItem
              callback={callback}
              suffix={<p className="text-copy-14 text-gray-700">AUT</p>}
            >
              Austria
            </CommandMenuItem>
            <CommandMenuItem
              callback={callback}
              suffix={<IconCheckCircle color="gray-700" />}
            >
              Switzerland
            </CommandMenuItem>
            <CommandMenuItem
              callback={callback}
              suffix={<p className="text-copy-14 text-gray-700">GER</p>}
            >
              Germany
            </CommandMenuItem>
          </CommandMenuGroup>
        </CommandMenuList>
      </CommandMenu>
    </>
  );
}
```

--------------------------------

### Bordered Table Example

Source: https://vercel.com/geist/table

Renders a table with visible borders around cells and rows. Import necessary components from '@vercel/geistcn/components'.

```tsx
import {
  Table,
  TableHeader,
  TableRow,
  TableHead,
  TableBody,
  TableCell,
  TableRoot,
} from '@vercel/geistcn/components';
import type { JSX } from 'react';

export function Component(): JSX.Element {
  return (
    <TableRoot>
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>Col 1</TableHead>
            <TableHead>Col 2</TableHead>
            <TableHead>Col 3</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody bordered>
          <TableRow>
            <TableCell>Value 1.1</TableCell>
            <TableCell>Value 1.2</TableCell>
            <TableCell>Value 1.3</TableCell>
          </TableRow>
          <TableRow>
            <TableCell>Value 2.1</TableCell>
            <TableCell>Value 2.2</TableCell>
            <TableCell>Value 2.3</TableCell>
          </TableRow>
          <TableRow>
            <TableCell>Value 3.1</TableCell>
            <TableCell>Value 3.2</TableCell>
            <TableCell>Value 3.3</TableCell>
          </TableRow>
        </TableBody>
      </Table>
    </TableRoot>
  );
}
```

--------------------------------

### Language Switcher with Tabs Example

Source: https://vercel.com/geist/code-block

This example demonstrates a language switcher using tabs. It includes JavaScript, TypeScript, and Lua code snippets, managed by React state.

```tsx
import { CodeBlock } from '@vercel/geistcn/components';
import { useState, type JSX } from 'react';

const code = `function MyComponent(props) {
	return (
	  <div>
		<h1>Hello, {props.name}!</h1>
		<p>Good to see you</p>
	  </div>
	);
  }`;

const codeTs = `function MyComponent(props: Props) {
	return (
	  <div>
		<h1>Hello, {props.name}!</h1>
		<p>Good to see you</p>
	  </div>
	);
  }`;

const codeLua = `local b64 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'
local decode_table = ffi.new 'uint8_t[256]'
for i = 1, #b64 do
  decode_table[str_byte(b64, i)] = i - 1 -- Base64 values start from 0
end

function BloomFilter:has(key)
  local ptr = self.ptr -- uint8_t* pointer to start of base64 string
  for byte_offset, bit_offset in self:iterator(key) do
    local sextet = decode_table[ptr[byte_offset]]
    if band(sextet, lshift(1, bit_offset)) == 0 then
      return false
    end
  end
  return true
end`;

const languages = [
  {
    label: 'JavaScript',
    value: 'js',
  },
  {
    label: 'TypeScript',
    value: 'ts',
  },
  {
    label: 'Next.js',
    value: 'next',
  },
  {
    label: 'Lua',
    value: 'lua',
  },
];

export function Component(): JSX.Element {
  const [language, setLanguage] = useState('js');

  if (language === 'ts') {
    return (
      <CodeBlock
        aria-label="Hello world"
        filename="language-switcher.tsx"
        language="tsx"
        tabs={{
          options: languages,
          value: language,
          onChange: (l) => setLanguage(l),
        }}
      >
        {codeTs}
      </CodeBlock>
    );
  }

  if (language === 'next') {
    return (
      <CodeBlock
        aria-label="Hello world"
        filename="language-switcher.tsx"
        language="next"
        tabs={{
          options: languages,
          value: language,
          onChange: (l) => setLanguage(l),
        }}
      >
        {codeTs}
      </CodeBlock>
    );
  }

  if (language === 'lua') {
    return (
      <CodeBlock
        aria-label="Hello world"
        filename="bloom-filter.lua"
        language="lua"
        tabs={{
          options: languages,
          value: language,
          onChange: (l) => setLanguage(l),
        }}
      >
        {codeLua}
      </CodeBlock>
    );
  }

  return (
    <CodeBlock
      aria-label="Hello world"
      filename="language-switcher.jsx"
      language="jsx"
      tabs={{
        options: languages,
        value: language,
        onChange: (l) => setLanguage(l),
      }}
    >
      {code}
    </CodeBlock>
  );
}

```

```javascript
function MyComponent(props) {
	return (
	  <div>
		<h1>Hello, {props.name}!</h1>
		<p>Good to see you</p>
	  </div>
	);
  }
```

```typescript
function MyComponent(props: Props) {
	return (
	  <div>
		<h1>Hello, {props.name}!</h1>
		<p>Good to see you</p>
	  </div>
	);
  }
```

```lua
local b64 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'
local decode_table = ffi.new 'uint8_t[256]'
for i = 1, #b64 do
  decode_table[str_byte(b64, i)] = i - 1 -- Base64 values start from 0
end

function BloomFilter:has(key)
  local ptr = self.ptr -- uint8_t* pointer to start of base64 string
  for byte_offset, bit_offset in self:iterator(key) do
    local sextet = decode_table[ptr[byte_offset]]
    if band(sextet, lshift(1, bit_offset)) == 0 then
      return false
    end
  end
  return true
end
```

--------------------------------

### Interactive Table Example

Source: https://vercel.com/geist/table

Creates an interactive table where rows might respond to user interactions. Ensure all required components are imported from '@vercel/geistcn/components'.

```tsx
import {
  Table,
  TableHeader,
  TableRow,
  TableHead,
  TableBody,
  TableCell,
  TableRoot,
} from '@vercel/geistcn/components';
import type { JSX } from 'react';

export function Component(): JSX.Element {
  return (
    <TableRoot>
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>Col 1</TableHead>
            <TableHead>Col 2</TableHead>
            <TableHead>Col 3</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody interactive>
          <TableRow>
            <TableCell>Value 1.1</TableCell>
            <TableCell>Value 1.2</TableCell>
            <TableCell>Value 1.3</TableCell>
          </TableRow>
          <TableRow>
            <TableCell>Value 2.1</TableCell>
            <TableCell>Value 2.2</TableCell>
            <TableCell>Value 2.3</TableCell>
          </TableRow>
          <TableRow>
            <TableCell>Value 3.1</TableCell>
            <TableCell>Value 3.2</TableCell>
            <TableCell>Value 3.3</TableCell>
          </TableRow>
        </TableBody>
      </Table>
    </TableRoot>
  );
}
```

--------------------------------

### CodeBlock with 'v0' Prop for Open in v0 Action

Source: https://vercel.com/geist/code-block

This example shows how to use the 'v0' prop on the CodeBlock component to add an 'Open in v0' action to the toolbar. This feature allows users to interact with the code in the v0 environment.

```tsx
import { CodeBlock } from '@vercel/geistcn/components';
import type { JSX } from 'react';

const code = `function MyComponent(props) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>This is an example React component.</p>
    </div>
  );
}`;

export function Component(): JSX.Element {
  return (
    <div className="flex flex-col gap-4">
      <CodeBlock
        aria-label="Hello world"
        filename="Table.jsx"
        language="jsx"
        v0="ask"
      >
        {code}
      </CodeBlock>
      <CodeBlock
        aria-label="Hello world"
        filename="Table.jsx"
        language="jsx"
        v0="build"
      >
        {code}
      </CodeBlock>
    </div>
  );
}
```

--------------------------------

### Default Radio Group Example

Source: https://vercel.com/geist/radio

Demonstrates the basic usage of the RadioGroup and RadioGroupItem components. Use this for standard single-choice selections.

```tsx
import { RadioGroup, RadioGroupItem } from '@vercel/geistcn/components';
import { useState, type JSX } from 'react';

export function Component(): JSX.Element {
  const [value, setValue] = useState('one');

  return (
    <RadioGroup label="Default Radio Example" onChange={setValue} value={value}>
      <div className="flex flex-col items-stretch justify-start gap-6 flex-initial">
        <RadioGroupItem value="one">Option 1</RadioGroupItem>
        <RadioGroupItem value="two">Option 2</RadioGroupItem>
      </div>
    </RadioGroup>
  );
}

```

--------------------------------

### Gauge Component: With Labels

Source: https://vercel.com/geist/gauge

Shows how to display the percentage value directly on the Gauge component using the `showValue` prop. Includes examples with different sizes and values, including a full 100%.

```tsx
import { Gauge } from '@vercel/geistcn/components';
import type { JSX } from 'react';

export function Component(): JSX.Element {
  return (
    <div className="flex flex-row items-stretch justify-start gap-8 flex-initial">
      <Gauge showValue size="tiny" value={80} />
      <Gauge showValue size="small" value={80} />
      <Gauge showValue size="small" value={100} />
      <Gauge showValue size="medium" value={80} />
      <Gauge showValue size="medium" value={100} />
      <Gauge showValue size="large" value={80} />
      <Gauge showValue size="large" value={100} />
    </div>
  );
}
```

--------------------------------

### Implement MiddleTruncate with dynamic width control

Source: https://vercel.com/geist/middle-truncate

This example demonstrates how to use the MiddleTruncate component with various string types and provides an interactive slider to adjust the container width, showing how the truncation reacts to space constraints.

```tsx
'use client';
import { Label } from '@vercel/geistcn/components';
import { Toggle } from '@vercel/geistcn/components';
import { MiddleTruncate, Slider } from '@vercel/geistcn/components';
import {
  useEffect,
  useRef,
  useState,
  type CSSProperties,
  type JSX,
} from 'react';

interface ExampleItem {
  className: string;
  label: string;
  style?: CSSProperties;
  value: string;
}

const EXAMPLES: ExampleItem[] = [
  {
    className: 'text-label-14',
    label: 'Branch',
    value: 'feature/redesign-dashboard-navigation-with-sidebar-improvements',
  },
  {
    className: 'text-copy-14',
    label: 'Preview URL',
    value:
      'platform-web-git-feature-redesign-dashboard-navigation-phamous.vercel.app',
  },
  {
    className: 'text-label-14',
    label: 'Deployment ID',
    value: 'dpl_8gmXTT1yJRP8UbGfXD7A3sp4RKhW',
  },
  {
    className: 'text-label-14 font-mono',
    label: 'Env var key',
    value: 'STRIPE_WEBHOOK_SIGNING_SECRET',
  },
  {
    className: 'text-label-14 font-mono',
    label: 'Monospace no ligatures',
    style: {
      fontFeatureSettings: '"liga" 0, "calt" 0',
      fontVariantLigatures: 'none',
    },
    value: 'STRIPE_WEBHOOK_SIGNING_SECRET',
  },
  {
    className: 'text-copy-14',
    label: 'Commit SHA',
    value: '2b0874e797d7c2a4092d0033ee0c2f0f9aef2869',
  },
  {
    className: 'text-copy-14',
    label: 'File path',
    value:
      'apps/vercel-site/app/(dashboard)/[teamSlug]/[project]/settings/page.tsx',
  },
  {
    className: 'text-copy-14',
    label: 'Custom domain',
    value: 'api.internal.platform-observability.example.com',
  },
  {
    className: 'text-label-14',
    label: 'Model name',
    value: 'google/gemini-3.1-flash-image-preview',
  },
  {
    className: 'text-label-14',
    label: 'Tight width',
    value: 'feature/redesign-dashboard-navigation-with-sidebar-improvements',
  },
  {
    className: 'text-label-14',
    label: 'Fits as-is',
    value: 'sidebar.tsx',
  },
];

const MAX_WIDTH = 600;

export function Component(): JSX.Element {
  const [width, setWidth] = useState(MAX_WIDTH);
  const [isAnimating, setIsAnimating] = useState(false);
  const rafRef = useRef<number>(0);

  useEffect(() => {
    if (!isAnimating) return;

    const duration = 4000;
    let start: number | null = null;

    function step(timestamp: number): void {
      if (start === null) start = timestamp;
      const elapsed = timestamp - start;
      const progress = (elapsed % duration) / duration;
      // Ping-pong: 0→1→0→1…
      const t = progress < 0.5 ? progress * 2 : 2 - progress * 2;
      setWidth(Math.round(t * MAX_WIDTH));
      rafRef.current = requestAnimationFrame(step);
    }

    rafRef.current = requestAnimationFrame(step);
    return () => cancelAnimationFrame(rafRef.current);
  }, [isAnimating]);

  return (
    <div className="flex flex-col gap-6">
      <div className="flex flex-col gap-3">
        {EXAMPLES.map((example) => (
          <div
            className="flex items-center gap-4 rounded-md border border-gray-alpha-400 px-4 py-3"
            key={example.label}
          >
            <div className="basis-32 shrink-0 text-label-13 text-gray-700">
              {example.label}
            </div>
            <div style={{ maxWidth: width }}>
              <div className="min-w-0 basis-0 grow">
                <MiddleTruncate
                  className={example.className}
                  style={example.style}
                  value={example.value}
                />
              </div>
            </div>
          </div>
        ))}
      </div>

      <aside>
        <form className="flex gap-1 items-center">
          <Label value="Width">
            <div className="flex items-center gap-2">
              <Slider
                max={MAX_WIDTH}
                min={0}
                value={[width]}
                onValueChange={(value) => setWidth((value as number[])[0] ?? 0)}
                disabled={isAnimating}
              />

              <p className="font-mono text-copy-13 text-gray-900">{width}px</p>
            </div>
          </Label>
        </form>

        <Toggle
          checked={isAnimating}
          onChange={(): void => setIsAnimating(!isAnimating)}
        >
          Animate
        </Toggle>
      </aside>
    </div>
  );
}
```

--------------------------------

### ShowMore Component - Expanded State

Source: https://vercel.com/geist/show-more

Shows how to render the ShowMore component in an expanded state by default. No specific setup is required beyond importing the component.

```tsx
import { ShowMore } from '@vercel/geistcn/components';
import type { JSX } from 'react';

export function Component(): JSX.Element {
  return <ShowMore expanded />;
}
```

--------------------------------

### Full Featured Table Example

Source: https://vercel.com/geist/table

This snippet demonstrates how to use the Vercel Geist UI Table component to render a comprehensive table with custom data, including product information, usage, price, and formatted currency charges. It utilizes various sub-components like TableRoot, Table, TableColgroup, TableCol, TableHeader, TableRow, TableHead, TableBody, TableCell, and TableFooter.

```tsx
import {
  Table,
  TableColgroup,
  TableCol,
  TableHeader,
  TableRow,
  TableHead,
  TableBody,
  TableCell,
  TableFooter,
  TableRoot,
} from '@vercel/geistcn/components';
import type { JSX } from 'react';

const formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  maximumFractionDigits: 2,
  currency: 'usd',
});

function formatCurrency(amount: number): string {
  return formatter.format(amount);
}

const items = [
  {
    product: 'Brake Pads Set',
    usage: '100 sets',
    price: '$50 per set',
    charge: 5000,
  },
  {
    product: 'Oil Filters',
    usage: '200 filters',
    price: '$10 per filter',
    charge: 2000,
  },
  {
    product: 'Car Batteries',
    usage: '50 batteries',
    price: '$100 per battery',
    charge: 5000,
  },
  {
    product: 'Headlight Bulbs',
    usage: '300 bulbs',
    price: '$15 per bulb',
    charge: 4500,
  },
  {
    product: 'Windshield Wipers',
    usage: '250 pairs',
    price: '$20 per pair',
    charge: 5000,
  },
  {
    product: 'Spark Plugs',
    usage: '500 sets',
    price: '$5 per set',
    charge: 2500,
  },
];

export function Component(): JSX.Element {
  return (
    <TableRoot>
      <Table>
        <TableColgroup>
          <TableCol className="w-[44%]" />
          <TableCol className="w-[22%]" />
          <TableCol className="w-[22%]" />
          <TableCol className="w-[11%]" />
        </TableColgroup>
        <TableHeader>
          <TableRow>
            <TableHead>Product</TableHead>
            <TableHead>Usage</TableHead>
            <TableHead>Price</TableHead>
            <TableHead>Charge</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody interactive striped>
          {items.map((item) => (
            <TableRow key={item.product}>
              <TableCell>{item.product}</TableCell>
              <TableCell>{item.usage}</TableCell>
              <TableCell>{item.price}</TableCell>
              <TableCell>{formatCurrency(item.charge)}</TableCell>
            </TableRow>
          ))}
        </TableBody>
        <TableFooter>
          <TableRow>
            <TableCell className="text-gray-1000 font-medium" colSpan={3}>
              Subtotal
            </TableCell>
            <TableCell className="text-gray-1000 font-medium">
              {formatCurrency(items.reduce((sum, val) => sum + val.charge, 0))}
            </TableCell>
          </TableRow>
        </TableFooter>
      </Table>
    </TableRoot>
  );
}

```

--------------------------------

### Initialize a Next.js project

Source: https://vercel.com/geist/geistcn-icons

Use this command to scaffold a new Next.js application.

```bash
npx create-next-app
```

--------------------------------

### Implement Select with options

Source: https://vercel.com/geist/select

Demonstrates basic usage of the Select component with static options and setting a default value.

```tsx
import { Select } from '@vercel/geistcn/components';
import type { JSX } from 'react';

export function Component(): JSX.Element {
  return (
    <div className="flex flex-col md:flex-row gap-4 items-start">
      <div>
        <Select aria-label="Fruit" placeholder="Select a fruit">
          <option value="apple">Apple</option>
          <option value="orange">Orange</option>
          <option value="banana">Banana</option>
          <option value="grape">Grape</option>
        </Select>
      </div>
      <div>
        <Select
          aria-label="Fruit with default value"
          defaultValue="banana"
          placeholder="With default value"
        >
          <option value="apple">Apple</option>
          <option value="orange">Orange</option>
          <option value="banana">Banana</option>
          <option value="grape">Grape</option>
        </Select>
      </div>
    </div>
  );
}
```

--------------------------------

### Dashed Grid with GridPage

Source: https://vercel.com/geist/grid

Renders a GridPage with a GridSystem that has dashed guides and a specified guide width. This is useful for creating detailed two-dimensional layouts.

```tsx
import {
  Grid,
  GridCell,
  GridCross,
  GridPage,
  GridSystem,
} from '@vercel/geistcn/components';
import type { JSX } from 'react';

export function Component(): JSX.Element {
  return (
    <GridPage>
      <GridSystem dashedGuides guideWidth={1}>
        <Grid columns={1} rows={1}>
          <GridCross column={1} row={1} />
          <GridCross column={2} row={2} />
          <GridCross column={2} row={1} />
          <GridCross column={1} row={2} />
          <GridCell>Content here</GridCell>
        </Grid>
      </GridSystem>
    </GridPage>
  );
}
```

--------------------------------

### Grid with Hidden Column Guides

Source: https://vercel.com/geist/grid

Configure the Grid component to hide its column guides. This is useful for cleaner layouts where column indicators are not needed.

```tsx
import { Grid, GridSystem } from '@vercel/geistcn/components';
import type { JSX } from 'react';

export function Component(): JSX.Element {
  return (
    <GridSystem unstable_useContainer>
      <Grid
        columns={12}
        height="preserve-aspect-ratio"
        hideGuides="column"
        rows={3}
      />
    </GridSystem>
  );
}
```

--------------------------------

### Implement Menu with Sections and Dividers

Source: https://vercel.com/geist/menu

Shows how to organize menu items into sections, include dividers, and use locked items for permission-gated actions.

```tsx
import {
  Menu,
  MenuButton,
  MenuContainer,
  MenuDivider,
  MenuItem,
  MenuItemLocked,
  MenuSection,
} from '@vercel/geistcn/components';
import type { JSX } from 'react';

export function Component(): JSX.Element {
  return (
    <MenuContainer>
      <MenuButton>Actions</MenuButton>
      <Menu width={200}>
        <MenuSection title="Section">
          <MenuItem onClick={() => undefined}>One</MenuItem>
          <MenuItem onClick={() => undefined}>Two</MenuItem>
        </MenuSection>
        <MenuItem onClick={() => undefined}>Three</MenuItem>
        <MenuItemLocked onClick={() => undefined}>Locked</MenuItemLocked>
        <MenuDivider />
        <MenuItem onClick={() => undefined} type="error">
          Delete
        </MenuItem>
      </Menu>
    </MenuContainer>
  );
}
```

--------------------------------

### Grid with Hidden Row Guides

Source: https://vercel.com/geist/grid

Configure the Grid component to hide its row guides. This is useful for cleaner layouts where row indicators are not needed.

```tsx
import { Grid, GridSystem } from '@vercel/geistcn/components';
import type { JSX } from 'react';

export function Component(): JSX.Element {
  return (
    <GridSystem unstable_useContainer>
      <Grid
        columns={12}
        height="preserve-aspect-ratio"
        hideGuides="row"
        rows={3}
      />
    </GridSystem>
  );
}
```

--------------------------------

### RadioGroup Headless Example

Source: https://vercel.com/geist/radio

Use the RadioGroup component without RadioGroup.Item for custom UI integration. This example demonstrates how to manage radio options manually.

```tsx
import { RadioGroup, useRadio } from '@vercel/geistcn/components';
import { useState, type JSX } from 'react';

export function Component(): JSX.Element {
  const [value, setValue] = useState('one');
  const { component } = useRadio({ value: 'one', disabled: false });
  const { component: component2 } = useRadio({ value: 'two', disabled: false });

  return (
    <RadioGroup aria-label="Options" onChange={setValue} value={value}>
      <div className="flex flex-col items-stretch justify-start gap-6 flex-initial">
        <label
          style={{
            display: 'flex',
            justifyContent: 'space-between',
          }}>
          <span>Option 1</span>
          {component}
        </label>

        <label
          style={{
            display: 'flex',
            justifyContent: 'space-between',
          }}>
          <span>Option 2</span>
          {component2}
        </label>
      </div>
    </RadioGroup>
  );
}
```

--------------------------------

### Standalone Radio Input Example

Source: https://vercel.com/geist/radio

Use a standalone Radio input for custom UI elements where a full RadioGroup is not needed. This example shows how to integrate a single radio button.

```tsx
import { Radio } from '@vercel/geistcn/components';
import { useState, type JSX } from 'react';

export function Component(): JSX.Element {
  const [value, setValue] = useState('one');

  return (
    <li className="flex flex-row items-stretch justify-start gap-2 flex-initial list-none">
      <span>Option 1</span>
      <Radio
        aria-label="Option 1"
        checked={value === 'one'}
        onChange={() => setValue('one')}
        value="one"
      />
    </li>
  );
}
```

--------------------------------

### Configure Select component sizes

Source: https://vercel.com/geist/select

Demonstrates the use of the 'size' prop to toggle between small, default, and large Select variants.

```tsx
import { Select } from '@vercel/geistcn/components';
import type { JSX } from 'react';

export function Component(): JSX.Element {
  return (
    <div className="flex relative min-w-px max-w-full flex-col sm:flex-row sm:flex-wrap flex-1">
      <div className="flex relative min-w-px max-w-full flex-col items-start flex-1">
        {/* eslint-disable-next-line rulesdir/prefer-radio-for-few-static-options */}
        <Select aria-label="Small" placeholder="Small" size="small">
          <option>Option 1</option>
          <option>Option 2</option>
          <option>Option 3</option>
        </Select>
      </div>

      <div className="flex relative min-w-px max-w-full flex-col items-start flex-1">
        {/* eslint-disable-next-line rulesdir/prefer-radio-for-few-static-options */}
        <Select aria-label="Default" placeholder="Default">
          <option>Option 1</option>
          <option>Option 2</option>
          <option>Option 3</option>
        </Select>
      </div>

      <div className="flex relative min-w-px max-w-full flex-col items-start flex-1">
        {/* eslint-disable-next-line rulesdir/prefer-radio-for-few-static-options */}
        <Select aria-label="Large" placeholder="Large" size="large">
          <option>Option 1</option>
          <option>Option 2</option>
          <option>Option 3</option>
        </Select>
      </div>
    </div>
  );
}
```

--------------------------------

### Implement Feedback with Prefix Icon

Source: https://vercel.com/geist/feedback

Adds a custom icon to the start of the feedback trigger.

```tsx
import { Feedback } from '@vercel/geistcn/components';
import { IconFlagPriority } from '@vercel/geistcn-assets/icons';
import type { JSX } from 'react';

export function Component(): JSX.Element {
  return <Feedback dryRun label="vercel" prefix={<IconFlagPriority />} />;
}
```

--------------------------------

### Basic Table Implementation

Source: https://vercel.com/geist/table

Renders a standard HTML table with headers and data cells. Import necessary components from '@vercel/geistcn/components'.

```tsx
import {
  Table,
  TableHeader,
  TableRow,
  TableHead,
  TableBody,
  TableCell,
  TableRoot,
} from '@vercel/geistcn/components';
import type { JSX } from 'react';

export function Component(): JSX.Element {
  return (
    <TableRoot>
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>Col 1</TableHead>
            <TableHead>Col 2</TableHead>
            <TableHead>Col 3</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          <TableRow>
            <TableCell>Value 1.1</TableCell>
            <TableCell>Value 1.2</TableCell>
            <TableCell>Value 1.3</TableCell>
          </TableRow>
          <TableRow>
            <TableCell>Value 2.1</TableCell>
            <TableCell>Value 2.2</TableCell>
            <TableCell>Value 2.3</TableCell>
          </TableRow>
          <TableRow>
            <TableCell>Value 3.1</TableCell>
            <TableCell>Value 3.2</TableCell>
            <TableCell>Value 3.3</TableCell>
          </TableRow>
        </TableBody>
      </Table>
    </TableRoot>
  );
}
```

--------------------------------

### Modal Component Structure

Source: https://vercel.com/geist/modal

Example of a Modal component containing a scrollable body and action buttons for navigation and submission.

```jsx
## Sticky

            Some content contained within the modal.
          </p>
          <p className="text-copy-14">
            Some content contained within the modal.
          </p>
          <p className="text-copy-14">
            Some content contained within the modal.
          </p>
          <p className="text-copy-14">
            Some content contained within the modal.
          </p>
          <p className="text-copy-14">
            Some content contained within the modal.
          </p>
          <p className="text-copy-14">
            Some content contained within the modal.
          </p>
          <p className="text-copy-14">
            Some content contained within the modal.
          </p>
          <p className="text-copy-14">
            Some content contained within the modal.
          </p>
          <p className="text-copy-14">
            Some content contained within the modal.
          </p>
          <p className="text-copy-14">
            Some content contained within the modal.
          </p>
          <p className="text-copy-14">
            Some content contained within the modal.
          </p>
          <p className="text-copy-14">
            Some content contained within the modal.
          </p>
          <p className="text-copy-14">
            Some content contained within the modal.
          </p>
          <p className="text-copy-14">
            Some content contained within the modal.
          </p>
          <p className="text-copy-14">
            Some content contained within the modal.
          </p>
          <p className="text-copy-14">
            Some content contained within the modal.
          </p>
          <p className="text-copy-14">
            Some content contained within the modal.
          </p>
          <p className="text-copy-14">
            Some content contained within the modal.
          </p>
          <p className="text-copy-14">
            Some content contained within the modal.
          </p>
          <p className="text-copy-14">
            Some content contained within the modal.
          </p>
          <p className="text-copy-14">
            Some content contained within the modal.
          </p>
          <p className="text-copy-14">
            Some content contained within the modal.
          </p>
          <p className="text-copy-14">
            Some content contained within the modal.
          </p>
          <p className="text-copy-14">
            Some content contained within the modal.
          </p>
        </ModalBody>

        <ModalActions>
          <div>
            <ModalAction onClick={() => setOpen(false)} variant="secondary">
              Cancel
            </ModalAction>
            <ModalAction
              onClick={() => setOpen(false)}
              prefix={<IconArrowLeft />}
              variant="secondary"
            >
              Previous
            </ModalAction>
          </div>

          <ModalAction onClick={() => setOpen(false)}>Submit</ModalAction>
        </ModalActions>
      </Modal>
    </>
  );
}
```
Tokens:
Raw