Getting Started with Paper-UI

Welcome to Paper-UI! Follow this guide to quickly integrate Paper-UI components into your Nuxt 3 project and start building beautifully crafted, hand-drawn styled user interfaces.

Installation

First, install the paper-ui module in your project:

npm install @paper-ui/nuxt

# pnpm install @paper-ui/nuxt

# yarn add @paper-ui/nuxt

Configuration

To use Paper-UI in your Nuxt project, add the module to your nuxt.config.ts file:

export default defineNuxtConfig({
  modules: ['paper-ui']
})

This step ensures that all components and styles from Paper-UI are globally available in your project.

Usage

Using Paper-UI components is straightforward. Here's how to use a sample component in your project:

Open a page, e.g., pages/index.vue

Import and use a Paper-UI component:

<template>
  <div>
    <PUTabs :tabs="tabs">
      <template #tab="{ tab, isActive }">
        <span :class="{ 'font-bold': isActive }">
          {{ tab.label }}
        </span>
      </template>

      <template #content="{ tab }">
        <p>{{ tab.content }}</p>
      </template>
    </PUTabs>
  </div>
</template>

<script setup lang="ts">
const tabs = [
  { label: 'Tab 1', content: 'This is the content for Tab 1.' },
  { label: 'Tab 2', content: 'This is the content for Tab 2.' },
  { label: 'Tab 3', content: 'This is the content for Tab 3.' }
]
</script>

Start your development server:

npm run dev
# yarn dev
# pnpm dev

Visit your app in the browser, and you'll see the Paper-UI component in action.

Customization

Paper-UI is designed to be easily customizable. You can override styles using Tailwind CSS or extend component functionality to meet your needs. For details, refer to the Customization section in the documentation.

Contributing

We welcome contributions to Paper-UI!

Happy building with Paper-UI! 🎉