Paper

A surface component used to display content with optional elevation and variants.

Hey, Fidely UI paper

import { Paper } from '@fidely-ui/react/paper'

export const PaperBasics = () => {
  return <Paper>Hey, Fidely UI paper</Paper>
}

Usage

import { Paper } from '@fidely-ui/react'

<Paper>Fidely UI Paper</Paper>

Elevation

Control the shadow depth of the Paper using the elevation prop.

Paper elevation (0)

Paper elevation (1)

Paper elevation (2)

Paper elevation (3)

Paper elevation (4)

import { Paper, Stack } from '@fidely-ui/react'

export const PaperElevation = () => {
  return (
    <Stack gap={2}>
      <Paper elevation={'0'}>Paper elevation (0)</Paper>
      <Paper elevation={'1'}>Paper elevation (1)</Paper>
      <Paper elevation={'2'}>Paper elevation (2)</Paper>
      <Paper elevation={'3'}>Paper elevation (3)</Paper>
      <Paper elevation={'4'}>Paper elevation (4)</Paper>
    </Stack>
  )
}

Variants

Change the appearance of the Paper using the variant prop.

Paper filled variant

Paper outline variant

import { Paper, Stack } from '@fidely-ui/react'

export const PaperVariant = () => {
  return (
    <Stack gap={2}>
      <Paper variant={'filled'}>Paper filled variant</Paper>
      <Paper variant={'outline'}>Paper outline variant</Paper>
    </Stack>
  )
}

Props

Paper

Prop	Type	Default	Description
`elevation`	`"0" \| "1" \| "2" \| "3" \| "4"`	`"0"`	Controls the shadow depth of the Paper component.
`variant`	`"filled" \| "outline"`	`"filled"`	Sets the visual style of the Paper.