Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .lintignore
Original file line number Diff line number Diff line change
Expand Up @@ -9,3 +9,4 @@ build
build-tests
node_modules
pnpm-lock.yaml
routeTree.gen.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"name": "Devcontainer",
"image": "mcr.microsoft.com/devcontainers/javascript-node:20"
}
14 changes: 14 additions & 0 deletions examples/tanstack-start-tailwind-css/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
node_modules
.DS_Store
dist
dist-ssr
*.local
count.txt
.env
.nitro
.tanstack
.wrangler
.output
.vinxi
todos.json
*.tsbuildinfo
4 changes: 4 additions & 0 deletions examples/tanstack-start-tailwind-css/.prettierignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
package-lock.json
pnpm-lock.yaml
yarn.lock
routeTree.gen.ts
11 changes: 11 additions & 0 deletions examples/tanstack-start-tailwind-css/.vscode/settings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"files.watcherExclude": {
"**/routeTree.gen.ts": true
},
"search.exclude": {
"**/routeTree.gen.ts": true
},
"files.readonlyInclude": {
"**/routeTree.gen.ts": true
}
}
55 changes: 55 additions & 0 deletions examples/tanstack-start-tailwind-css/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
# Base UI + TanStack Start

This is a simple [TanStack Start](https://tanstack.com/start/latest/docs/framework/react/overview) app with [Base UI components](https://base-ui.com/react/overview/quick-start) and styled with [Tailwind CSS](https://tailwindcss.com/).

## Getting started

[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/base-ui/tree/master/examples/tanstack-start-tailwind-css)

[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/base-ui/tree/master/examples/tanstack-start-tailwind-css)
Copy link
Member Author

@mj12albert mj12albert Nov 21, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The combobox page with data loading works in CSB but not StackBlitz because of async local storage support: TanStack/router#4408 (comment)


Or to run it locally:

```bash
pnpm install
pnpm start
```

This starts a [Vite](https://vite.dev) development server at [http://localhost:3000](http://localhost:3000). [Node.js](https://nodejs.org/) version 20.19+ or 22.12+ is required.

## Building for production

To build a production bundle:

```bash
pnpm build
```

To preview the production build:

```bash
pnpm serve
```

## TypeScript

To check the types:

```bash
pnpm typescript
```

## Linting & Formatting

This project uses [ESLint](https://eslint.org/) and [prettier](https://prettier.io/) for linting and formatting. ESLint is configured using [`@tanstack/eslint-config`](https://tanstack.com/config/latest/docs/eslint). The following scripts are available:

```bash
# lint only
pnpm lint
# lint and prettier with autofix
pnpm check
```

## Routing

This app uses [TanStack Router](https://tanstack.com/router) with a file based router. Routes are managed as files in `src/routes`. The router also provides [`loader` functionality](https://tanstack.com/router/latest/docs/framework/react/guide/data-loading#loader-parameters) to load data for a route before it's rendered.
13 changes: 13 additions & 0 deletions examples/tanstack-start-tailwind-css/eslint.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
// @ts-check

import { tanstackConfig } from '@tanstack/eslint-config';

export default [
...tanstackConfig,
{
files: ['**/*.js'],
languageOptions: {
parserOptions: { project: null, projectService: { allowDefaultProject: ['*.js'] } },
},
},
];
40 changes: 40 additions & 0 deletions examples/tanstack-start-tailwind-css/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
{
"name": "base-ui-tanstack-start",
"private": true,
"type": "module",
"scripts": {
"dev": "vite dev --port 3000",
"build": "vite build",
"serve": "vite preview",
"lint": "eslint",
"check": "prettier --write . && eslint --fix",
"typescript": "tsc -b tsconfig.json"
},
"dependencies": {
"@base-ui-components/react": "latest",
"@base-ui-components/utils": "latest",
"@tanstack/react-devtools": "^0.8.1",
"@tanstack/react-router": "^1.139.0",
"@tanstack/react-router-devtools": "^1.139.0",
"@tanstack/react-start": "^1.139.0",
"@tanstack/router-plugin": "^1.139.0",
"clsx": "^2.1.1",
"lucide-react": "^0.554.0",
"react": "^19",
"react-dom": "^19",
"vite-tsconfig-paths": "^5.1.4"
},
"devDependencies": {
"@tailwindcss/vite": "^4.1.17",
"@tanstack/devtools-vite": "^0.3.11",
"@tanstack/eslint-config": "^0.3.0",
"@types/node": "^22.10.2",
"@types/react": "^19",
"@types/react-dom": "^19",
"@vitejs/plugin-react": "^5.0.4",
"prettier": "^3.5.3",
"tailwindcss": "^4.1.17",
"typescript": "^5.7.2",
"vite": "^7.1.7"
}
}
Loading
Loading