---
name: vuer-uikit
description: Expert knowledge of Vuer UIKit, a React component library for building interactive 3D and UI applications with 38 components and a powerful Dial system
---

# Vuer UIKit Documentation Skill

Expert knowledge of Vuer UIKit, a React component library for building interactive 3D and UI applications.

## What is Vuer UIKit?

Vuer UIKit is a comprehensive React component library designed for building modern user interfaces, particularly for 3D visualization and interactive applications. It provides a rich set of components including forms, layouts, data displays, and a powerful Dial system for creating control panels.

## Documentation Coverage

This skill includes complete documentation for:

### Getting Started
- Introduction and overview
- Installation and setup guide

### Style Guide
- Color system and theming
- Typography and fonts
- Icon library
- Layout principles

### Form Inputs
- Standard input components
- Number inputs with specialized controls
- Interactive playground
- Specialized input types

### Dial System
The Dial system is a powerful feature for creating control panels:
- Overview and concepts
- Getting started guide
- Step-by-step tutorial
- Comprehensive input type reference
- Type inheritance patterns
- CLI tooling reference
- Testing strategies
- Controlled dial patterns
- API design notes

### Menu & Tool Layouts
- Dock layout for panels
- Liquid float layout for dynamic positioning
- Toolbar components

### Components (38 total)
Complete documentation for all UI components including:
- Navigation: Navbar, Navigation, Sidebar, Tabs
- Data Display: Avatar, Badge, Card, Table, Waterfall
- Overlays: Modal, Drawer, Popover, Sheet, Toast, Tooltip
- Inputs: Button, Checkbox, Radio Group, Select, Slider, Switch, Textarea, Toggle components
- Feedback: Progress, Spinner, Version Badge
- Advanced: Tree View, Collapsible, Cursor Display, Drag Selectable, Sync Scroll, Preview

### Hooks
Custom React hooks for common patterns

## Usage

When helping with Vuer UIKit:
1. Reference the specific component documentation in `docs/components/`
2. For Dial-related questions, check the comprehensive Dial system docs in `docs/dial/`
3. For styling and theming, refer to `docs/style-guide/`
4. For layout patterns, see `docs/menu-tool-layouts/`

## Official Resources

- Documentation Site: https://uikit.vuer.ai/
- GitHub Repository: https://github.com/vuer-ai/vuer-uikit

## Skills

This skill helps you:
- Build UIs with Vuer UIKit components
- Create control panels using the Dial system
- Apply consistent styling and theming
- Implement complex layouts and interactions
- Use specialized form inputs and controls
- Test Dial-annotated components