LogoPINUS
Components Documentation
Table of Content
AccordionButtonCardCommittee CardGuide CardSelectSkeletonTitle Header

Accordion

- Accordion
- AccordionItem_1
- AccordionTrigger
- AccordionContent
- AccordionItem_1
- AccordionItem_2
- AccordionTrigger
- AccordionContent
- AccordionItem_2

Accordion Details:

  • Type:
    • Single: Only one can be open at a time; opening a new one closes the previous. Can be collapsible or not.
    • Multiple: Allows multiple to be open simultaneously.
  • Props:
    • value: Gets the opened accordion(s) (string or string[] for multiple).
    • onValueChange: Setter for opened accordion(s).
    • defaultValue: Initial value(s).
    • collapsible: Used only for single type.
    • type: single or multiple.
Example:

BlurFade

Make the text on web launch pretty. Reference

Props:

  • duration: Time (in seconds) for the animation.
  • delay: Time (in seconds) before the animation starts.
  • offset: Animation offset.
  • direction: Direction of animation (up, down, left, right).
  • inView: Triggers animation when the component is in view.
  • inViewMargin: Margin for the in-view trigger.
  • blur: Amount of blur applied during the animation.
Example:
ANJAY

Button

Props:

  • variant: blue, yellow, red, black.
  • rounding: none, sm, md, lg, xl, full.
  • onClick: Function.
  • outline: true or false.
  • size: sm, md, lg.
Example:
PRESSED: 0

Card

Card Structure:

- CardImage
- CardHeader
- CardTitle
- CardDescription
- CardFooter
- CardBadge/CardTags

CardImage Props:

  • src: Image source.
  • alt: Alt text.
  • width/height: Dimensions.
Example:
random
PINUS Open Day

Annual event for prospective students to know more about studies and life in NUS.

Ambassadors
Welfare
random
Humans of PINUS

By Babono on 20 Nov 2024

Annual event to welcome our matriculated freshies into NUS.

tags
WELFARE
ORIENTATION

Committee Card

CommCardGroup Structure:

- CommCard
- CommCardImage
- CommCardHeader
- CommCardTitle
- CommCardDescription

CommCardGroup Props:

  • columns: 2 or 3.
  • gap: Spacing between cards.
Example:
Column 3:
random
Cullen Sean

President

random
Hastuti Hera H

Vice President

random
Charly Chandra

Financial Secretary

random
Puspa Tania Zahrani

Community Affairs Secretary

random
Karen Natalie

General Secretary

random
Charly Chandra

Financial Secretary

random
Puspa Tania Zahrani

Community Affairs Secretary

random
Karen Natalie

General Secretary

Column 2:
random
Cullen Sean

President

random
Hastuti Hera H

Vice President

random
Charly Chandra

Financial Secretary

random
Puspa Tania Zahrani

Community Affairs Secretary

random
Karen Natalie

General Secretary

Guide Card

GuideCard Structure:

- GuideCard
- GuideCardDecoration
- GuideCardBody
- GuideCardTitle
- GuideCardText

GuideCardDecoration Props:

  • color: blue, yellow, red, black.
  • size: Number.
Example:
Apply for NUS Housing 🏠
Halls of Residence

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

House

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Select

Select Structure:

- Select
- SelectTrigger
- SelectValue
- SelectContent
- SelectGroup
- SelectLabel
- SelectItem

Props:

  • value: Gets the selected value.
  • onValueChange: Setter for selection.
  • defaultValue: Initial value.
  • defaultOpen: Boolean for default open state.
  • open: Controlled open state.
  • onOpenChange: Event handler for open state changes.
Example:
SELECTED VALUE:

Skeleton

Make the loading state look nicer, act as a placeholder whilst fetching data.

Props:

  • skeletonColor: Options are blue, yellow, red, black, or muted.
Example:
Example Implementation:
Title 1

Description

1

tags
WELFARE
ORIENTATION
Title 2

Description

2

tags
WELFARE
ORIENTATION

Title Header

Adds 20px to the text's total width for an underline

Props:

  • text: The text content.
  • color: blue, yellow, red, black.
  • textClassName: Custom class for text.
  • underlineClassName: Custom class for underline/decoration.
Example:
FAQs
Our Committee
Hello World