DEV Community

Cover image for UI-Package: Multi-Framework UI Component Registry for Frontend Developers
suren_
suren_

Posted on

UI-Package: Multi-Framework UI Component Registry for Frontend Developers

Web applications frequently use forms, tables, dialogs, and dashboard layouts. Developers must modify component source code to satisfy custom application requirements.

UI-Package provides a registry of prebuilt components, blocks, charts, and templates. The registry supports Vue, React, Angular, Svelte, and Lit Web Components. You can preview components and copy the source code directly into your application.

Key Architecture Principles

  1. You own the source code: Installed components do not depend on a runtime package from UI-Package. You maintain all installed files in your repository.
  2. Multi-framework support:
    • React: Install with the shadcn command-line interface.
    • Vue: Install with the shadcn-vue command-line interface.
    • Svelte: Install with the shadcn-svelte command-line interface.
    • Angular: Install with the UIPKGE Angular command-line interface (@uipkge/ng).
    • Lit: Web Components follow the setup guide in the documentation.
  3. Editable dashboard blocks: Composed dashboard layouts and data views read top-to-bottom so you can modify them easily.

Installation Example

Run the appropriate command to install a component:

# Vue
npx shadcn-vue@latest add https://uipkge.dev/r/vue/button.json

# React
npx shadcn@latest add https://uipkge.dev/r/react/button.json
Enter fullscreen mode Exit fullscreen mode

Starter Boilerplates

Application starter templates are available for Nuxt, Next.js, Angular, and SvelteKit. These templates include optional configurations for authentication, databases, billing, email, and error monitoring. Configure only the services that your project requires.

License and Availability

UI-Package is open-source software distributed under the MIT license. It is free for personal and commercial projects without subscriptions or paid tiers.

Links

Which component or framework do you plan to use for your next project?

Top comments (0)