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

Table of Contents

1. Project Setup
2. Usage
3. Roadmap
4. Contributing
5. License
6. Contact

Installation & Setup

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.

---

Vite / VueCLI

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')

Nuxt3 (nuxt plugins)

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()
    },
  },
})

Usage

Import the components you want to use

import { Button, Slider } from 'pidekit'

For more examples, please refer to the live docs

Roadmap

• 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

Contributing

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.

License

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

Contact

Maintainer	E-Mail	Twitter
kaandesu	kaandesu00@gmail.com	-
EgeOnder	40398628+EgeOnder@users.noreply.github.com	@EgeOnder23

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