@papyrus-ui/components

The UI kit with fundamental React components based on the Papyrus UI design system.

Usage

Add the plugin to your tailwind.config.js or tailwind.config.mjs:

import papyrusUI from '@papyrus-ui/components';

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    // your content configuration
  ],
  plugins: [papyrusUI],
};

Features

The plugin includes:

Colors

• Primary colors (50-900)
• Secondary colors (50-900)
• Info colors (50-900)
• Success colors (50-900)
• Warning colors (50-900)
• Danger colors (50-900)
• Neutral colors (50-900)
• Light colors (50-900)
• Dark colors (50-900)

Typography

• Heading styles (h1-h6) for both primary and secondary fonts
• Desktop and mobile variants for h1 and h2
• Body text styles in multiple sizes
• Button, caption, and label text styles
• Complete configuration for:
  • Font sizes
  • Line heights
  • Font weights
  • Letter spacing
  • Text transforms

Font Families

• Source Sans 3 (Primary)
• Vollkorn (Secondary)

Contributing

For more information about contributing to this package, please contact the Papyrus UI team.