Pillar UI React Paper Component documentation
The Paper component is a versatile container component used to display content. It can be customized with different background colors, text colors, corners, padding, spacing, shadow, and more.
Components:
Type
import
import { Pillar UI React Paper Component } from '@pillar-ui/core'
Usage
import { Paper } from '@pillar-ui/core'
function(){
return(
<Paper
background="gray-200"
color="gray-700"
corner="md"
padding="md"
shadow="sm"
width="full"
>
<p>Some content goes here...</p>
</Paper>
)
}
Props
The Paper component accepts the following props:
Background
- Type: string
- Default: none
- Options:
danger
|warning
|success
|primary
|bg
|primary
|secondary
|opacity
The background prop determines the background color of the Paper component. It accepts any of the Color types defined in our library or (Color-Step) (for 12 different levels of the color). If not provided, it defaults to the white color.
Example usage:
function PaperBackgrounds(){
return(
<Paper
as={Flex}
gap="sm"
className="playground"
borderColor="opa-6"
="sm"
background="bg-3"
corner="sm"
>
<Paper borderColor="opa-8" width="30-char" ratio='1' />
<Paper borderColor="opa-8" width="30-char" ratio='1' background="dan" />
<Paper borderColor="opa-8" width="30-char" ratio='1' background="dan-5" />
<Paper borderColor="opa-8" width="30-char" ratio='1' background="dan-10" />
<Paper borderColor="opa-8" width="30-char" ratio='1' background="suc-5" />
<Paper borderColor="opa-8" width="30-char" ratio='1' background="suc-8" />
<Paper borderColor="opa-8" width="30-char" ratio='1' background="suc-11" />
<Paper borderColor="opa-8" width="30-char" ratio='1' background="pri-12" />
<Paper borderColor="opa-8" width="30-char" ratio='1' background="pri-10" />
<Paper borderColor="opa-8" width="30-char" ratio='1' background="pri-8" />
<Paper borderColor="opa-8" width="30-char" ratio='1' background="bg-1" />
<Paper borderColor="opa-8" width="30-char" ratio='1' background="bg-4" />
<Paper borderColor="opa-8" width="30-char" ratio='1' background="bg-8" />
<Paper borderColor="opa-8" width="30-char" ratio='1' background="war-4" />
<Paper borderColor="opa-8" width="30-char" ratio='1' background="war-8" />
<Paper borderColor="opa-8" width="30-char" ratio='1' background="war-12" />
<Paper borderColor="opa-8" width="30-char" ratio='1' background="sec-3" />
<Paper borderColor="opa-8" width="30-char" ratio='1' background="sec-8" />
<Paper borderColor="opa-8" width="30-char" ratio='1' background="sec-12" />
<Paper borderColor="opa-8" width="30-char" ratio='1' background="opa-4" />
<Paper borderColor="opa-8" width="30-char" ratio='1' background="opa-7" />
<Paper borderColor="opa-8" width="30-char" ratio='1' background="opa-11" />
</Paper>
)
}
Color
- Type: string
- Default:
primary
- Options:
danger
|warning
|success
|bg
|primary
|secondary
The color prop determines the text color of the Paper component. It accepts any of the Color types defined in our library or (Color-Step) (for 12 different levels of the color). If not provided, it inherit
the of its parent.
We recommend using the color from step 11 or 12 because it provides high contrast against the background. It's important to always check color contrast when changing the background or paper color.
Example usage:
function PaperColors() {
return (
<Paper
as={Flex}
gap="sm"
direction="column"
className="playground"
borderColor="opa-6"
="sm"
background="bg-3"
corner="sm"
>
<Paper background="bg-5" ="xs">
Hello
</Paper>
<Paper background="bg-5" ="xs" color="dan">
Hello
</Paper>
<Paper background="bg-5" ="xs" color="dan-5">
Hello
</Paper>
<Paper background="bg-5" ="xs" color="dan-10">
Hello
</Paper>
<Paper background="bg-5" ="xs" color="suc-5">
Hello
</Paper>
<Paper background="bg-5" ="xs" color="suc-8">
Hello
</Paper>
<Paper background="bg-5" ="xs" color="suc-11">
Hello
</Paper>
<Paper background="bg-5" ="xs" color="pri-12">
Hello
</Paper>
<Paper background="bg-5" ="xs" color="pri-10">
Hello
</Paper>
<Paper background="bg-5" ="xs" color="pri-8">
Hello
</Paper>
<Paper background="bg-5" ="xs" color="bg-1">
Hello
</Paper>
<Paper background="bg-5" ="xs" color="bg-4">
Hello
</Paper>
<Paper background="bg-5" ="xs" color="bg-8">
Hello
</Paper>
<Paper background="bg-5" ="xs" color="war-4">
Hello
</Paper>
<Paper background="bg-5" ="xs" color="war-8">
Hello
</Paper>
<Paper background="bg-5" ="xs" color="war-12">
Hello
</Paper>
<Paper background="bg-5" ="xs" color="sec-3">
Hello
</Paper>
<Paper background="bg-5" ="xs" color="sec-8">
Hello
</Paper>
<Paper background="bg-5" ="xs" color="sec-12">
Hello
</Paper>
<Paper background="bg-5" ="xs" color="opa-4">
Hello
</Paper>
<Paper background="bg-5" ="xs" color="opa-7">
Hello
</Paper>
<Paper background="bg-5" ="xs" height="60px" color="opa-11">
Hello
</Paper>
</Paper>
)
}
Corner
corner Type: string Default: md Options: sharp | xs | sm | md | lg | xl | circle | full
The corner prop determines the border radius of the Paper component. It accepts any of the Corner types defined in our library, including (sharp, xs, sm, md, lg, xl, circle, full). If not provided, it defaults to the md corner.
Example usage:
function PaperCorners() {
return (
<>
<Paper p="xs" background="bg-5" corner="sharp">
Hello World
</Paper>
<Paper p="xs" background="bg-5" corner="xs">
Hello World
</Paper>
<Paper p="xs" background="bg-5" corner="md">
Hello World
</Paper>
<Paper p="xs" background="bg-5" corner="lg">
Hello World
</Paper>
<Paper p="xs" background="bg-5" corner="xl">
Hello World
</Paper>
<Paper p="xs" background="bg-5" corner="circle">
Hello World
</Paper>
<Paper p="xs" background="bg-5" corner="full">
Hello World
</Paper>
<Paper p="xs" background="bg-5" corner="blob-1">
Hello World
</Paper>
<Paper p="xs" background="bg-5" corner="blob-2">
Hello World
</Paper>
<Paper p="xs" background="bg-5" corner="blob-3">
Hello World
</Paper>
<Paper p="xs" background="bg-5" corner="blob-4">
Hello World
</Paper>
<Paper p="xs" background="bg-5" corner="blob-5">
Hello World
</Paper>
<Paper p="xs" background="bg-5" corner="hand-1">
Hello World
</Paper>
<Paper p="xs" background="bg-5" corner="hand-2">
Hello World
</Paper>
<Paper p="xs" background="bg-5" corner="hand-3">
Hello World
</Paper>
<Paper p="xs" background="bg-5" corner="hand-4">
Hello World
</Paper>
<Paper p="xs" background="bg-5" corner="hand-5">
Hello World
</Paper>
<Paper p="xs" background="bg-5" corner="hand-6">
Hello World
</Paper>
</>
)
}
Padding
padding Type: string Default: md Options: 2xs | xs | sm | md | lg | xl
The padding prop determines the padding size of the Paper component. It accepts any of the Size types defined in our library. If not provided, it defaults to the md padding.
Example usage:
function PaperPadding() {
return (
<Paper
as={Flex}
gap="sm"
direction="column"
className="playground"
borderColor="opa-6"
="sm"
background="bg-3"
corner="sm"
>
<Paper
style={{ display: 'flow-root' }}
className="u_center"
width="30-char"
ratio="16-9"
background="bg-5"
="2xl"
>
2xl Margin
</Paper>
<Paper
style={{ display: 'flow-root' }}
className="u_center"
width="30-char"
ratio="16-9"
background="bg-5"
="xl"
>
xl Margin
</Paper>
<Paper
style={{ display: 'flow-root' }}
className="u_center"
width="30-char"
ratio="16-9"
background="bg-5"
="lg"
>
lg Margin
</Paper>
<Paper
style={{ display: 'flow-root' }}
className="u_center"
width="30-char"
ratio="16-9"
background="bg-5"
="md"
>
md Margin
</Paper>
<Paper className="u_center" width="30-char" ratio="16-9" background="bg-5" ="sm">
sm Margin
</Paper>
<Paper className="u_center" width="30-char" ratio="16-9" background="bg-5" ="xs">
xs Margin
</Paper>
<Paper className="u_center" width="30-char" ratio="16-9" background="bg-5" ="2xs">
2xs Margin
</Paper>
</Paper>
)
}
Margin
margin Type: string Default: md Options: 2xs | xs | sm | md | lg | xl
The margin prop determines the margin size of the Paper component. It accepts any of the Size types defined in our library. If not provided, it defaults to the md padding.
Example usage:
function PaperMargin() {
return (
<Paper className="playground" borderColor="opa-6" ="sm" background="bg-3" corner="sm">
<Paper className="u_center" width="30-char" ratio="16-9" background="bg-5" ="2xl">
2xl Margin
</Paper>
<Paper className="u_center" width="30-char" ratio="16-9" background="bg-5" ="xl">
xl Margin
</Paper>
<Paper className="u_center" width="30-char" ratio="16-9" background="bg-5" ="lg">
lg Margin
</Paper>
<Paper className="u_center" width="30-char" ratio="16-9" background="bg-5" ="md">
md Margin
</Paper>
<Paper className="u_center" width="30-char" ratio="16-9" background="bg-5" ="sm">
sm Margin
</Paper>
<Paper className="u_center" width="30-char" ratio="16-9" background="bg-5" ="xs">
xs Margin
</Paper>
<Paper className="u_center" width="30-char" ratio="16-9" background="bg-5" ="2xs">
2xs Margin
</Paper>
</Paper>
)
}
Flow
flow Type: string Default: md Options: xs | sm | md | lg | xl The flow prop determines the space between the Paper and its surrounding elements. It accepts any of the Size types defined in our library, excluding (2xl, 2xs). If not provided, it defaults to the md spacing.
Example usage:
function PaperSpacing() {
return (
<div>
<Paper background="bg-5" flow="xs">
<div>Flow xs</div>
<div>Flow xs</div>
<div>Flow xs</div>
</Paper>
<Paper background="bg-5" flow="sm">
<div>Flow sm</div>
<div>Flow sm</div>
<div>Flow sm</div>
</Paper>
<Paper background="bg-5" flow="md">
<div>Flow md</div>
<div>Flow md</div>
<div>Flow md</div>
</Paper>
<Paper background="bg-5" flow="lg">
<div>Flow lg</div>
<div>Flow lg</div>
<div>Flow lg</div>
</Paper>
<Paper background="bg-5" flow="xl">
<div>Flow xl</div>
<div>Flow xl</div>
<div>Flow xl</div>
</Paper>
</div>
)
}
Shadow
shadow Type: string Default: none Options: none | xs | sm | md | lg | xl The shadow prop determines the shadow of the Paper. It accepts any of the Shadow types defined in our library, including (none, xs, sm, md, lg, xl). If not provided, it defaults to the none shadow.
Example usage:
function PaperShadow() {
return (
<>
<Paper p="sm" background="bg-5" shadow="xs">
Hello
</Paper>
<Paper p="sm" background="bg-5" shadow="sm">
Hello
</Paper>
<Paper p="sm" background="bg-5" shadow="md">
Hello
</Paper>
<Paper p="sm" background="bg-5" shadow="lg">
Hello
</Paper>
<Paper p="sm" background="bg-5" shadow="xl">
Hello
</Paper>
</>
)
}
Width
The Paper component provides a convenient width prop for controlling its horizontal dimensions. This prop accepts specific string values that correspond to predefined width classes. Available Width Classes:
| Class Name | Description |
| ------------- | --------------------------------------------------------------------------- |
| 30-char
| Sets the width to a minimum of 30 characters or 100%, whichever is smaller. |
| 45-char
| Sets the width to a minimum of 45 characters or 100%, whichever is smaller. |
| 60-char
| Sets the width to a minimum of 60 characters or 100%, whichever is smaller. |
| 75-char
| Sets the width to a minimum of 75 characters or 100%, whichever is smaller. |
| 90-char
| Sets the width to a minimum of 90 characters or 100%, whichever is smaller. |
| half
| Sets the width to 50%. |
| one-third
| Sets the width to 33.3%. |
| full
| Sets the width to 100%. |
| fit-content
| Sets the width to the content's intrinsic width. |
Example Usage:
function PaperWidth() {
return (
<>
<Paper background="bg-5" width="30-char">
This Paper component will be 30 characters wide This Paper component will be 30 characters wide This Paper
component will be 30 characters wide.
</Paper>
<Paper background="bg-5" width="60-char">
This Paper component will be 60 characters wide This Paper component will be 60 characters wide This Paper
component will be 60 characters wide.
</Paper>
<Paper background="bg-5" width="90-char">
This Paper component will be 90 characters wide This Paper component will be 90 characters wide This Paper
component will be 90 characters wide.
</Paper>
<Paper background="bg-5" width="50">
This Paper component will take up half of its parent container This Paper component will take up half of its
parent container This Paper component will take up half of its parent container.
</Paper>
</>
)
}
How it Works:
The prop leverage the CSS min()
function to ensure the Paper
component never exceeds the available space within its parent container. This makes the component responsive across different screen sizes and viewport widths.
Choosing the Right Class:
- Characters (
ch
): Ideal for controlling line length and readability of text content. - (half, one-threadId,full): Useful for proportional layouts where the
Paper
component should occupy a relative portion of its parent. fit-content
: Lets the content itself determine the width, which is handy for elements with varying content sizes.
How it Works:
function OtherComponentOrHTMLExample() {
return (
<>
<div className="u_width-60-char">This div will be 60 characters wide.</div>
<Flex className="u_width-60-char" justify="end">
This div will be 60 characters wide.
</Flex>
</>
)
}
Use Case
In this section, you will provide an overview of the use case that this document is addressing. You will describe the problem that the code/library solves, and provide a high-level overview of how it works.
Troubleshooting
In this section, you will provide guidance on troubleshooting common issues that may arise when using the code/library. You will provide solutions to common problems and explain how to debug issues.
Conclusion
In this section, you will summarize the main points covered in the document. You will reiterate the use case for the code/library, highlight the key features, and provide a call to action for users to get started.