Skip to main content

​
Usage

Paper is a container component that creates an elevated surface effect using shadows, borders, and background colors. It’s commonly used for cards, panels, and other elevated UI elements. 
import { Paper } from '@kivora/react';

<Paper>
  Content
</Paper>

​
Examples

​
Basic Paper

<Paper>
  <h3>Card Title</h3>
  <p>Card content goes here</p>
</Paper>

​
Custom Shadow

<Paper shadow="lg">
  <h3>Elevated Card</h3>
  <p>This card has a larger shadow</p>
</Paper>

​
With Border

<Paper withBorder>
  <h3>Bordered Card</h3>
  <p>This card has a subtle border</p>
</Paper>

​
Custom Padding and Radius

<Paper padding="lg" radius="xl">
  <h3>Spacious Card</h3>
  <p>With large padding and border radius</p>
</Paper>

​
No Shadow or Padding

<Paper shadow="none" padding="none" withBorder>
  <img src="/image.jpg" alt="Card image" />
  <div className="p-4">
    <h3>Image Card</h3>
    <p>Custom padding inside</p>
  </div>
</Paper>

​
Combination Example

<Paper 
  shadow="md" 
  radius="lg" 
  padding="xl" 
  withBorder
  className="max-w-md"
>
  <h2 className="text-xl font-bold mb-4">Welcome</h2>
  <p className="text-gray-600">This is a fully customized paper component.</p>
</Paper>

​
Props

​
shadow
'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'
default:"'sm'"
The shadow depth of the paper. Controls the elevation effect.
  • none: No shadow
  • xs: Extra small shadow
  • sm: Small shadow (default)
  • md: Medium shadow
  • lg: Large shadow
  • xl: Extra large shadow
​
radius
'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'
default:"'md'"
The border radius of the paper.
  • none: No border radius (square corners)
  • sm: Small radius
  • md: Medium radius (default)
  • lg: Large radius
  • xl: Extra large radius
  • full: Fully rounded (pill shape)
​
withBorder
boolean
default:"false"
Whether to display a subtle border around the paper.
​
padding
'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'
default:"'md'"
The internal padding of the paper.
  • none: No padding
  • xs: 0.5rem (8px)
  • sm: 0.75rem (12px)
  • md: 1rem (16px, default)
  • lg: 1.5rem (24px)
  • xl: 2rem (32px)
​
className
string
Additional CSS classes to apply to the paper.
​
ref
Ref<HTMLDivElement>
Ref forwarding is supported for the underlying div element.
​
...rest
HTMLAttributes<HTMLDivElement>
All other standard HTML div attributes are supported (onClick, onMouseEnter, etc.).

​
Styling

Paper uses CSS custom properties for theming:
  • Background: bg-card
  • Text color: text-card-foreground
  • Border color: border-border
These can be customized via your theme configuration.

Build docs developers (and LLMs) love

Get started for freeTalk to us