revuekitz

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.

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.

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
• LoadingLoader
• ModalDialog
• PageTitle
• TabPanel
• ToolTip

Fields

• CheckBoxField
• ColorField
• DateField
• 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

Table

• DataTable

5. Sample Code

• Please take a look this!