guangliang2019 / Prototype-UI

Headless UI with Web Component
https://prototype-ui.dev
MIT License
5 stars 1 forks source link
collaboration headlessui mit-license prototype-ui shadcn-ui ui-components web-components

Prototype UI

Overview

Prototype UI is a headless UI library built with Web Components, offering a novel approach to component integration. Inspired by shadcn/ui, it bypasses traditional package management by directly incorporating component source code into your project via a CLI. This provides unparalleled customization and control, allowing you to tailor the components directly within your codebase while maintaining a lightweight footprint.

Website: https://prototype-ui.dev

Features

Installation (Working in Progress)

npx @prototype-ui/cli init
# Or for a specific theme:
npx @prototype-ui/cli init
(and choose your prefer theme in an interactive menu)

Usage

$ npx @prototype-ui/cli --help

██████╗ ██████╗  ██████╗ ████████╗ ██████╗
██╔══██╗██╔══██╗██╔═══██╗╚══██╔══╝██╔═══██╗
██████╔╝██████╔╝██║   ██║   ██║   ██║   ██║
██╔═══╝ ██╔══██╗██║   ██║   ██║   ██║   ██║
██║     ██║  ██║╚██████╔╝   ██║   ╚██████╔╝
╚═╝     ╚═╝  ╚═╝ ╚═════╝    ╚═╝    ╚═════╝
████████╗██╗   ██╗██████╗ ███████╗    ██╗   ██╗██╗
╚══██╔══╝╚██╗ ██╔╝██╔══██╗██╔════╝    ██║   ██║██║
   ██║    ╚████╔╝ ██████╔╝█████╗█████╗██║   ██║██║
   ██║     ╚██╔╝  ██╔═══╝ ██╔══╝╚════╝██║   ██║██║
   ██║      ██║   ██║     ███████╗    ╚██████╔╝██║
   ╚═╝      ╚═╝   ╚═╝     ╚══════╝     ╚═════╝ ╚═╝

Usage: prototype-ui [options] [command]

CLI for prototype-ui project

Options:
  -v, --version       Output the current version
  -h, --help          display help for command

Commands:
  init                Initialize a new prototype-ui project
  add <component>     Add a new component to the project
  remove <component>  Remove a component from the project (maybe not safe)
  list                List all components in the project
  help [command]      display help for command

Note

The code is provided "as is" for maximum flexibility in use and integration into various projects.

Contributing

Contributions are welcome and encouraged. Although the Web Components ecosystem may not be as extensive as those for frameworks like React, Vue, or Lit, Prototype UI strives to emulate best practices from these established communities. We convert and reimplement functionalities from these frameworks into Web Components, diligently crediting original developers and their contributions.

Development

Run the project locally with npm run dev. For optimal performance, Node version 18 or higher is recommended.

Guangliang's Note

For smaller projects or situations where CLI integration isn't ideal, you can include the entire Prototype UI library via a script tag. This method is also efficient (projected output size under 30KB) and provides a quick way to get started. However, it offers less granular control over individual components. See the documentation for details on script tag integration.