@cssninja/nuxt-ui
v0.7.17
Published
๐๏ธ A beautiful, customizable, and simple to use component library with Tailwind CSS for Nuxt.js
Downloads
19
Readme
@cssninja/nuxt-ui
๐๏ธ A beautiful, customizable, and simple to use component library with Tailwind CSS for Nuxt.js
Modules
- ๐ง @vueuse/nuxt
- ๐จ @nuxtjs/color-mode
- ๐ช @nuxtjs/tailwindcss
- ๐งฉ nuxt-icon
Installation
- Add
@cssninja/nuxt-ui
dependency to your project
# Using pnpm
pnpm add -D @cssninja/nuxt-ui
# Using yarn
pnpm add -D @cssninja/nuxt-ui
# Using npm
npm install --save-dev @cssninja/nuxt-ui
- Add
@cssninja/nuxt-ui
to theextends
section ofnuxt.config.js
export default defineNuxtConfig({
extends: [
'@cssninja/nuxt-ui'
]
})
Configuration
// app.config.ts
export default defineAppConfig({
nui: {
defaultShapes: {
/**
* Default shape for the BaseAccordion component
*
* @type {'straight' | 'rounded' | 'curved'}
*/
accordion: 'rounded',
/**
* Default shape for the BaseAutocompleteItem component
*
* @type {'straight' | 'rounded' | 'curved' | 'full'}
*/
autocompleteItem: 'rounded',
/**
* Default shape for the BaseAvatar component
*
* @type {'straight' | 'rounded' | 'curved' | 'full'}
*/
avatar: 'full',
/**
* Default shape for the BaseButton component
*
* @type {'straight' | 'rounded' | 'curved' | 'full'}
*/
button: 'rounded',
/**
* Default shape for the BaseButtonAction component
*
* @type {'straight' | 'rounded' | 'curved' | 'full'}
*/
buttonAction: 'rounded',
/**
* Default shape for the BaseButtonIcon component
*
* @type {'straight' | 'rounded' | 'curved' | 'full'}
*/
buttonIcon: 'rounded',
/**
* Default shape for the BaseCard component
*
* @type {'straight' | 'rounded' | 'curved' | 'full'}
*/
card: 'rounded',
/**
* Default shape for the BaseDropdown component
*
* @type {'straight' | 'rounded' | 'curved' | 'full'}
*/
dropdown: 'rounded',
/**
* Default shape for the BaseIconBox component
*
* @type {'straight' | 'rounded' | 'curved' | 'full'}
*/
iconBox: 'rounded',
/**
* Default shape for all input components component
* - BaseAutocomplete
* - BaseCheckbox
* - BaseInput
* - BaseInputFile
* - BaseInputListbox
* - BaseInputSelect
* - BaseInputTextarea
*
* @type {'straight' | 'rounded' | 'curved' | 'full'}
*/
input: 'rounded',
/**
* Default shape for the BaseMessage component
*
* @type {'straight' | 'rounded' | 'curved' | 'full'}
*/
message: 'curved',
/**
* Default shape for the BasePagination component
*
* @type {'straight' | 'rounded' | 'curved' | 'full'}
*/
pagination: 'rounded',
/**
* Default shape for the BaseProgress component
*
* @type {'straight' | 'rounded' | 'curved' | 'full'}
*/
progess: 'full',
/**
* Default shape for the BaseProse component
*
* @type {'straight' | 'rounded' | 'curved'}
*/
prose: 'rounded',
/**
* Default shape for the BaseTabSlider component
*
* @type {'straight' | 'rounded' | 'curved' | 'full'}
*/
tabSlider: 'rounded',
/**
* Default shape for the BaseTag component
*
* @type {'straight' | 'rounded' | 'curved' | 'full'}
*/
tag: 'rounded',
},
},
})