# Random component references
URL: /docs/empty

***

title: Random component references
description: These are random components
----------------------------------------

# Frame of Work: Quick Start

Getting Started with Frame of Work

Frame of Work has different parts:

<Cards>
  <Card title="Purchase">
    Browse and buy from our collection of professionally designed quote templates that integrate seamlessly with HubSpot.
  </Card>

  <Card title="Account Setup">
    Create an account and connect your HubSpot portal to access your purchased templates.
  </Card>

  <Card title="Installation">
    Our templates are built for easy installation with your HubSpot portal, with minimal technical knowledge required.
  </Card>

  <Card title="Template Usage">
    Use your new templates directly in HubSpot to create beautiful, professional quotes that impress clients and close deals.
  </Card>
</Cards>

<Callout title="Want to learn more?">
  Read our in-depth What is Frame of Work introduction.
</Callout>

### Terminology

**Markdown/MDX:** Markdown is a markup language for creating formatted text. Fumadocs supports Markdown and MDX (superset of Markdown) out-of-the-box.

Although not required, some basic knowledge of Next.js App Router would be useful for further customisations.

## Automatic Installation

A minimum version of Node.js 18 required, note that Node.js 23.1 might have problems with Next.js production build.

<Tabs items={['npm', 'pnpm', 'yarn', 'bun']}>
  <Tab value="npm">
    ```bash tab="npm"
    npm create fumadocs-app
    ```
  </Tab>

  ```bash tab="pnpm"
  pnpm create fumadocs-app
  ```

  ```bash tab="yarn"
  yarn create fumadocs-app
  ```

  ```bash tab="bun"
  bun create fumadocs-app
  ```
</Tabs>

It will ask you:

* the React.js framework to use (the docs is only written for Next.js).
* the content source to use.

A new fumadocs app should be initialized. Now you can start hacking!

<Callout title="From Existing Codebase?">
  You can follow the [Manual Installation](/docs/ui/manual-installation) guide to get started.
</Callout>

### Enjoy!

Create your first MDX file in the docs folder.

```mdx title="content/docs/index.mdx"
---
title: Hello World
---

## Yo what's up
```

