@nature-ui/layout
TypeScript icon, indicating that this package has built-in type declarations

2.2.13 • Public • Published

@nature-ui/layout

A set of layout primitives that make it super easy to manage page and components.

Installation

yarn add @nature-ui/layout

# or

npm i @nature-ui/layout

Import Components

import { Box, Stack, Badge, Divider } from '@nature-ui/layout';

Usage

Box is just a div on steroids. It gives you the ability to pass style props

<Box className='text-blue-500 hover:bg-red-600 hover:text-white'>
  Welcome to Box
</Box>

Stack is used to group elements and apply a spacing between them. It stacks it's children vertically by default.

<Stack spacing='20px'>
  <Box>Box 1</Box>
  <Box>Box 2</Box>
</Stack>

Badge is used to render a badge. It can comes in different variants and color schemes as defined in the theme.components.Badge

<Badge variant='solid' color='blue-500'>
  Verified <FaCheck />
</Badge>

Package Sidebar

Install

npm i @nature-ui/layout

Weekly Downloads

3

Version

2.2.13

License

MIT

Unpacked Size

576 kB

Total Files

24

Last publish

Collaborators

  • dnature