# Components

> Use @inkcre/web-design Vue 3 components. Includes all 19 components with props, events, and usage examples.

- Skill: `majiayu000/components-2` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/components-2`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/components-2/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/components-2

---


# @inkcre/web-design Components

Use this skill when working with the @inkcre/web-design Vue 3 component library.

## Overview

@inkcre/web-design provides 19 UI components for Vue 3 applications:
- [inkAutoForm](references/inkAutoForm.md)
- [inkButton](references/inkButton.md)
- [inkDatetimePickerView](references/inkDatetimePickerView.md)
- [inkDialog](references/inkDialog.md)
- [inkDoubleCheck](references/inkDoubleCheck.md)
- [inkDropdown](references/inkDropdown.md)
- [inkField](references/inkField.md)
- [inkForm](references/inkForm.md)
- [inkHeader](references/inkHeader.md)
- [inkInput](references/inkInput.md)
- [inkJsonEditor](references/inkJsonEditor.md)
- [inkLoading](references/inkLoading.md)
- [inkPagination](references/inkPagination.md)
- [inkPicker](references/inkPicker.md)
- [inkPlaceholder](references/inkPlaceholder.md)
- [inkPopup](references/inkPopup.md)
- [inkSwitch](references/inkSwitch.md)
- [inkTextarea](references/inkTextarea.md)
- [inkTooltip](references/inkTooltip.md)

## Installation

```bash
npm install @inkcre/web-design
# or
pnpm add @inkcre/web-design
```

## Setup

```typescript
// main.ts
import { createApp } from 'vue'
import InKCreWebDesign from '@inkcre/web-design'
import "@inkcre/web-design/styles"

const app = createApp(App)
app.use(InKCreWebDesign)
```

## Component References

Each component has detailed documentation in the `references/` directory:

- [`inkAutoForm`](references/inkAutoForm.md) - Component with props, events, and examples
- [`inkButton`](references/inkButton.md) - Component with props, events, and examples
- [`inkDatetimePickerView`](references/inkDatetimePickerView.md) - Component with props, events, and examples
- [`inkDialog`](references/inkDialog.md) - Component with props, events, and examples
- [`inkDoubleCheck`](references/inkDoubleCheck.md) - Component with props, events, and examples
- [`inkDropdown`](references/inkDropdown.md) - Component with props, events, and examples
- [`inkField`](references/inkField.md) - Component with props, events, and examples
- [`inkForm`](references/inkForm.md) - Component with props, events, and examples
- [`inkHeader`](references/inkHeader.md) - Component with props, events, and examples
- [`inkInput`](references/inkInput.md) - Component with props, events, and examples
- [`inkJsonEditor`](references/inkJsonEditor.md) - Component with props, events, and examples
- [`inkLoading`](references/inkLoading.md) - Component with props, events, and examples
- [`inkPagination`](references/inkPagination.md) - Component with props, events, and examples
- [`inkPicker`](references/inkPicker.md) - Component with props, events, and examples
- [`inkPlaceholder`](references/inkPlaceholder.md) - Component with props, events, and examples
- [`inkPopup`](references/inkPopup.md) - Component with props, events, and examples
- [`inkSwitch`](references/inkSwitch.md) - Component with props, events, and examples
- [`inkTextarea`](references/inkTextarea.md) - Component with props, events, and examples
- [`inkTooltip`](references/inkTooltip.md) - Component with props, events, and examples