Pear

Thin Vue 3 component library built on PicoCSS.

• 🪶 Lightweight
• 🎨 Themeable
• 📐 Layout primitives
• 🧩 Composable forms
• 🧾 Static tables
• 🪟 Modal system
• 💪 Type safe

Installation

Requires Vue 3.5+.

# pnpm
pnpm add @ontic/pear

# npm
npm install @ontic/pear

@lucide/vue is a peer dependency required only if you use PThemeSwitcher:

pnpm add @lucide/vue

Usage

Import the styles

import { createApp } from 'vue'
import App from './App.vue'

// Import Pear styles
import '@ontic/pear/style.css'

const app = createApp(App)
app.mount('#app')

No global registration, Pear components are used directly. Import what you use.

Example

<script setup lang="ts">
import { ref } from 'vue'
import { PField, PInput, PButton, PStack } from '@ontic/pear'

const email = ref('')
</script>

<template>
  <PStack>
    <PField label="Email" helper="Used for account notifications.">
      <PInput
        v-model="email"
        type="email"
        name="email"
        placeholder="[email protected]"
        autocomplete="email"
        required
      />
    </PField>

    <PButton type="submit">Subscribe</PButton>
  </PStack>
</template>

PField automatically wires up id, aria-describedby, and validation state to any child form component.

Pear includes wrappers for Pico patterns like buttons, cards, inputs, textareas, fieldsets, checkbox and radio groups, tables, accordions, dropdowns, modals, nav, breadcrumbs, progress, loading states, and tooltips.

Theme switching

import { useTheme } from '@ontic/pear'

const { theme, toggleTheme } = useTheme()

theme.value = 'dark'   // 'light' | 'dark'
toggleTheme()

Imperative modals

Wrap your app with PModalProvider, then call useModal() anywhere:

import { useModal } from '@ontic/pear'

const modal = useModal()

modal.open({
  title: 'Confirm',
  description: 'Are you sure you want to continue?',
  actions: [
    { label: 'Cancel', variant: 'secondary' },
    { label: 'Confirm' },
  ],
})

Documentation

For full API docs, examples, and guides, visit pear.ontic.cloud/docs.

License

MIT