> ## Documentation Index
> Fetch the complete documentation index at: https://react-docx.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Quick start

## Create a project

<Tabs>
  <Tab title="npm">
    ```bash theme={"dark"}
    npx create-docx@latest
    cd my-docx-project
    ```
  </Tab>

  <Tab title="pnpm">
    ```bash theme={"dark"}
    pnpm create docx@latest
    cd my-docx-project
    ```
  </Tab>

  <Tab title="yarn">
    ```bash theme={"dark"}
    yarn create docx@latest
    cd my-docx-project
    ```
  </Tab>

  <Tab title="bun">
    ```bash theme={"dark"}
    bun create docx@latest
    cd my-docx-project
    ```
  </Tab>
</Tabs>

## Generate a document

<Tabs>
  <Tab title="npm">
    ```bash theme={"dark"}
    npm run build
    ```
  </Tab>

  <Tab title="pnpm">
    ```bash theme={"dark"}
    pnpm build
    ```
  </Tab>

  <Tab title="yarn">
    ```bash theme={"dark"}
    yarn build
    ```
  </Tab>

  <Tab title="bun">
    ```bash theme={"dark"}
    bun run build
    ```
  </Tab>
</Tabs>

Opens `output.docx`.

***

## Project structure

```text theme={"dark"}
my-docx-project/
├── src/
│   └── document.tsx
├── package.json
└── tsconfig.json
```

`src/document.tsx` is your document:

```tsx theme={"dark"}
import { Document, Section, H1, Paragraph } from "@cordel/react-docx";

export const MyDocument = () => (
  <Document>
    <Section>
      <H1>Hello</H1>
      <Paragraph>First document.</Paragraph>
    </Section>
  </Document>
);
```

Every document needs a `Document` root and at least one `Section`.

***

## Styling

Tailwind classes work:

```tsx theme={"dark"}
<H1 className="text-blue-700">Blue heading</H1>

<Paragraph className="mt-4">
  <Text className="font-bold">Bold</Text>
  <Text className="italic">Italic</Text>
  <Text className="text-red-500">Red</Text>
</Paragraph>
```

***

## Tables

```tsx theme={"dark"}
import { Table, Thead, Tbody, Tr, Th, Td } from "@cordel/react-docx";

<Table className="border">
  <Thead>
    <Tr>
      <Th className="border p-2 bg-gray-100">Product</Th>
      <Th className="border p-2 bg-gray-100">Price</Th>
    </Tr>
  </Thead>
  <Tbody>
    <Tr>
      <Td className="border p-2">Widget</Td>
      <Td className="border p-2">$10</Td>
    </Tr>
  </Tbody>
</Table>
```

***

## Images

```tsx theme={"dark"}
import { Image } from "@cordel/react-docx";

<Image
  src="./logo.png"
  alt="Logo"
  width="2in"
  height="2in"
/>
```

Supports `in`, `cm`, `mm`, `pt`, `px`.

***

## Next

<CardGroup cols={2}>
  <Card title="Tailwind" href="/react-docx/getting-started/tailwind">
    Supported classes and custom config
  </Card>

  <Card title="Rendering" href="/react-docx/getting-started/rendering">
    Output to file, buffer, or stream
  </Card>

  <Card title="Components" href="/react-docx/components/document">
    All components and props
  </Card>
</CardGroup>