# FluentUI Web Components v3

Quick reference for FluentUI Web Components v3.

## Installation

```bash
pnpm add @fluentui/web-components
```

## Setup

```typescript
import {
  provideFluentDesignSystem,
  fluentButton,
  fluentTextField,
  fluentCard,
} from '@fluentui/web-components';

provideFluentDesignSystem()
  .register(
    fluentButton(),
    fluentTextField(),
    fluentCard()
  );
```

## Common Components

| Component | Tag | Purpose |
|-----------|-----|---------|
| Button | `<fluent-button>` | Actions |
| TextField | `<fluent-text-field>` | Text input |
| Card | `<fluent-card>` | Container |
| Dialog | `<fluent-dialog>` | Modal |
| Menu | `<fluent-menu>` | Dropdown menu |
| Tabs | `<fluent-tabs>` | Tab navigation |
| Tree | `<fluent-tree-view>` | Hierarchical |

## Button

```html
<fluent-button appearance="primary">Primary</fluent-button>
<fluent-button appearance="outline">Outline</fluent-button>
<fluent-button appearance="subtle">Subtle</fluent-button>
<fluent-button disabled>Disabled</fluent-button>
```

## TextField

```html
<fluent-text-field 
  placeholder="Enter text"
  value="${x => x.value}"
  @input="${(x, c) => x.value = c.event.target.value}"
></fluent-text-field>
```

## Design Tokens

```typescript
import { 
  colorNeutralBackground1,
  colorBrandBackground,
  spacingHorizontalM,
} from '@fluentui/tokens';

const styles = css`
  :host {
    background: ${colorNeutralBackground1};
    padding: ${spacingHorizontalM};
  }
`;
```

## Theming

```typescript
import { setTheme } from '@fluentui/web-components';
import { webLightTheme, webDarkTheme } from '@fluentui/tokens';

// Apply theme
setTheme(webDarkTheme);
```

## Links

- [Fluent 2 Design](https://fluent2.microsoft.design/)
- [Storybook](https://web-components.fluent.microsoft.com/)
