Quick Start

Updated Dec 12, 2025 • 5 min read

Get up and running with Webui in under 5 minutes. This guide covers installation, project scaffolding, and launching your first interactive UI component.

ℹ️

Prerequisites: Node.js 18+ and npm/yarn/pnpm installed. Webui runs on macOS, Windows, and Linux.

1. Installation

Install the Webui CLI globally using your preferred package manager:

                        bash
                        
                    
# Using npm
npm install -g @webui/cli

# Using yarn
yarn global add @webui/cli

# Using pnpm
pnpm add -g @webui/cli

Verify the installation by checking the version:

bash

webui --version
# Output: 2.4.0

2. Scaffold a Project

Create a new Webui project using the built-in scaffolding tool. This will generate a fully functional starter template with routing, theming, and component examples.

bash

webui create my-dashboard --template saas
cd my-dashboard
webui install

💡

Tip: Run webui create --help to see all available templates including landing, admin, and blank.

3. Start the Dev Server

Launch the local development server with hot module replacement and live preview:

                        bash
                        
                    
webui dev
# ➜  Local:   http://localhost:3000
# ➜  Network: http://192.168.1.45:3000
# ➜  Ready in 340ms

Open http://localhost:3000 in your browser. You'll see a fully interactive dashboard with pre-configured components, dark/light mode toggle, and responsive layouts.

4. Project Configuration

Webui uses a webui.config.js file at the root of your project. Here's a basic configuration example:

                        javascript
                        
                    
import { defineConfig } from '@webui/config';

export default defineConfig({
  app: {
    name: 'My Dashboard',
    baseURL: '/',
  },
  theme: {
    mode: 'auto',
    primary: '#6C3CE1',
    radius: 12,
  },
  features: {
    analytics: true,
    auth: false,
    i18n: false,
  }
});

Environment Variables

Use .env.local for sensitive configuration. Webui automatically loads variables prefixed with WEBUI_:

Variable	Type	Description	Default
`WEBUI_PORT`	Number	Dev server port	3000
`WEBUI_API_URL`	String	Backend endpoint	`https://api.webui.io`
`WEBUI_DEBUG`	Boolean	Enable verbose logging	`false`

⚠️

Security Notice: Never commit .env files to version control. Add them to your .gitignore immediately.

What's Next?

Now that you have a working project, explore these guides to extend your application:

Learn how to build reusable Components with props and slots
Configure Routing for multi-page applications
Connect to external APIs using the Fetch Hook
Deploy to production with Vercel or Docker

← Previous Introduction Next → Installation & CLI