The p-ui-library logo.

Documentation

P-UI Library is a place where you can just pick any component you like and adjust it the way you want. This documentation is the place for you to find what you need.

P-UI Library is designed to be highly customizable, making it a great fit for a wide range of projects.

Whether you're using your own design system or libraries like Tailwind CSS, P-UI Library components provide the flexibility and functionality you need to create beautiful and functional user interfaces.

Please note that some of the components may have character entity reference rather than the actual character.

Accordion component

Accordion 1
Accordion 2
Accordion 3
import React, { useState } from 'react'; interface AccordionItem { id: number; title: string; content: string; } interface AccordionProps { items: AccordionItem[]; className: string; itemsCN: string, itemsTitleCN: string, itemsContentCN: string, } export default function AccordionItems({ items, className, itemsCN, itemsTitleCN, itemsContentCN, }: AccordionProps) { const [activeIndex, setActiveIndex] = useState(-1); const toggleAccordionItem = (index: number) =&gt; { if (index === activeIndex) { setActiveIndex(-1); } else { setActiveIndex(index); } }; const handleAccordionKeyDown = (event: React.KeyboardEvent, index: number) =&gt; { if (event.key === 'Enter') { toggleAccordionItem(index); } }; return ( <div> {items.map((item: AccordionItem) =&gt; ( <div> <div> toggleAccordionItem(item.id)} role="button" tabIndex={0} onKeyDown={(event) =&gt; handleAccordionKeyDown(event, item.id)} &gt; {item.title} </div> <div> {item.content} </div> </div> ))} </div> ); }

Button component

import React from 'react'; interface ButtonProps { text: string; disabled?: boolean; classNames?: string; click?: () =&gt; void; buttonType: 'submit' | 'reset' | 'button'; } export default function Button({ text, disabled, classNames, click, buttonType, }:ButtonProps) { return ( <button type="{buttonType}"> {text} </button> ); }

Card component

An illustrative of a curry
This is the title
This is a card subtitle
This is the card text content which can be much longer than other text.
This is the card without image
This is a card subtitle
This is the card text content which can be much longer than other text.
This is the card without image and subtitle
This is the card text content which can be much longer than other text.
import React, { ReactNode } from 'react' interface ButtonProps { buttonText: string buttonDisabled?: boolean buttonClassNames?: string buttonClick?: () =&gt; void buttonType: 'submit' | 'reset' | 'button' } interface CardProps extends ButtonProps { cardImage?: string cardTitle?: string cardSubTitle?: string cardText?: string } export default function Card ({ cardImage, cardTitle, cardSubTitle, cardText, buttonText, buttonClick, buttonDisabled, buttonType, buttonClassNames }: CardProps): ReactNode { return ( <div> {cardImage ? ( <div> <img alt="An illustrative of a curry" src="{cardImage}"> </div> ) : &lt;&gt;} {cardTitle ? ( <div> {cardTitle} </div> ) : null} {cardSubTitle ? ( <div> {cardSubTitle} </div> ) : null} {cardText ? ( <div> {cardText} </div> ) : null} <button type="{buttonType}"> {buttonText} </button> </div> ) }

Container component

import React, { ReactNode } from 'react'; interface ContainerProps { children: ReactNode, classNames: string; } export default function Container({ children, classNames }: ContainerProps) { return ( <div> {children} </div> ); }

Popin component

import React, { useState, ReactNode } from 'react'; interface ButtonProps { buttonText: string buttonDisabled?: boolean buttonClassNames?: string buttonType: 'submit' | 'reset' | 'button' } interface PopinProps extends ButtonProps { popinTitle?: string popinContent?: string | ReactNode } export default function Popin({ popinTitle, popinContent, buttonText, buttonDisabled, buttonClassNames, buttonType }: PopinProps): ReactNode { const [popinOpen, setPopinOpen] = useState(false); return ( &lt;&gt; <button type="{buttonType}"> { buttonDisabled ? undefined : setPopinOpen(!popinOpen); }} className={`${buttonClassNames} btn-default`}&gt;{buttonText}</button> {popinOpen ? ( &lt;&gt; <div> <button type="button"> { setPopinOpen(!popinOpen); }}&gt;✖</button> <h2>{popinTitle}</h2> {popinContent} </div> <div> { setPopinOpen(!popinOpen); }} aria-hidden="true" /&gt; ) : null} ); }</div>