@poppy-ui/vue

Poppy UI

Poppy UI is an open-source Design System and Component Library exclusively built for modern VueJS applications.

Powered by Vue 3, Tailwind CSS 4, and DaisyUI 5, Poppy UI provides top-quality, highly customizable, and accessible components to speed up your web development workflow. We use Histoire for component storyboarding and documentation.

💡 Context & Tech Stack

Poppy UI is designed as a streamlined, Vue-native component library. By moving away from cross-framework wrappers, we ensure a better Developer Experience (DX), maximum performance, and deep integration with the Vue ecosystem.

Built With

• VueJS (> 3.5): Leveraging the latest Composition API and reactivity features.
• Tailwind CSS 4: For utility-first, highly performant styling.
• DaisyUI 5: Providing beautiful, semantic baseline styles for our Tailwind components.
• Histoire: A native Vue alternative to Storybook for building and documenting component stories.
• Bun: Used as the fast all-in-one JavaScript runtime, package manager, and bundler.

📦 Installation

To use Poppy UI in your Vue project, you can install the package via bun (make sure you have Tailwind CSS and DaisyUI configured in your project):

bun add @poppy-ui/vue

⚠️ Required step: Poppy UI components build their classes dynamically in JavaScript (e.g. shape="block" → btn-block). Tailwind CSS v4's automatic content detection does not scan node_modules, so without extra configuration these classes never end up in your compiled CSS — components render but appear unstyled or broken (e.g. a block button staying at its content width instead of expanding to 100%). Add an @source directive pointing to the package in your global CSS entry point (next to @import "tailwindcss";):

@import "tailwindcss";
@source "../node_modules/@poppy-ui/vue";

@plugin "daisyui";

Adjust the number of ../ to match where your CSS file lives relative to node_modules. See the Configuration story for more details.

🛠️ Getting Started for Development

If you want to contribute to the project or run it locally, follow these steps:

Requirements

• Git
• Bun Installed

Clone the repository

git clone https://github.com/CheeseGrinder/poppy-ui.git
cd poppy-ui

Install dependencies

bun install

Development (Histoire)

To start the component playground and view stories locally:

bun run story:dev

This will start the Histoire server, allowing you to browse components, test variations, and develop new features in an isolated environment.

Build for Production

To build the library for publishing:

bun run build

📚 Documentation

Start building your next project by following our documentation. We would love to hear from you! If you have any feedback or run into issues using our library, please file an issue on this repository.

🤝 Contributing

Thanks for your interest in contributing! Read up on our guidelines for contributing and then look through our issues with a help wanted label.

Please note that this project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms.