@piramesse/ui

v1.1.0

Published

5 months ago

A modern Vue 3 UI component library built with Tailwind CSS and TypeScript

0High
0Medium
0Low

kemetcode_admin

vue vue3 ui components component-library tailwindcss tailwind typescript design-system ui-kit

@piramesse/ui

A modern Vue 3 UI component library built with Tailwind CSS and TypeScript.

Features

🎨 Themeable - CSS custom properties for easy customization
📦 Tree-shakeable - Import only what you need
🔷 TypeScript - Full type support out of the box
♿ Accessible - ARIA attributes and keyboard navigation
🎭 Two themes - Default and Editorial (zero border-radius)
🧱 Blocks - Pre-built UI sections for rapid development

Installation

pnpm add @piramesse/ui

Peer Dependencies

pnpm add vue@^3.5.0 tailwindcss@^4.0.0

Setup

1. Import Styles

Import the CSS file in your main entry point:

// main.ts
import '@piramesse/ui/style.css'

2. Configure Tailwind (Optional)

If you want to use Tailwind utilities alongside the library, make sure your app.css imports Tailwind:

@import "tailwindcss";

Usage

Components

<script setup lang="ts">
import { Button, Input, Card, Modal } from '@piramesse/ui'
</script>

<template>
  <Card>
    <Input v-model="email" label="Email" type="email" />
    <Button variant="primary" @click="submit">Submit</Button>
  </Card>
</template>

Blocks

Pre-built UI sections for common patterns:

<script setup lang="ts">
import { HeaderWithNav, HeroCentered, FooterWithLinks } from '@piramesse/ui/blocks'
</script>

<template>
  <HeaderWithNav :nav-items="navItems" @login="handleLogin" />
  <HeroCentered
    title="Welcome"
    subtitle="Get started today"
    primary-action="Sign Up"
  />
  <FooterWithLinks :link-groups="links" copyright="© 2024" />
</template>

Shell Layouts

Structural layouts with slots for content:

<script setup lang="ts">
import { BlogLayout, BlogPostLayout } from '@piramesse/ui/blocks'
</script>

<template>
  <BlogLayout>
    <template #header>
      <h1>Our Blog</h1>
    </template>
    
    <PostCard v-for="post in posts" :key="post.id" :post="post" />
    
    <template #sidebar>
      <SearchWidget />
    </template>
  </BlogLayout>
</template>

Theming

CSS Custom Properties

The library uses CSS custom properties for theming. Override them in your CSS:

:root {
  --pui-primary: #3b82f6;
  --pui-primary-hover: #2563eb;
  --pui-bg: #ffffff;
  --pui-text: #0f172a;
  --pui-text-muted: #64748b;
  --pui-border: #e2e8f0;
  --pui-radius: 0.5rem;
  /* ... and more */
}

Dark Mode

Apply dark mode with the .dark class on a parent element:

<html class="dark">
  <!-- Dark theme applied -->
</html>

Editorial Theme

A zero border-radius, black & white theme:

<div data-theme="editorial">
  <!-- Editorial theme applied -->
</div>

Or use the class:

<div class="theme-editorial">
  <!-- Editorial theme applied -->
</div>

Components

Form Components

| Component | Description | |-----------|-------------| | Button | Primary action trigger with variants | | Input | Text input with validation states | | Textarea | Multi-line text input | | Select | Dropdown selection | | Checkbox | Binary selection | | Radio | Single selection from group | | Switch | Toggle for boolean values |

Feedback

| Component | Description | |-----------|-------------| | Alert | Inline message for contextual feedback | | Toast | Temporary notification popup | | Progress | Linear/circular progress indicator | | Spinner | Loading indicator | | Skeleton | Placeholder while loading |

Overlay

| Component | Description | |-----------|-------------| | Modal | Dialog overlay | | Drawer | Slide-in panel | | Dropdown | Dropdown menu | | Tooltip | Information on hover |

Data Display

