@takuhii/bricks-core

A comprehensive Vue 3 component library — 72+ production-ready components with TypeScript, design tokens, and swappable brand theming.

Installation

pnpm add @takuhii/bricks-core

Usage

import { WButton, WHeader, WProductCard } from '@takuhii/bricks-core'
import '@takuhii/bricks-core/styles'

Features

• 72+ Components — forms, navigation, commerce, layout, promotional, and utility
• Vue 3 Composition API with full TypeScript support
• Design tokens — SCSS variables backed by CSS custom properties
• Tree-shakeable — import only what you need
• Accessible — ARIA attributes, keyboard navigation, focus-visible indicators
• Responsive — mobile-first with viewport testing
• Swappable theming — use WThemeProvider to swap brand colours at runtime

Theming

<script setup>
import { WThemeProvider } from '@takuhii/bricks-core'
import type { BrandTheme } from '@takuhii/bricks-core'

const myTheme: BrandTheme = {
  colorPrimary: '#1a7f37',
  colorPrimaryDark: '#116329',
  colorPrimaryLight: '#2da44e',
  colorPrimaryActive: '#0d4620',
  colorPrimaryLightBg: '#dafbe1',
  colorPrimaryAlpha10: 'rgba(26, 127, 55, 0.10)',
  colorPrimaryAlpha15: 'rgba(26, 127, 55, 0.15)',
  colorPrimaryAlpha8: 'rgba(26, 127, 55, 0.08)',
  fontHeading: '"Inter", "Helvetica Neue", Arial, sans-serif',
  fontBody: '"Inter", "Helvetica Neue", Arial, sans-serif',
}
</script>

<template>
  <WThemeProvider :theme="myTheme">
    <WButton variant="primary">Themed button</WButton>
  </WThemeProvider>
</template>

Composables

import { useCarousel, usePrice, provideCloudinaryConfig } from '@takuhii/bricks-core'

• useCarousel — scroll-snap logic (activeIndex, prev/next/goTo)
• usePrice — price formatting, VAT priority, "From" pricing
• provideCloudinaryConfig — global Cloudinary settings

Components

Forms, navigation, commerce, layout, promotional, and utility components including:

WAccordion, WBanner, WBreadcrumbs, WButton, WCard, WCarousel, WCheckbox, WCloudinary, WContentPanel, WContentStrip, WDrawer, WFooter, WForm, WGrid, WHeader, WHomepageHero, WImage, WInput, WLink, WLogo, WMegaNav, WModal, WNewsletter, WPagination, WPriceBlock, WProductCard, WProductGrid, WPromoGrid, WRadio, WRatingStars, WSearch, WSelect, WSlider, WStickyBanner, WSwitch, WTabs, WTextarea, WThemeProvider, WToast, WToolbar, WTooltip, WVideoPlayer, and more.

License

MIT