Products & Features

🎨 Component Library

Vant provides 60+ high-quality mobile components covering all common business scenarios.

Basic Components

<van-grid-item>
  <div class="component-demo">
    <h4>Form Components</h4>
    <div class="demo-tags">
      <van-tag type="primary">Input</van-tag>
      <van-tag type="success">Picker</van-tag>
      <van-tag type="warning">Upload</van-tag>
      <van-tag type="danger">Switch</van-tag>
    </div>
  </div>
</van-grid-item>

<van-grid-item>
  <div class="component-demo">
    <h4>Display Components</h4>
    <van-card
      title="Product Card"
      desc="Component showcase"
      thumb="/card-1.svg"
    />
  </div>
</van-grid-item>

<van-grid-item>
  <div class="component-demo">
    <h4>Navigation</h4>
    <div class="demo-nav">
      <van-button type="primary" size="mini">Tab 1</van-button>
      <van-button type="default" size="mini">Tab 2</van-button>
      <van-button type="default" size="mini">Tab 3</van-button>
    </div>
  </div>
</van-grid-item>

🚀 Key Features

🎯 Mobile-First Design

Every component is designed specifically for mobile devices, ensuring optimal touch experience and performance on smartphones and tablets.

• Touch-friendly interaction design
• Optimized for various screen sizes
• Gesture support and smooth animations
• High DPI display compatibility

<van-collapse-item title="⚡ High Performance" name="2">
  <div class="feature-content">
    <p>Lightweight and efficient components with minimal bundle size and maximum performance.</p>
    <ul>
      <li>Tree-shaking support for smaller bundles</li>
      <li>Lazy loading for better initial load times</li>
      <li>Optimized rendering with virtual scrolling</li>
      <li>Memory-efficient component lifecycle</li>
    </ul>
  </div>
</van-collapse-item>

<van-collapse-item title="🛠️ Developer Experience" name="3">
  <div class="feature-content">
    <p>Comprehensive TypeScript support and excellent developer tools for enhanced productivity.</p>
    <ul>
      <li>Full TypeScript definitions</li>
      <li>IntelliSense support in IDEs</li>
      <li>Comprehensive documentation</li>
      <li>Rich example code and demos</li>
    </ul>
  </div>
</van-collapse-item>

<van-collapse-item title="🎨 Theme Customization" name="4">
  <div class="feature-content">
    <p>Flexible theming system allowing complete visual customization to match your brand.</p>
    <ul>
      <li>CSS variables for easy customization</li>
      <li>Multiple built-in themes</li>
      <li>Dark mode support</li>
      <li>Brand color adaptation</li>
    </ul>
  </div>
</van-collapse-item>

<van-collapse-item title="🌍 Internationalization" name="5">
  <div class="feature-content">
    <p>Built-in i18n support for creating applications that serve global audiences.</p>
    <ul>
      <li>Multi-language support</li>
      <li>RTL (Right-to-Left) layout support</li>
      <li>Locale-specific formatting</li>
      <li>Easy language switching</li>
    </ul>
  </div>
</van-collapse-item>

<van-collapse-item title="🔧 Enterprise Ready" name="6">
  <div class="feature-content">
    <p>Production-ready components with enterprise-grade reliability and support.</p>
    <ul>
      <li>Comprehensive testing coverage</li>
      <li>Regular security updates</li>
      <li>Professional technical support</li>
      <li>Long-term maintenance commitment</li>
    </ul>
  </div>
</van-collapse-item>

🎨 Design System

Color Palette

Primary #1989fa

Success #07c160

Warning #ff976a

Danger #ee0a24

Typography

Heading 1 - 32px

Heading 2 - 24px

Heading 3 - 20px

Body text - 16px with 1.6 line height for optimal readability

Small text - 14px for secondary information

Spacing System

XS - 4px

SM - 8px

MD - 16px

LG - 24px

XL - 32px

📱 Component Categories

Basic Components

ButtonIconImageLayoutPopup

Essential UI elements for building mobile interfaces

<van-swipe-item>
  <div class="category-slide">
    <h3>Form Components</h3>
    <div class="category-components">
      <van-tag type="success">Field</van-tag>
      <van-tag type="success">Picker</van-tag>
      <van-tag type="success">Upload</van-tag>
      <van-tag type="success">Switch</van-tag>
      <van-tag type="success">Slider</van-tag>
    </div>
    <p>Comprehensive form controls for data input and validation</p>
  </div>
</van-swipe-item>

<van-swipe-item>
  <div class="category-slide">
    <h3>Display Components</h3>
    <div class="category-components">
      <van-tag type="warning">Card</van-tag>
      <van-tag type="warning">List</van-tag>
      <van-tag type="warning">Grid</van-tag>
      <van-tag type="warning">Swipe</van-tag>
      <van-tag type="warning">Badge</van-tag>
    </div>
    <p>Components for presenting information and content</p>
  </div>
</van-swipe-item>

<van-swipe-item>
  <div class="category-slide">
    <h3>Navigation Components</h3>
    <div class="category-components">
      <van-tag type="danger">Tab</van-tag>
      <van-tag type="danger">NavBar</van-tag>
      <van-tag type="danger">Tabbar</van-tag>
      <van-tag type="danger">Sidebar</van-tag>
      <van-tag type="danger">Steps</van-tag>
    </div>
    <p>Navigation and routing components for app structure</p>
  </div>
</van-swipe-item>

🔧 Enterprise Solutions

Custom Component Development

<van-grid-item>
  <van-card title="White-label Solutions">
    <p>Complete mobile UI solutions with your branding, ready to deploy for your customers and partners.</p>
    <template #footer>
      <van-button type="primary" size="small">Contact Sales</van-button>
    </template>
  </van-card>
</van-grid-item>

<van-grid-item>
  <van-card title="Technical Consulting">
    <p>Expert guidance on architecture, performance optimization, and best practices for large-scale mobile applications.</p>
    <template #footer>
      <van-button type="primary" size="small">Get Quote</van-button>
    </template>
  </van-card>
</van-grid-item>

📊 Performance Metrics

Why Choose Vant?

60+

Components

50KB

Min Bundle Size

99%

Test Coverage

1M+

Weekly Downloads

🚀 Get Started Today

Ready to Build Amazing Mobile Apps?

Join thousands of developers who trust Vant for their mobile UI needs