kaandesu / pidekit Goto Github PK

PideKit UI

🚀 Vue3 component library using Radix primitives, seamlessly styled with Tailwind CSS for rapid and flexible UI development. Elevate your Vue projects with accessible and customizable components.

Live Demo | Report Bug | Request Feature

Install the package from npm

npm i pidekit

usePideKitUI plugin options & type reference:

type PluginOptions = {
  showLogs?: boolean
  components?: {
    globallyRegister: boolean
    exclude?: ComponentName[]
  }
  plugins?: {
    globallyRegister?: boolean
    exclude: PluginName[]
  }
  directives?: {
    globallyRegister?: boolean
    exclude: DirectiveName[]
  }
}

globallyRegister: If true, all components/plugins/directives will be registered globally. If false, you need to import and register them manually. If it is globally registered you don't need to import it, but for typesafe componant usage it is recommended to disable it for the 'componants' and import them manually.

exclude: Array of component/plugin/directive names to exclude from global registration (if true).

showLogs: If true, import/exclude/error logs will be shown in the console on initial load.

import { createApp } from 'vue'
import { usePideKitUI } from 'pidekit'
import App from './App.vue'
import './style.css'

const app = createApp(App)
app.use(
  usePideKitUI({
    showLogs: true, // default: true
    components: {
      globallyRegister: false, // default: false
      exclude: [],
    },
    plugins: {
      globallyRegister: true, // default: true
      exclude: ['customPlugin'],
    },
    directives: {
      globallyRegister: true, // default: true
      exclude: [],
    },
  }),
)
app.mount('#app')

import { usePideKitUI } from 'pidekit'
export default defineNuxtPlugin({
  name: 'pidekit',
  enforce: 'pre',
  async setup(nuxtApp) {
    nuxtApp.vueApp.use(
      usePideKitUI({
        showLogs: true, // default: true
        components: {
          globallyRegister: false, // default: false
          exclude: [],
        },
        plugins: {
          globallyRegister: true, // default: true
          exclude: [],
        },
        directives: {
          globallyRegister: true, // default: true
          exclude: [],
        },
      }),
    )
  },
  hooks: {
    'app:created'() {
      const nuxtApp = useNuxtApp()
    },
  },
})

Import the components you want to use

import { Button, Slider } from 'pidekit'

For more examples, please refer to the live docs

• Namespaced import for components
• vite & rollup bundle inspection
• Storybook documentation setup
• TailwindCSS setup
• Radix UI setup
• Vitest configuration with coverage
• Vitepress configuration
• Dialog
• Slider
• Select
• Checkbox
• Toggle
• Toggle Group
• Radio Group
• Alert Dialog
• Dropdown Menu
• Menubar
• Navigation Menu
• Tabs
• Popover
• Avatar
• Collapsible
• Combobox
• Context Menu
• Hover Card
• Label
• Pagination
• Pin Input
• Aspect Ratio
• Progress
• Scroll Area
• Separator
• Switch
• Tags Input
• Toast
• Toolbar
• Tooltip

Contributions to the project is highly appreciated. If you have any suggestions/questions/requests please consider opening an issue. If you want to contribute to the project, fixing an open issue is greatly recommended and appreciated. To see the all contribution rules please check the contribution rules.

Distributed under the MIT License. See LICENSE for more information.

Project Link: https://github.com/kaandesu/PideKit