@hanui/vue

KRDS HTML ComponentKit 리소스를 그대로 사용하는 공공 웹사이트용 Vue 컴포넌트 라이브러리
1,002 36
vue ui accessibility components a11y design-system public krds korea government hanui
Install
npm install @hanui/vue
Latest Version:0.3.1
Vue:3
License:MIT
Last Updated:Oct 16, 2026
Links: GitHub  ·  npm
Maintainer: eehd80

@hanui/vue

KRDS(대한민국 정부 디자인 시스템) HTML ComponentKit 리소스를 그대로 사용하는 공공 웹사이트용 Vue 3 컴포넌트 라이브러리입니다.

  • 스타일은 KRDS 원본 CSS 클래스를 그대로 사용합니다.
  • 키보드 조작·초점 관리·ARIA 등 동작은 Vue로 다시 구현하고, KRDS 원본 스크립트의 접근성 결함을 보완했습니다.

설치

pnpm add @hanui/vue

Vue ^3.5.0이 필요합니다.

사용

// main.ts
import '@hanui/vue/styles.css';

<script setup lang="ts">
import { Button } from '@hanui/vue';
</script>

<template>
  <Button variant="primary" size="large">확인</Button>
</template>

컴포넌트

Button, FormField, Input, Textarea, Select, Table, Pagination, Badge, Modal, FileUpload, Breadcrumb, SkipLink, Masthead, DropMenu, Header, MainMenu, MobileMenu, Identifier, Footer, SideNavigation, Spinner

라이선스

Related Packages

@krds.ui/vue

대한민국 정부 디자인 시스템(KRDS) Vue 3 컴포넌트 라이브러리 - KRDS 원본의 마크업...

2,755 1
a11y accessibility components design-system government korea krds vue government-design-system korean +6
@thaisrr/beedesign

Une librairie de composants Vue 3 accessible par défaut, avec un thème entièreme...

631 0
a11y accessibility components design-system vue vue3
@libretexts/davis-vue

An a11y-first UI library for Vue

5,746 0
a11y accessibility components ui vue headlessui tailwind
@hina-ui/vue

The design system behind Hikarinagi: Vue 3 components built on Tailwind CSS v4.

4,608 10
accessibility design-system ui vue component-library tailwindcss vue3
@orvain/vue

Orvain UI free components for Vue

406
accessibility components design-system ui vue design-tokens vue3

Version History

Version Released Vue License
0.3.1 ^3.5.0 MIT
0.3.0 ^3.5.0 MIT
0.2.0 ^3.5.0 MIT
0.1.2 MIT
0.1.1 MIT