Getting Started

Learn how to install and configure Webui in your project. Build production-ready interfaces in minutes.

Overview

Webui is a design-to-code engine that generates clean, semantic, and highly performant UI components. Whether you're prototyping a landing page or building a complex dashboard, Webui streamlines your workflow from design to deployment.

Installation

Install the core package using your preferred package manager:

npm install @webui/core

For TypeScript projects, types are included out of the box:

import { Card, Button, Grid } from '@webui/core';
import type { ThemeConfig } from '@webui/types';

Quick Start

Create a new Webui project with the CLI scaffold:

npx create-webui-app my-app
# or
pnpm create webui-app my-app

Once installed, initialize your first component:

const app = await Webui.create({
  target: '#app',
  theme: 'default',
  components: [Card, Button]
});

app.mount();

Configuration

Customize Webui behavior using a configuration file at the root of your project.

export default {
  framework: 'react',
  output: {
    dir: './dist',
    minify: true,
    sourcemap: false
  },
  plugins: [
    '@webui/plugin-tailwind',
    '@webui/plugin-i18n'
  ]
};

Next Steps

• Explore the Component Library for pre-built UI primitives
• Read about Theming & Design Tokens to match your brand
• Check the API Reference for advanced customization