Run the app in development mode and see [http://localhost:3000/docs](http://localhost:3000/docs).

<Tabs items={['npm', 'pnpm', 'yarn', 'bun']}>
  <Tab value="npm">
    ```bash
    npm run dev
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm run dev
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn dev
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bun run dev
    ```
  </Tab>
</Tabs>

## Explore

In the project, you can see:

* `lib/source.ts`: Code for content source adapter, [`loader()`](/docs/headless/source-api) provides the interface to access your content.
* `app/layout.config.tsx`: Shared options for layouts, optional but preferred to keep.

| Route                     | Description                                            |
| ------------------------- | ------------------------------------------------------ |
| `app/(home)`              | The route group for your landing page and other pages. |
| `app/docs`                | The documentation layout and pages.                    |
| `app/api/search/route.ts` | The Route Handler for search.                          |

### Writing Content

For authoring docs, make sure to read:

<Cards>
  <Card href="/docs/ui/markdown" title="Markdown">
    Fumadocs has some additional features for authoring content.
  </Card>

  <Card href="/docs/ui/navigation" title="Navigation">
    Learn how to customise navigation links and sidebar items.
  </Card>

  <Card href="/docs/ui/page-conventions" title="Routing">
    Learn how to organise content.
  </Card>
</Cards>

### Content Source

Content source handles all your content, like compiling Markdown files and validating frontmatter.

<Tabs items={['Fumadocs MDX', 'Custom Source']}>
  <Tab value="Fumadocs MDX">
    A `source.config.ts` config file has been included, you can customise different options like frontmatter schema.

    Read the [Introduction](/docs/mdx) for further details.
  </Tab>

  <Tab value="Custom Source">
    Fumadocs is not Markdown-exclusive. For other sources like Sanity, you can build a [custom content source](/docs/headless/custom-source).
  </Tab>
</Tabs>

### Customise UI

See [Customisation Guide](/docs/ui/customisation).

## FAQ

Some common questions you may encounter.

<Accordions>
  <Accordion id="change-base-url" title="How to change the base route of /docs?">
    You can change the base route of docs (e.g. from `/docs/page` to `/info/page`).
    Since Fumadocs uses Next.js App Router, you can simply rename the route:

    <Files>
      <Folder name="app/docs" defaultOpen className="opacity-50" disabled>
        <File name="layout.tsx" />
      </Folder>

      <Folder name="app/info" defaultOpen>
        <File name="layout.tsx" />
      </Folder>
    </Files>

    And tell Fumadocs to use the new route in `source.ts`:

    ```ts title="lib/source.ts"
    import { loader } from 'fumadocs-core/source';

    export const source = loader({
      baseUrl: '/info',
      // other options
    });
    ```
  </Accordion>

  <Accordion id="dynamic-route" title="It uses Dynamic Route, will it be poor in performance?">
    Next.js turns dynamic route into static routes when `generateStaticParams` is configured.
    Hence, it is as fast as static pages.

    You can enable Static Exports on Next.js to get a static build output. (Notice that Route Handler doesn't work with static export, you have to configure static search)
  </Accordion>

  <Accordion id="custom-layout-docs-page" title="How to create a page in /docs without docs layout?">
    Same as managing layouts in Next.js App Router, remove the original MDX file from content directory (`/content/docs`).
    This ensures duplicated pages will not cause errors.

    Now, You can add the page to another route group, which isn't a descendant of docs layout.

    For example, to replace `/docs/test`:

    <Files>
      <File name="(home)/docs/test/page.tsx" />

      <Folder name="docs">
        <File name="layout.tsx" />

        <File name="[[...slug]]/page.tsx" />
      </Folder>
    </Files>

    For `/docs`, you need to change the catch-all route to be non-optional:

    <Files>
      <File name="(home)/docs/page.tsx" />

      <Folder name="docs" defaultOpen>
        <File name="layout.tsx" />

        <File name="[...slug]/page.tsx" />
      </Folder>
    </Files>
  </Accordion>

  <Accordion id="multi-versions" title="How to implement docs with multi-version?">
    Use a separate deployment for each version.

    On Vercel, this can be done by creating another branch for a specific version on your GitHub repository.
    To link to the sites of other versions, use the Links API or a custom navigation component.
  </Accordion>

  <Accordion id="multi-docs" title="How to implement multi-docs?">
    We recommend to use [Sidebar Tabs](/docs/ui/navigation/sidebar#sidebar-tabs).
  </Accordion>
</Accordions>

\##Ready to Get Started?

Browse our template collection today and transform your HubSpot quotes into professional, deal-closing assets.

<Cards>
  <Card href="/templates" title="Browse Templates" description="Explore our collection of professional HubSpot quote templates" />

  <Card href="/docs/installation" title="Installation Guide" description="Learn how to install templates in your HubSpot portal" />

  <Card href="/docs/customization" title="Customization" description="Learn how to customize templates to match your brand" />

  <Card href="/pricing" title="Pricing" description="View our pricing and purchase options" />
</Cards>

## Learn More

New to here? Don't worry, we are welcome for your questions.

If you find anything confusing, please give your feedback on [Github Discussion](https://github.com/fuma-nama/fumadocs/discussions)!

<Cards>
  <Card href="/docs/ui/static-export" title="Configure Static Export" description="Learn how to enable static export on your docs" />

  <Card href="/docs/ui/search" title="Customise Search" description="Learn how to customise document search" />

  <Card href="/docs/ui/theme" title="Theming" description="Add themes to Fumadocs UI" />

  <Card href="/docs/ui/components" title="Components" description="See all available components to enhance your docs" />
</Cards>