UI Library

A minimal UI component library built with Vite, React, TypeScript, and Tailwind CSS.

Features

• Built with Vite for fast development and optimal build output
• Components styled with Tailwind CSS (pre-compiled and bundled)
• Full TypeScript support with complete declaration files
• Dual ESM and CommonJS output (works with Next.js, Vite, and all module systems)
• Properly configured exports for both import and require

Installation

npm install paper-ui-component
# or
pnpm add paper-ui-component
# or
yarn add paper-ui-component

Usage

Step 1: Import the CSS in your application entry point:

For Next.js (in app/layout.tsx or pages/_app.tsx):

import 'paper-ui-component/dist/paper-ui-component.css'

For Vite/React (in main.tsx or index.tsx):

import 'paper-ui-component/dist/paper-ui-component.css'

Step 2: Use the components in your app:

import { Button, Card, CardHeader, CardBody, CardFooter } from 'paper-ui-component'

export default function App() {
  return (
    <div className="p-8">
      <Card>
        <CardHeader>
          <h2>Welcome</h2>
        </CardHeader>
        <CardBody>
          <p>This is a card component</p>
        </CardBody>
        <CardFooter>
          <Button>Click me</Button>
        </CardFooter>
      </Card>
    </div>
  )
}

Troubleshooting

Error: "Can't resolve 'paper-ui-component/dist/ui-lib.css'"

• Make sure you've imported the CSS file in your app layout/entry point
• The CSS import must come before using any components

Error: "dynamic usage of require is not supported"

• This usually means the package wasn't installed correctly
• Try deleting node_modules and package-lock.json, then reinstall
• Make sure the package.json has both the CSS and component imports configured

Components

Button

A flexible button component with variants and sizes.

Props:

• variant: 'primary' | 'secondary' (default: 'primary')
• size: 'sm' | 'md' | 'lg' (default: 'md')

Card

Composable card component with optional header, body, and footer.

Subcomponents:

• Card - Main card container
• CardHeader - Header section (with top border)
• CardBody - Main content area
• CardFooter - Footer section (with bottom border)

Development

# Install dependencies
pnpm install

# Start dev server
pnpm dev

# Build for production
pnpm build

# Preview production build
pnpm preview

Publishing

Update the version in package.json and publish to npm:

npm publish --access public

To publish as a scoped package, update the name in package.json to your desired scope (e.g., @yourorg/ui-lib).