Revuekitz

Powered by Re:vue

1. Overview

• "revuekitz" is a UI component library for Vue.js. I collected atomic and molecular level components based on atomic design from my site called Re:vue and turned them into a library.
  "revuekitz" は Vue.js 向けの UI コンポーネントライブラリです。私のサイト Re:vue で提供していた Atomic / Molecular レベルのコンポーネントをまとめ、ライブラリ化しました。

2. Project Code is "Ranunculus"

• In the language of flowers, the ranunculus symbolizes radiant charm and attractiveness. This symbolism perfectly mirrors our aspiration for the revuekitz library: to bring a radiant charm to web development and empower developers to create visually appealing and highly functional interfaces effortlessly. Just as the ranunculus flower stands out with its beauty, we aim for revuekitz to stand out with its elegance and efficiency in the world of UI components.
  花言葉で「ラナンキュラス」は輝く魅力や華やかさを象徴します。この象徴性は、revuekitz ライブラリの目指すところと完全に一致します。ウェブ開発に華やかさをもたらし、開発者が美しく機能的な UI を簡単に構築できるようにすることが目標です。ラナンキュラスの花がその華やかさで際立つように、revuekitz もその優雅さと高い効率性で際立つライブラリを目指しています。

3. How to Use

npm install revuekitz

When importing components

import 'revuekitz/dist/style.css' // Import styles
import { BasicButton } from 'revuekitz'

4. UI Kitz

Buttons

• BasicButton
• LinkButton
• PushButton

Displays

• CardFlame
• ChipText
• CustomMessage
• LoadingLoader
• ModalDialog
• PageTitle
• TabPanel
• ToolTip

Fields

• CheckBoxField
• ColorField
• DateField
• FileDnd
• FileField
• MoneyField
• MultiLineField
• NumberField
• RadioField
• RangeField
• SelectField
• TextField
• ToggleSwitch

Icons

• ImgIcon
• SvgIcon

Layouts

• GridColumn
• GridRow
• LayoutFooter
• LayoutHeader
• LayoutWrapper
• NavBar
• NavBarItem

Lists

• AccordionMenu
• BasicList
• BreadcrumbList
• PaginateList
• TreeList

Tables

• DataTable

Calendars

• EventCalendar

5. Release Note

Updates in v1.3.16

Released on 2026-03-11

• DataTable (Update)

• Added selectable prop to toggle the checkbox selection column on or off.

  • チェックボックスによる行選択列の表示 / 非表示を切り替えられる selectable プロパティを追加しました。

• Added striped prop to enable or disable the striped table layout.

  • テーブルのストライプ表示をON / OFFできる striped プロパティを追加しました。

• Improved sorting UI and added configurable default sort order.

  • 並び替えUIを改善し、デフォルトのソート順を設定できるようにしました。△ / ▼ボタンで昇順・降順を切り替えることができます。

<DataTable
  :searchMode="true"
  :paginationMode="true"
  :selectable="true"
  :striped="true"
  :headers="['Date', 'Title', 'Content']"
  :items="tableItems"
  v-model="targetData"
  steps="5"
  sortType="desc"
/>