microsoft · dmytrokirpa · Jan 22, 2025 · Jan 13, 2025 · Jan 13, 2025 · Jan 13, 2025
@@ -370,7 +370,8 @@
       "packages/charts/*/*",
       "scripts/*",
       "tools/*",
-      "typings"
+      "typings",
+      "starter-templates"
     ]
   },
   "resolutions": {

@@ -0,0 +1,43 @@
+# FluentUI v9 Starter Templates
+
+Collection of starter templates for FluentUI v9 with popular frameworks and build tools.
+
+## Available Templates
+
+- [React Components + Vite](src/react-components-vite/README.md) - Modern starter template using Vite and FluentUI React Components
+
+## Project Structure
+
+```
+starter-templates/
+├── project.json
+├── package.json
+├── README.md
+└── src/
+    └── react-components-vite/
+        ├── README.md
+        └── ...
+```
+
+## Contributing
+
+We welcome contributions! You can help by:
+
+- Improving existing templates
+- Adding new starter templates following the guidelines below
+
+### Adding New Templates
+
+1. Create a new directory under `src/`
+2. Follow the naming convention: `react-components-{framework}`
+3. Include a comprehensive README.md with:
+   - Setup instructions
+   - Usage examples
+   - Configuration details
+   - Development guidelines
+4. Test the template thoroughly
+5. Submit a pull request
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE](../LICENSE) file for details.
@@ -0,0 +1,7 @@
+{
+  "name": "@fluentui/starter-templates",
+  "version": "0.0.1",
+  "private": true,
+  "description": "Starter templates for Fluent UI",
+  "license": "MIT"
+}
@@ -0,0 +1,6 @@
+{
+  "name": "stater-templates",
+  "$schema": "../node_modules/nx/schemas/project-schema.json",
+  "projectType": "application",
+  "tags": ["vNext", "tools"]
+}
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
@@ -0,0 +1,32 @@
+# FluentUI React v9 - Vite.js example
+
+## How to use
+
+Download the example [or clone the repo](https://github.com/microsoft/fluentui):
+
+```bash
+npx degit microsoft/fluentui/starter-templates/src/react-components-vite
+cd react-components-vite
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+```
+
+or:
+
+[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/microsoft/fluentui/tree/master/starter-templates/src/react-components-vite)
+
+[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/microsoft/fluentui/tree/master/starter-templates/src/react-components-vite)
+
+## The idea behind the example
+
+This example uses [Vite.js](https://github.com/vitejs/vite).
+It includes `@fluentui/react-components` and its peer dependencies, including `@fluentui/react-icons`.
+
+## What's next?
+
+You now have a working example project. To continue, you can explore the [FluentUI React documentation](https://react.fluentui.dev) for more information and advanced usage.
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
@@ -0,0 +1,22 @@
+{
+  "name": "react-components-vite",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "@vitejs/plugin-react": "^4.3.4",
+    "typescript": "~5.6.2",
+    "vite": "^6.0.5"
+  }
+}
@@ -0,0 +1,12 @@
+import { FluentProvider, webLightTheme } from '@fluentui/react-components';
+import { Example } from './Example';
+
+const App = () => {
+  return (
+    <FluentProvider theme={webLightTheme}>
+      <Example />
+    </FluentProvider>
+  );
+};
+
+export default App;
@@ -0,0 +1,26 @@
+import { Button, Title1, makeStyles } from '@fluentui/react-components';
+import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons';
+
+const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
+
+const useStyles = makeStyles({
+  container: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '16px',
+    padding: '32px',
+  },
+});
+
+export const Example = () => {
+  const styles = useStyles();
+
+  return (
+    <div className={styles.container}>
+      <Title1>Hello, Fluent UI!</Title1>
+      <Button appearance="primary" icon={<CalendarMonth />}>
+        Click Me
+      </Button>
+    </div>
+  );
+};
@@ -0,0 +1,11 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App.tsx';
+
+const root = createRoot(document.getElementById('root') as HTMLElement);
+
+root.render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}
@@ -0,0 +1,4 @@
+{
+  "files": [],
+  "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }]
+}
@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+});