@chakra-ui/anatomy

What is @chakra-ui/anatomy?

@chakra-ui/anatomy is a utility package from Chakra UI that provides a set of predefined anatomy objects for various UI components. These anatomy objects help in creating consistent and accessible component structures by defining the parts and their respective styles.

What are @chakra-ui/anatomy's main functionalities?

Button Anatomy

The button anatomy defines the parts of a button component, such as 'container', 'icon', and 'label'. This helps in creating a consistent button structure across the application.

const { buttonAnatomy } = require('@chakra-ui/anatomy');

const parts = buttonAnatomy.keys;
console.log(parts); // ['container', 'icon', 'label']

Input Anatomy

The input anatomy defines the parts of an input component, such as 'addon', 'field', and 'element'. This ensures a consistent structure for input components.

const { inputAnatomy } = require('@chakra-ui/anatomy');

const parts = inputAnatomy.keys;
console.log(parts); // ['addon', 'field', 'element']

Modal Anatomy

The modal anatomy defines the parts of a modal component, such as 'overlay', 'dialogContainer', 'dialog', 'header', 'closeButton', 'body', and 'footer'. This helps in creating a consistent modal structure.

const { modalAnatomy } = require('@chakra-ui/anatomy');

const parts = modalAnatomy.keys;
console.log(parts); // ['overlay', 'dialogContainer', 'dialog', 'header', 'closeButton', 'body', 'footer']

Other packages similar to @chakra-ui/anatomy

react-bootstrap

React-Bootstrap is a popular UI library that provides pre-styled components based on Bootstrap. It offers a wide range of components with predefined structures and styles, similar to how @chakra-ui/anatomy provides predefined anatomy objects for consistent component structures.

material-ui

Material-UI is a comprehensive UI library for React that implements Google's Material Design guidelines. It offers a variety of components with predefined structures and styles, similar to the anatomy objects provided by @chakra-ui/anatomy.

antd

Ant Design (antd) is a UI library for React that provides a set of high-quality components with predefined structures and styles. Like @chakra-ui/anatomy, it helps in creating consistent and accessible UI components.

README

@chakra-ui/anatomy

This package declares the anatomy for the Chakra UI components.

It was inspired the ::part() selector from the W3C CSS Shadow Parts Draft with data-attributes.

This is an internal utility, not intended for public usage.

Installation

yarn add @chakra-ui/anatomy
# or
npm i @chakra-ui/anatomy

Contribution

Yes please! See the contributing guidelines for details.

Licence

This project is licensed under the terms of the MIT license.