### Install and Start Documentation Site

Source: https://github.com/bigcommerce/big-design/blob/main/packages/docs/README.md

Run these commands in the root directory to install dependencies, build the project, and start the documentation site. Navigate to localhost:3000 in your browser after starting.

```bash
pnpm install
pnpm run build
pnpm run start
```

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

### Install BigDesign with pnpm

Source: https://github.com/bigcommerce/big-design/blob/main/packages/big-design/README.md

Install BigDesign and styled-components@5 using pnpm. Ensure styled-components is at version 5.

```bash
pnpm add @bigcommerce/big-design styled-components@5
```

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

### Start Development Server

Source: https://github.com/bigcommerce/big-design/blob/main/README.md

Run this command to start the development server for `big-design` and `docs` in watch mode, enabling live reloading.

```bash
pnpm run start
```

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

### Install Dependencies and Build Icons

Source: https://github.com/bigcommerce/big-design/blob/main/README.md

Run these commands to set up the development environment. `pnpm` installs all dependencies, and `pnpm run build:icons` builds the icon assets.

```bash
pnpm
pnpm run build:icons
```

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

### Install BigDesign Theme and styled-components

Source: https://github.com/bigcommerce/big-design/blob/main/packages/big-design-theme/README.md

Install the BigDesign theme and styled-components v5 using npm or pnpm.

```bash
npm install @bigcommerce/big-design-theme styled-components@5
```

```bash
pnpm add @bigcommerce/big-design-theme styled-components@5
```

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

### Install BigDesign with npm

Source: https://github.com/bigcommerce/big-design/blob/main/packages/big-design/README.md

Install BigDesign and styled-components@5 using npm. Ensure styled-components is at version 5.

```bash
npm install @bigcommerce/big-design styled-components@5
```

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

### Install BigDesign Icons and styled-components

Source: https://github.com/bigcommerce/big-design/blob/main/packages/big-design-icons/README.md

Install the necessary packages using npm or pnpm. Ensure styled-components v5 is used.

```bash
npm install @bigcommerce/big-design-icons styled-components@5
```

```bash
pnpm add @bigcommerce/big-design-icons styled-components@5
```

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

### Install BigDesign Packages

Source: https://github.com/bigcommerce/big-design/blob/main/packages/big-design-patterns/README.md

Install the necessary BigDesign packages using npm or pnpm. Ensure you are also installing styled-components v5.

```bash
npm install @bigcommerce/big-design @bigcommerce/big-design-patterns styled-components@5
```

```bash
pnpm add @bigcommerce/big-design @bigcommerce/big-design-patterns styled-components@5
```

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

### Install BigDesign and styled-components

Source: https://github.com/bigcommerce/big-design/blob/main/README.md

Install the BigDesign library and styled-components version 5 using npm or pnpm. This is a prerequisite for using the library.

```bash
npm install @bigcommerce/big-design styled-components@5
```

```bash
pnpm add @bigcommerce/big-design styled-components@5
```

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

### Configure VS Code Settings

Source: https://github.com/bigcommerce/big-design/blob/main/README.md

Copy the example VS Code settings file to enable project-specific configurations within VS Code. This ensures a consistent development environment.

```shell
cp .vscode/settings.example.json .vscode/settings.json
```

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

### Component Structure Example

Source: https://github.com/bigcommerce/big-design/blob/main/AGENTS.md

Illustrates the standard directory structure for a BigDesign component, including implementation, styling, exports, tests, and sub-components.

```treeview
packages/big-design/src/components/ComponentName/
├── ComponentName.tsx        # Main component implementation
├── styled.tsx              # Styled components and styling
├── index.ts                # Public exports
├── spec.tsx                # Jest tests
├── __snapshots__/          # Jest snapshots
└── SubComponent/           # Sub-components (if any)
    ├── SubComponent.tsx
    ├── styled.tsx
    └── index.ts
```

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

### BigDesign Pre-commit Workflow

Source: https://github.com/bigcommerce/big-design/blob/main/AGENTS.md

A step-by-step guide for the pre-commit process, ensuring code quality, test passing, and proper versioning before committing changes. Includes building icons, linting, type checking, testing, and generating changesets.