| Component | Description | |-----------|-------------| | Table | Data table with sorting | | List | Structured list | | Avatar | User representation | | AvatarGroup | Stacked avatars | | Badge | Count or status indicator | | Tag | Categorization label | | Accordion | Collapsible panels | | Timeline | Chronological events | | Tree | Hierarchical data | | Statistic | Numeric value display | | Empty | Empty state placeholder | | Result | Outcome page | | Descriptions | Key-value pairs |

Navigation

| Component | Description | |-----------|-------------| | Tabs | Tabbed navigation |

Layout

| Component | Description | |-----------|-------------| | Container | Centered container | | Grid | CSS Grid layout | | Flex | Flexbox utility | | Stack | Vertical/horizontal stack | | Divider | Visual separator | | Spacer | Flexible space | | AspectRatio | Maintain ratio | | Center | Center content |

Media

| Component | Description | |-----------|-------------| | Image | Responsive image with loading states | | Card | Container component |

Blocks

Pre-built UI sections (import from @piramesse/ui/blocks):

Headers

HeaderSimple - Logo/title + actions
HeaderWithNav - Full navigation with mobile menu

Footers

FooterSimple - Copyright + social links
FooterWithLinks - Multi-column with link groups

Auth Forms

LoginForm - Email/password + social login
RegisterForm - Registration + terms
ForgotPasswordForm - Password reset

Heroes

HeroCentered - Centered headline + CTAs
HeroSplit - Two-column with image

Marketing

FeatureGrid - Feature showcase
PricingCards - Pricing comparison
CTASection - Call-to-action

Layouts (Shell)

BlogLayout - Blog listing page structure
BlogPostLayout - Article page structure

Development

Prerequisites

Node.js 18+
pnpm 8+

Setup

# Install dependencies
pnpm install

# Start Storybook
pnpm storybook

# Build library
pnpm build

Project Structure

src/
├── components/        # UI components
│   ├── Button/
│   │   ├── Button.vue
│   │   ├── Button.stories.ts
│   │   └── index.ts
│   └── ...
├── layout/           # Layout components
├── blocks/           # Pre-built UI sections
│   ├── headers/
│   ├── footers/
│   ├── forms/
│   ├── heroes/
│   ├── features/
│   ├── pricing/
│   ├── cta/
│   └── layouts/
├── styles/           # CSS files
│   ├── variables.css
│   ├── base.css
│   ├── themes/
│   ├── components/
│   ├── data-display/
│   └── layout/
├── index.ts          # Main entry (components)
├── blocks/index.ts   # Blocks entry
└── style.css         # CSS entry point

Scripts

| Command | Description | |---------|-------------| | pnpm dev | Start Vite dev server | | pnpm build | Build library for production | | pnpm storybook | Start Storybook on port 6006 | | pnpm build-storybook | Build static Storybook |

CSS Architecture

The library uses a modular CSS architecture:

variables.css - CSS custom properties (colors, spacing, etc.)
base.css - Animations and utility classes
themes/editorial.css - Editorial theme overrides
components/*.css - Individual component styles
data-display/*.css - Data display component styles
layout/*.css - Layout component styles

All styles are assembled in style.css via @import rules.

Naming Convention

All CSS classes are prefixed with pui- (Piramesse UI):

.pui-button { }
.pui-button-primary { }
.pui-button-lg { }

TypeScript

All components export their prop types:

import type { ButtonProps, InputProps, CardProps } from '@piramesse/ui'

Browser Support

Chrome (latest)
Firefox (latest)
Safari (latest)
Edge (latest)

License

ISC

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@piramesse/ui

Features

Installation

Peer Dependencies

Setup

1. Import Styles

2. Configure Tailwind (Optional)

Usage

Components

Blocks

Shell Layouts

Theming

CSS Custom Properties

Dark Mode

Editorial Theme

Components

Form Components

Feedback

Overlay

Data Display

Navigation

Layout

Media

Blocks

Headers

Footers

Auth Forms

Heroes

Marketing

Layouts (Shell)

Development

Prerequisites

Setup

Project Structure

Scripts

CSS Architecture

Naming Convention

TypeScript

Browser Support

License