@vuecs/elements

@vuecs/elements

The atomic building blocks of vuecs. Small, presentation-only elements — each one ≤150 lines, pure CSS or a thin Reka UI wrapper, owning its own theme key.

✨ What's inside

Atoms

• 🏷️ <VCBadge> — status indicator with the full variant (solid / soft / outline) × semantic-color × size matrix.
• 💊 <VCTag> / <VCTags> — removable, value-bound chips (single or array-driven).
• 👤 <VCAvatar> — image avatar with #fallback slot (Reka Avatar).
• ➖ <VCSeparator> — horizontal/vertical rule, decorative ARIA handling.
• 🖼️ <VCAspectRatio> — fixed-ratio container.
• 🙈 <VCVisuallyHidden> — screen-reader-only content.

Compounds

• 🗂️ Card — <VCCard> + Header / Title / Description / Body / Footer. variant (outline / soft / elevated), interactive hover/focus ring for whole-card links (as-child + <NuxtLink>), and padding set once on the root and inherited by every band. Plus <VCCardPlaceholder>, the matching skeleton.
• 🚨 Alert — <VCAlert> + Title / Description / Close. Persistent banner with a 15-cell variant × color matrix. Leading icon resolves from color, an :icon name prop, or the #icon slot for arbitrary content.
• 📂 Collapse — <VCCollapse> + Trigger / Content (Reka Collapsible) with auto-chevron and height animation.

📦 Installation

npm install @vuecs/elements

⚡ Usage

<VCBadge color="success" variant="soft">Active</VCBadge>

<VCCard variant="elevated" padding="compact">
    <VCCardHeader>
        <VCCardTitle>Monthly revenue</VCCardTitle>
        <VCCardDescription>Compared to last month</VCCardDescription>
    </VCCardHeader>
    <VCCardBody>…</VCCardBody>
</VCCard>

📚 Documentation

One page per element on vuecs.dev:

Badge · Tag & Tags · Avatar · Separator · AspectRatio · VisuallyHidden · Card · Alert · Collapse

License

Made with 💚

Published under Apache 2.0 License.