Bocins

Collection of reusable UI components for Vue 3 that can be used standalone or combined together to create flexible and customized interfaces. The term bocins is derived from catalan and means small bits or pieces of something.

Explore all components in Storybook.

Get started

Install the library

npm i bocins

Default icons are copied from /node_modules/bocins/dist/icons to /public/icons/. Replace them to use your own icons. Existing icons won't be replaced.

Import styles in your app entry point file or in your styles entry point

// main.ts
import 'bocins/dist/style.css';

// main.scss
@import 'bocins/dist/style.css';

You can customize the theme using CSS variables and extending some base styles

:root {
  font-size: 16px;
  font-family: system-ui, Arial, sans-serif;

  color-scheme: light dark;

  --color-bg: light-dark(#f8f8f8, #333);
  --color-text: light-dark(#333, #efefec);
  --color-error: #d33;
  --color-accent: #39f;
  --color-btn: var(--color-accent);
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
}

.btn[alert] { --color: var(--color-error); }

.switch {
  --color-on: lightgreen;
  --color-off: var(--color-error);
}

Usage

Import and use components directly in your vue files

<template>
  <Selector v-model="user" :options="store.users">
    <template #default="{ item: user }">
      <Avatar :src="user.avatar" :name="user.name" />
      {{ user.name }}
    </template>
  </Selector>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Selector, Avatar } from 'bocins';
import store, { type User } from './store';

const user = ref<User>();
</script>

<style scoped>
.avatar { --size: 1.5rem; }
</style>