Vlossom

A vibrant and versatile Vue 3 UI library designed to blossom your web applications with elegance and ease.

[!NOTE] You are on the v2 project. Check out the v1 project for Vlossom v1.
Both versions will be maintained in parallel.

• Various Color Schemes — Easily style any component with a single prop
• Layered Style Sets — Global, named, or per-instance style overrides via CSS variables
• Overlay System — Modal, Toast, Confirm as plugins with full app context inheritance
• Declarative Responsive — Breakpoint objects instead of media queries
• Async Validation — Sync and async rules with built-in defaults per component
• Dark / Light Theme — One-line global toggle, auto-persisted

Quick Start

# Install
npm install vlossom
# or
pnpm add vlossom

[!TIP] Vlossom supports per-component tree shaking.
See VLOSSOM_USAGE_GUIDE.md.

// main.ts
import { createApp } from "vue";
import App from "./App.vue";
import { createVlossom, VlossomComponents } from "vlossom";
import "vlossom/styles";

const app = createApp(App);
app.use(
  createVlossom({
    components: VlossomComponents,
  }),
);
app.mount("#app");

<template>
  <vs-button primary>Hello Vlossom</vs-button>
</template>

<script setup lang="ts">
// Components are globally registered via createVlossom — no import needed
</script>

Component Overview

Layout

Component	Description
vs-container	Responsive content container
vs-grid	Grid layout system
vs-layout	Page layout with header, footer, and content
vs-page	Full page wrapper
vs-responsive	Responsive breakpoint wrapper
vs-block	Block-level section wrapper
vs-header	Page header
vs-footer	Page footer

Form

Component	Description
vs-input	Text input field
vs-textarea	Multi-line text input
vs-checkbox	Checkbox and checkbox set
vs-radio	Radio button and radio set
vs-select	Dropdown select
vs-switch	Toggle switch
vs-toggle	Toggle button
vs-file-drop	Drag and drop file upload
vs-search-input	Search input with suggestions
vs-form	Form wrapper with validation
vs-input-wrapper	Input label and message wrapper

Display

Component	Description
vs-accordion	Collapsible content panel
vs-avatar	User avatar
vs-bar	Horizontal bar
vs-chip	Compact label chip
vs-divider	Visual divider line
vs-expandable	Expandable section
vs-grouped-list	Grouped list of items
vs-image	Image with fallback
vs-label-value	Label-value pair display
vs-skeleton	Loading skeleton placeholder
vs-text-wrap	Text with overflow handling

Feedback

Component	Description
vs-loading	Loading spinner
vs-message	Inline message banner
vs-modal	Modal dialog
vs-drawer	Slide-in drawer panel
vs-dimmed	Dimmed overlay
vs-progress	Progress bar
vs-toast	Toast notification

Navigation

Component	Description
vs-tabs	Tab navigation
vs-pagination	Page pagination
vs-steps	Step indicator
vs-index-view	Index-based view switcher

Utility

Component	Description
vs-floating	Floating positioned element
vs-focus-trap	Focus trap for accessibility
vs-inner-scroll	Inner scrollable area
vs-render	Conditional renderer
vs-visible-render	Visibility-based renderer
vs-theme-button	Dark/light theme toggle
vs-tooltip	Tooltip popup

Links

• Changelog
• npm

Contributing

See CONTRIBUTING.md for development setup, commit conventions, and PR guidelines.

Project Structure

vlossom/
├── packages/vlossom/          # Main library package
│   └── src/
│       ├── components/        # UI components
│       ├── composables/       # Shared composables
│       ├── framework/         # Plugin & overlay system
│       ├── icons/             # Icon definitions
│       ├── plugins/           # Toast, Modal, Confirm plugins
│       ├── props/             # Shared prop definitions
│       ├── stores/            # State management
│       ├── styles/            # Global styles
│       └── utils/             # Utility functions
├── .github/                   # GitHub templates & workflows
└── release-please-config.json # Release automation

Component Structure

Each component follows this directory pattern:

vs-[name]/
├── Vs[Name].vue                           # Main component
├── Vs[Name].css                           # Styles
├── types.ts                               # TypeScript types
├── README.md                              # Documentation
├── __tests__/
│   └── vs-[name].test.ts                 # Unit tests
└── __stories__/
    ├── vs-[name].stories.ts              # Storybook stories
    └── vs-[name].chromatic.stories.ts    # Visual regression tests

For complex components, you may also include:

• vs-[name]-rules.ts — validation rules
• icons.ts — component-specific icons
• composables/ — component-specific composables

Releasing

Releases are automated via release-please. When a feat, fix, or chore commit is pushed to main:

1. release-please creates a release PR with version bump and changelog
2. Merging the release PR triggers npm publish automatically

Credits

• Pretendard - Default font (SIL Open Font License 1.1)

License

MIT