```bash
1. Make changes to components/tests
2. Run `pnpm run build:icons` if icon changes
3. Run `pnpm run lint` and fix any issues
4. Run `pnpm run typecheck` and resolve type errors
5. Run `pnpm run test` and ensure all tests pass
6. Generate a changeset using `pnpm changeset` while following the prompts to the best of your ability
7. Update snapshots if needed
8. Commit changes
```

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

### Build New Icons

Source: https://github.com/bigcommerce/big-design/blob/main/packages/big-design-icons/README.md

After downloading new SVG icons, run the build script to convert them into React components.

```bash
pnpm run build:icons
```

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

### Basic Page Layout with Header and Panel

Source: https://github.com/bigcommerce/big-design/blob/main/packages/big-design-patterns/README.md

Demonstrates how to use the Page and Header patterns to structure your application's layout. The Header includes a title, description, and actions, while the Page component wraps the main content.

```tsx
import { Panel } from '@bigcommerce/big-design';
import { AddIcon } from '@bigcommerce/big-design-icons';
import { Page, Header } from '@bigcommerce/big-design-patterns';

export default function App() {
  const header = (
    <Header
      title="Products"
      description="View and manage your products."
      actions={[{ text: 'Add new', iconLeft: <AddIcon /> }]} 
    />
  );

  return (
    <Page header={header}>
      <Panel header="Main content">
        ...
      </Panel>
    </Page>
  );
}
```

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

### Run Tests

Source: https://github.com/bigcommerce/big-design/blob/main/README.md

Execute this command to run all tests within the project. This is crucial for verifying code integrity.

```bash
pnpm run test
```

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

### Running BigDesign Tests

Source: https://github.com/bigcommerce/big-design/blob/main/AGENTS.md

Details different methods for executing the test suite, including the full suite, package-specific tests, watch mode, and coverage reports. Use these commands to ensure component stability and correctness.

```bash
1. **Full test suite**: `pnpm run test`
2. **Package-specific**: `pnpm -F @bigcommerce/big-design run test`
3. **Watch mode**: `pnpm run test:watch`
4. **Coverage**: `pnpm run ci:test`
```

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

### Run Linter

Source: https://github.com/bigcommerce/big-design/blob/main/README.md

Execute this command to run the linter and check for code style and potential issues across the project.

```bash
pnpm run lint
```

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

### BigDesign Development Commands

Source: https://github.com/bigcommerce/big-design/blob/main/AGENTS.md

Provides essential commands for setting up, developing, testing, and ensuring code quality within the BigDesign repository. Always run these from the repository root.

```bash
# Setup (required before development)
pnpm install
pnpm run build:icons

# Development
pnpm run start              # Start docs with live reload

# Testing
pnpm run test              # Run all tests
pnpm -F @bigcommerce/big-design run test # Package-specific tests
pnpm run test --update-snapshot          # Update snapshots

# Code Quality
pnpm run lint              # Lint all packages
pnpm run typecheck         # Type check all packages
```

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

### Page Structure Components

Source: https://github.com/bigcommerce/big-design/blob/main/packages/docs/PAGES.md

Demonstrates the usage of various Big Design components for structuring documentation pages, including headings, text, links, and code previews.

```jsx
import { H0, H1, H2, Link, Text } from '@bigcommerce/big-design';

import { CodePreview, CodeSnippet, Collapsible } from '../../components';

<H0>Headings</H0>

<Text>
  Intro text.
  <Link href="https://developer.bigcommerce.com/big-design" target="_blank">Design Guidelines</Link>.
</Text>

<CodePreview>
  Example usage with default props
</CodePreview>

<H1>API</H1>

<H2>Component Name</H2>

<ImportedPropTable />

<H2>Static Member</H2>

<ImportedStaticMemberPropTable />

<H2>Inherited Props</H2>

<Collapsible title="Inherited Props">
  <InheritedPropTable />
</Collapsible>

<H1>Examples</H1>

<H2>Example 1</H2>

<CodePreview></CodePreview> || <CodeSnippet></CodeSnippet>

<H2>Example 2</H2>

<CodePreview></CodePreview> || <CodeSnippet></CodeSnippet>
```

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

### Create a Custom Theme with Different HTML Font Size

Source: https://github.com/bigcommerce/big-design/blob/main/packages/big-design-theme/README.md

Generate a new theme instance with a custom HTML font size (e.g., 14px) to ensure correct spacing and sizing calculations.

```jsx
import { createTheme } from '@bigcommerce/big-design-theme';
import { ThemeProvider } from 'styled-components';

const theme = createTheme({ htmlFontSize: 14 });

// ...

<ThemeProvider theme={theme}>
  <App />
</ThemeProvider>;

```

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

### Update Snapshots

Source: https://github.com/bigcommerce/big-design/blob/main/README.md

After building and navigating to the `big-design` package directory, run this command to update snapshot tests. This is typically done after making changes to UI components.

```bash
pnpm build
cd packages/big-design
pnpm run test --update-snapshot
```

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

### Import and Use an Icon Component

Source: https://github.com/bigcommerce/big-design/blob/main/packages/big-design-icons/README.md

Import any desired icon component from the library and render it within your React application.

```jsx
import { StoreIcon } from '@bigcommerce/big-design-icons';

...

<App>
  <StoreIcon />
</App>
```

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

### Integrate GlobalStyles and Button Component

Source: https://github.com/bigcommerce/big-design/blob/main/README.md

Import and use the `GlobalStyles` component once in your application's root to apply global styles and normalize.css. Then, import and use components like `Button` anywhere.

```jsx
import { Button, GlobalStyles } from '@bigcommerce/big-design';

... 

<App>
  <GlobalStyles />
  <Button>Click me</Button>
</App>
```

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

### Import and Configure Google Font in Next.js

Source: https://github.com/bigcommerce/big-design/blob/main/README.md

For Next.js projects, import and configure the 'Source Sans 3' font using the `next/font/google` module. Specify display, weight, and subsets.

```tsx
import { Source_Sans_3 } from 'next/font/google';

const sourceSans3 = Source_Sans_3({
  display: 'swap',
  weight: ["200", "300", "400", "600"],
  subsets: ['latin'],
});
```

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

### Integrate GlobalStyles and Button Component

Source: https://github.com/bigcommerce/big-design/blob/main/packages/big-design/README.md

Import and use the GlobalStyles component once in your app, typically near the root. Then import and use components like Button.

```jsx
import { Button, GlobalStyles } from '@bigcommerce/big-design';

// ...

<App>
  <GlobalStyles />
  <Button>Click me</Button>
</App>
```

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

### Download New Icons

Source: https://github.com/bigcommerce/big-design/blob/main/packages/big-design-icons/README.md

Use the provided script to download SVG icons from Material Icons - Rounded. Ensure you have the correct icon style selected.

```bash
pnpm run download
```

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

### BigDesign Linting and Type Checking

Source: https://github.com/bigcommerce/big-design/blob/main/AGENTS.md

Commands for maintaining code quality by running ESLint, Prettier, and TypeScript checks. These should be executed before committing changes.

```bash
pnpm run lint              # ESLint + Prettier
pnpm run typecheck         # TypeScript compilation
```

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

### Updating BigDesign Snapshots

Source: https://github.com/bigcommerce/big-design/blob/main/AGENTS.md

Instructions for updating Jest snapshot files, typically required after changes to styled components. Navigate to the package directory before running the update command.

```bash
1. Navigate to package: `cd packages/big-design`
2. Update snapshots: `pnpm run test --update-snapshot`
3. Review snapshot changes carefully before committing
```

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

### Add Google Font Link to HTML

Source: https://github.com/bigcommerce/big-design/blob/main/README.md

Include this link in your HTML's <head> element to load the 'Source Sans 3' font. Ensure correct placement for global font application.

```html
<head>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="" />
  <link href="https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@200;300;400;600&display=swap" rel="stylesheet" />
</head>
```

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

### Apply BigDesign Theme with ThemeProvider

Source: https://github.com/bigcommerce/big-design/blob/main/packages/big-design-theme/README.md

Integrate the BigDesign theme into your React application using styled-components' ThemeProvider.

```tsx
import { theme } from '@bigcommerce/big-design-theme';
import { ThemeProvider } from 'styled-components';

// ...

ReactDOM.render(
  <ThemeProvider theme={theme}>
      <App />
  </ThemeProvider>,
  document.getElementById('root'),
);

```

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

### Clearing Turborepo Cache

Source: https://github.com/bigcommerce/big-design/blob/main/AGENTS.md

Command to clear the Turborepo cache, useful for resolving issues related to stale build artifacts or unexpected build behavior.

```bash
turbo clean
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.