@nimbleuikit/atoms

The '@nimbleuikit/atoms' package is part of the Nimble UI Kit. It includes a collection of versatile and reusable components for React projects. These components, including the 'Box' component, are built using styled-components and styled-system. This approach simplifies the usage of common layout, typography, and style props, making it easier and faster to build responsive UIs.

Installation

You can install the '@nimbleuikit/atoms' package using either npm or yarn.

Using npm:

npm install @nimbleuikit/atoms

Or, using yarn:

yarn add @nimbleuikit/atoms

Usage

First, import the desired component from the package. Here is an example with the 'Box' component:

import { Box } from "@nimbleuikit/atoms";

Then, you can use the 'Box' component in your React components with the desired props:

import React from "react";
import { Box } from "@nimbleuikit/atoms";

const ExampleComponent = () => (
  <Box
    p={3}
    m={4}
    bg="primary"
    color="white"
    width={1 / 2}
    borderRadius={4}
    textAlign="center"
  >
    Hello, Box!
  </Box>
);

export default ExampleComponent;

In this example, the Box component is created with a padding of '3', margin of '4', a primary background color, white text color, width set to 50% of its parent, a border radius of '4', and text aligned to the center.

Please refer to the component's API docs for a comprehensive list of props you can use.