tailscale-ui-components

Tailscale UI component library used by Tailscale web projects. Not maintained for external use.

Development Setup

$3

Ensure you have the following tools installed:

- Node.js 22.14.0 (use nvm to manage Node versions)
``bash
nvm use 22.14.0
`
- Yarn 1.22.19 (package manager)
`bash
npm install -g yarn@1.22.19
`

$3

1. Clone the repository
`bash
git clone https://github.com/tailscale/tailscale-ui-components.git
cd tailscale-ui-components
`

2. Install dependencies
`bash
yarn install
`

3. Start Storybook for development
`bash
yarn storybook
`
This will start Storybook on http://localhost:6006 (or the next available port)

$3

- yarn storybook - Start Storybook development server
- yarn build-storybook - Build Storybook for production
- yarn build - Build the component library for production
- yarn test - Run tests with Vitest

$3

This project has been tested and works with:
- Node.js 22.14.0 (recommended for team consistency)

$3

This project uses Yarn v1 as the package manager. The yarn.lock file should be committed, and package-lock.json should be ignored/removed if present.

$3

Components are located in src/components/ and follow these patterns:

1. OSS-ready structure with proper style mappings
2. Comprehensive TypeScript types and exported constants
3. Accessibility features with proper ARIA attributes
4. Storybook stories for documentation and testing

Example component structure:
`
src/components/button/
├── button.tsx # Main component
├── button.stories.tsx # Storybook stories
`

$3

- Use the .button, .input, and other base CSS classes from src/tailwind.css
- Follow the established design tokens and color system
- Ensure components have rounded corners and consistent spacing
- Support both light and dark themes

$3

Node.js Version Issues:
If you encounter build errors, ensure you're using Node.js 22.14.0:
`bash
node --version # Should output v22.14.0
`

Package Manager Issues:
If dependencies fail to install, try:
`bash
rm -rf node_modules yarn.lock
yarn install
``