It is a Dashborad ui kit project made with Vue.js composition api. It is a free and open source project. You can use it for your personal and commercial projects.
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 <script setup> SFCs, check out the script setup docs to learn more.
Screenshot
Alert component props
Name
Type
Default
Description
type
String
'default'
It takes values such as success, error, info, warning, default, message.
message
String
undefined
It takes the message to be displayed in the alert component.
closable
Boolean
false
It takes the value of true or false. If it is true, the alert component will be closed.
Avatar component props
Name
Type
Default
Description
image
String
undefined
It takes the image path to be displayed in the avatar component.
size
Number
32
It takes the size of the avatar component.
classes
String
undefined
Retrieves the class names to add to the avatar component.
Badge component props
Name
Type
Default
Description
icon
String
undefined
It takes the icon name to be displayed in the badge component.
active
Boolean
false
It takes the value of true or false. If it is true, the badge component will be active.
classes
String
undefined
Retrieves the class names to add to the badge component.
Button component props
Name
Type
Default
Description
name
String
undefined
It takes the name to be displayed in the button component.
variant
Boolean
'primary'
It takes values such as primary, secondary, success, error, info, danger, warning, light, dark, link.
classes
String
undefined
Retrieves the class names to add to the button component.
Card component props
Name
Type
Default
Description
bordered
Boolean
false
It takes the value of true or false. If it is true, the card component will be bordered.
classes
String
undefined
Retrieves the class names to add to the card component.
Divider component props
Name
Type
Default
Description
title-placement
String
'center'
It takes values such as left, right, center. If it is true, the divider component will be bordered.
title
String
undefined
It takes the title to be displayed in the divider component. If it is true, the divider component will be bordered.
Dropdown component props
Name
Type
Default
Description
value
String
undefined
It takes the value to be displayed in the dropdown component.
icon
String
undefined
It takes the icon name to be displayed in the dropdown component.
items
Array
[]
It takes the array of items to be displayed in the dropdown component.
Global icon component
Global icon component, src/assest/icons/icons.js file is used. You can add your own icons to this file. You can use the icons in the components by using the name of the icon. For example, you can use the icon named home in the components by using the name of the icon.
<icon icon="home" size="32" />
Icon component props
Name
Type
Default
Description
icon
String
undefined
It takes the icon name to be displayed in the icon component.