Introduction

Jetpack UI is the private component library for Jetpack Labs. It provides a set of production-ready Vue 3 components and composables built on top of Tailwind CSS v4.

What's included

• 22 components — covering everyday UI needs: buttons, forms, tables, modals, badges, accordions, alerts, skeletons, stat cards, and more.
• Semantic design tokens — a Tailwind @theme layer that maps brand colors to readable names (primary, danger, ink, surface, etc.).
• 2 composables — useAsyncData and useAsyncOptions handle API state (loading, error, data) automatically.
• Zero runtime CSS deps — the library ships one CSS file that you import once. No styled-components, no emotion, no runtime overhead.

Design decisions

Tailwind v4 @theme

Colors are defined as CSS custom properties in a Tailwind @theme block (src/styles/tokens.css). The tokens define the default Jetpack palette — consuming projects can override them by redefining the same variables in their own CSS before importing the library stylesheet.

inheritAttrs: false + extraClass

All components disable attribute inheritance (defineOptions({ inheritAttrs: false })). They capture attrs.class separately via const extraClass = computed(() => (attrs.class as string) ?? '') and merge it into the root element's :class binding. All other HTML attributes (ARIA, data-*, event listeners) are forwarded via v-bind="restAttrs" to the correct root element — no class collisions, no lost listeners.

Versioning

Jetpack UI follows semver. Install a specific tagged version:

"@jetpack-labs/jetpack-ui": "github:JetpackTo/jetpack-ui#v0.1.0"