Paperpolymorphic

Renders white or dark background depending on color scheme

Import

Source

View source code

Docs

Edit this page

Package

@asuikit/core

Usage

Paper component renders white (or theme.colors.dark[7] for dark theme) background with shadow, border-radius and padding from theme.

Paper is the most basic ui component

Use it to create cards, dropdowns, modals and other components that require background with shadow

Shadow

Radius

Padding

With border

import { Text, Paper } from '@asuikit/core';

function Demo() {
  return (
    <Paper shadow="xs" p="md">
      <Text>Paper is the most basic ui component</Text>
      <Text>
        Use it to create cards, dropdowns, modals and other components that require background
        with shadow
      </Text>
    </Paper>
  );
}

Polymorphic component

Paper is a polymorphic component, you can change root element:

import { Paper } from '@asuikit/core';

function Demo() {
  return (
    <Paper component="a" href="https://srcalienswap.github.io/as-uikit/core/">
      Anchor element
    </Paper>
  );
}

Get ref

import { useRef } from 'react';
import { Paper } from '@asuikit/core';

function Demo() {
  const ref = useRef<HTMLDivElement>(null);
  return <Paper ref={ref} />;
}

Go back

FocusTrap – @asuikit/core

Up next

Portal – @asuikit/core

Paper component props

Name	Type	Description
children	ReactNode	Paper children
radius	number \| "xs" \| "sm" \| "md" \| "lg" \| "xl"	Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default
shadow	MantineShadow	Predefined box-shadow from theme.shadows (xs, sm, md, lg, xl) or any valid css box-shadow property
withBorder	boolean	Adds border styles

Build fully functional accessible web applications faster than ever

About

Contribute About Mantine Changelog Releases

Community

Chat on Discord Follow on Twitter Follow on GitHub GitHub discussions

Project

Mantine UI Documentation GitHub organization npm organization

Built by Vitaly Rtishchev and these awesome people

Join Discord community

Follow Mantine on Twitter