### Install Atomize and React Transition Group with Yarn

Source: https://atomizecode.com/react/setup

This command installs the core Atomize UI library and its peer dependency, `react-transition-group`, using the Yarn package manager. It should be executed in the root directory of your project's terminal to set up the necessary packages.

```Shell
yarn add atomize react-transition-group
```

--------------------------------

### Apply Global Style Reset in React with Atomize

Source: https://atomizecode.com/react/setup

This example demonstrates how to integrate Atomize's `StyleReset` component into your main React application component. Placing `StyleReset` within the root component ensures that default browser styles are consistently normalized across your entire application, providing a clean and predictable base for Atomize's styling.

```JavaScript
import React from 'react';
import { StyleReset } from 'atomize';
import App from './src/App';

export default function Main() {
  return (
    <>
      <StyleReset />
      <App />
    </>
  );
}
```

--------------------------------

### Customize Theme and Apply Style Reset in React with Atomize

Source: https://atomizecode.com/react/setup

This snippet illustrates how to use Atomize's `ThemeProvider` component to define and apply a custom theme, such as custom colors, to your React application. It also includes `StyleReset` for consistent global styling. This approach allows for centralized theme management and easy customization of your UI components.

```JavaScript
import React from 'react';
import { ThemeProvider, StyleReset } from 'atomize';
import App from './src/App';

const theme = {
  colors: {
    primary: 'tomato',
    accent: 'yellow',
  },
};

export default function Main() {
  return (
    <ThemeProvider theme={theme}>
      <StyleReset />
      <App />
    </ThemeProvider>
  );
}
```

--------------------------------

### Basic Atomize Input Component Usage

Source: https://atomizecode.com/react/atoms

Shows a minimal example of how to import and use the `Input` component from Atomize UI, demonstrating a basic placeholder.

```JSX
import { Input } from "atomize";

const BasicInput = () => {
  return (
    <Input placeholder="Basic Input" />
  );
}
```

--------------------------------

### Atomize Responsive Prop Usage Examples

Source: https://atomizecode.com/react/responsive

Provides practical examples of applying responsive styles in Atomize using prop arrays. Demonstrates how to set breakpoint-specific values for properties like padding (p) and border, including nested properties for specific sides (t for top, b for bottom). This showcases direct application within JSX.

```JSX
// Padding
p={{ xs: '1rem', md: '4rem' }}
// Padding Top
p={{ t: {xs: '1rem', md: '4rem' }}}
// border
border={{ xs: '1px solid', lg: '2px dashed' }}
// Border Top & Bottom
border={
t: { xs: '1px solid', lg: '2px dashed' }
b: { xs: '1px solid', lg: '2px dashed' }
}
```

--------------------------------

### Styling Atomize Buttons with Icons

Source: https://atomizecode.com/react/atoms

Demonstrates how to create styled buttons using Atomize UI, incorporating icons and applying various utility properties like height, width, background, hover background, border radius, and margin. The first button is a reconstructed example to ensure valid JSX.

```JSX
<Div>
  <Button rounded="lg" m={{ r: "1rem" }}>
    <Icon name="CameraSolid" size="20px" color="info700" />
  </Button>

  // Message Button
  <Button
    h="2.5rem"
    w="2.5rem"
    bg="success300"
    hoverBg="success400"
    rounded="lg"
    m={{ r: "1rem" }}
  >
    <Icon name="MessageSolid" size="20px" color="success700" />
  </Button>

  // Attachment Button
  <Button
    h="2.5rem"
    w="2.5rem"
    bg="info300"
    hoverBg="info400"
    rounded="lg"
    m={{ r: "1rem" }}
  >
    <Icon name="Attachment" size="20px" color="info700" />
  </Button>
</Div>
```

--------------------------------

### Managing Atomize Radiobox State in React

Source: https://atomizecode.com/react/atoms

Provides an example of how to manage the checked state of Atomize `Radiobox` components using React class components, demonstrating `onChange` handlers and conditional `checked` props. The snippet is truncated from the original source.

```JSX
import { Radiobox, Label, Div } from "atomize";

class ManagingRadioboxWithState extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedCountValue: 1
    };
    this.toggleSelectedCount = this.toggleSelectedCount.bind(this);
  }

  toggleSelectedCount(value) {
    this.setState({
      selectedCountValue: value,
    })
  }

  render() {
    const { selectedCountValue} = this.state;
    return (
      <Div d="flex">
        <
```

--------------------------------

### Add Custom Shadows to Atomize Theme

Source: https://atomizecode.com/react/theme

This example illustrates how to extend the default shadow values available in Atomize UI by defining a new custom shadow within the theme object. The `ThemeProvider` is used to make this new shadow available, allowing components to reference it by its defined name.

```javascript
import {
  ThemeProvider,
  Div,
  Row,
  Col } from "atomize";

const theme = {
  shadows: {
    "new-shadow": "0 16px 24px -2px rgba(0, 0, 0, 0.08)"
  }
};

ReactDOM.render(
  <ThemeProvider theme={theme}>
    <Div
      h="3.5rem"
      p={{ x: "1rem" }}
      shadow="new-shadow"
      rounded="lg"
      d="flex"
      align="center"
      justify="center"
      textColor="medium"
    >
      New Shadow
    </Div>
  </ThemeProvider>,
  mountNode
);
```

--------------------------------

### Implement Atomizecode Row and Col for Grid Layout in React

Source: https://atomizecode.com/react/grid

Illustrates the usage of `Row` and `Col` components from Atomizecode to create a responsive flexbox-based grid layout in a React application. This example shows a basic 12-column grid division with two columns of sizes 5 and 7, demonstrating content alignment within the grid.

```JavaScript
import { Row, Col, Div } from "atomize";

ReactDOM.render(
<Row>
<Col size="5">
<Div p="1rem" bg="warning500">
This is 5 of 12
</Div>
</Col>
<Col size="7">
<Div p="1rem" bg="warning500">
This is 7 of 12
</Div>
</Col>
</Row>
, mountNode
);
```

--------------------------------

### Customize Component Transitions in Atomize Theme

Source: https://atomizecode.com/react/theme

This example shows how to define a custom transition property within the Atomize UI theme and apply it to a component for animated effects. It includes a React class component that toggles a `transform` style with a custom `transition` value, demonstrating a basic animation.

```javascript
import { Div, Text, Tag, Row, Col, ThemeProvider } from "atomize";

const theme = {
  transition: {
    custom: "transform 0.8s linear"
  }
};

class Transition extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      animate: false
    };
    this.toggleState = this.toggleState.bind(this);
  }

  componentDidMount() {
    setInterval(this.toggleState, 1000);
  }

  toggleState() {
    const { animate } = this.state;
    this.setState({ animate: !animate });
  }

  render() {
    const { animate } = this.state;
    return(
      <ThemeProvider theme={theme}>
        <Div
          h="3rem"
          w="3rem"
          m={{ b: "4rem" }}
          rounded="lg"
          bg="brand200"
          style={{
            transform: animate
              ? "translateX(20rem)"
              : "translateX(0)"
          }}
          transition="custom"
        />
      </ThemeProvider>
    );
  }
}

ReactDOM.render(<Transition />, mountNode);
```

--------------------------------

### Configure Custom Font Sizes in Atomize Theme

Source: https://atomizecode.com/react/theme

This example shows how to add a custom font size and its corresponding line height to the Atomize UI theme. By defining new entries within the `textSize.size` and `textSize.height` properties of the theme, you can introduce new text sizing options for `Text` components.

```javascript
import { Text, ThemeProvider } from "atomize";

const theme = {
  textSize: {
    size: {
      customSize: "25px"
    },
    height: {
      customSize: "34px"
    }
  }
};

ReactDOM.render(
  <ThemeProvider theme={theme}>
    <Text textSize="customSize">Custom Text Size</Text>
  </ThemeProvider>,
  mountNode
);
```

--------------------------------

### Creating a Div Component with Atomize

Source: https://atomizecode.com/react/atoms

Illustrates how to import and use the Div component from the Atomize UI library, applying various styling props such as background color, display type, alignment, and padding to create a styled container.

```JavaScript
import { Div } from "atomize";

<Div
  bg="gray200"
  d="flex"
  align="center"
  p="1rem"
>
  This is the div
</Div>
```

--------------------------------

### Atomize Anchor Component API Documentation

Source: https://atomizecode.com/react/atoms

Comprehensive API documentation for the Atomize Anchor component, detailing all available properties, their types, and default values. This includes options for layout, background, and hover effects.

```APIDOC
Anchor Component Props:

p: string | object (default: -)
  - Padding utility prop.
m: string | object (default: -)
  - Margin utility prop.
d: string (default: -)
  - Display utility prop.
order: number (default: -)
  - Flex order utility prop.
bg: string (default: -)
  - Background color utility prop.
hoverBg: string (default: -)
  - Background color on hover utility prop.
```

--------------------------------

### Scroll to Target Element using AtomizeCode scrollTo

Source: https://atomizecode.com/react/functions

Demonstrates how to use the `scrollTo` function from AtomizeCode to scroll to a target element identified by its ID. This example shows a basic scroll without custom offset or duration.

```JavaScript
import { Button, scrollTo } from "atomize";

const YellowButton = () => {
  return (
    <Button
      id="blueButton"
      onClick={() => scrollTo("#yellowButton")}
      bg="info700"
    >
      Scroll To Yellow Button
    </Button>
  )
}
```

--------------------------------

### Atomize Image Component API Documentation

Source: https://atomizecode.com/react/atoms

Comprehensive API documentation for the Atomize Image component, detailing all available properties, their types, and default values. This includes layout, sizing, border, shadow, and positioning options.

```APIDOC
Image Component Props:

p: string | object (default: -)
  - Padding utility prop.
m: string | object (default: -)
  - Margin utility prop.
d: string (default: -)
  - Display utility prop.
flexGrow: number (default: -)
  - Flex grow utility prop.
order: number (default: -)
  - Flex order utility prop.
rounded: string | number (default: -)
  - Border radius utility prop.
h: string | number (default: -)
  - Height utility prop.
maxH: string | number (default: -)
  - Max height utility prop.
minH: string | number (default: -)
  - Min height utility prop.
w: string | number (default: 100%)
  - Width utility prop.
maxW: string | number (default: -)
  - Max width utility prop.
minW: string | number (default: -)
  - Min width utility prop.
border: string | number (default: -)
  - Border utility prop.
borderColor: string (default: -)
  - Border color utility prop.
hoverBorderColor: string (default: -)
  - Border color on hover utility prop.
shadow: string | number (default: -)
  - Shadow utility prop.
hoverShadow: string | number (default: -)
  - Shadow on hover utility prop.
position: string (default: -)
  - Position utility prop.
top: string | number (default: -)
  - Top position utility prop.
left: string | number (default: -)
  - Left position utility prop.
right: string | number (default: -)
  - Right position utility prop.
bottom: string | number (default: -)
  - Bottom position utility prop.
transform: string (default: -)
  - Transform utility prop.
transition: string (default: -)
  - Transition utility prop.
cursor: string (default: -)
  - Cursor style utility prop.
```

--------------------------------

### Atomize Switch Component API Documentation

Source: https://atomizecode.com/react/atoms

Comprehensive API documentation for the Atomize Switch component, detailing all available properties, their types, and default values. This includes styling, state management, and behavioral options.

```APIDOC
Switch Component Props:

isLoading: boolean (default: false)
  - Controls the loading state of the switch.
disabled: boolean (default: false)
  - Disables the switch interaction.
activeColor: string (default: info700)
  - Color of the switch when active.
inactiveColor: string (default: gray500)
  - Color of the switch when inactive.
activeShadow: number (default: 4)
  - Shadow applied to the switch when active.
inactiveShadow: number (default: 0)
  - Shadow applied to the switch when inactive.
m: object (default: { r: "1rem" })
  - Margin utility prop for spacing.
cursor: string (default: pointer)
  - Cursor style when hovering over the switch.
```

--------------------------------

### Basic Dropdown Component Implementation in Atomize

Source: https://atomizecode.com/react/molecules

This JavaScript code demonstrates the basic usage of the Atomize Dropdown component. It shows how to define a menu list using `Div` and `Anchor` components and how to control the dropdown's visibility using React state and the `isOpen` and `onClick` props.

```JavaScript
import { Dropdown, Anchor } from "atomize";

const menuList = (
  <Div>
    {["Option 1", "Option 2", "Option 3"].map((name, index) => (
      <Anchor d="block" p={{ y: "0.25rem" }}>
        {name}
      </Anchor>
    ))}
  </Div>
);

class BasicDropdown extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showDropdown: false,
    };
  }

  render() {
    const { showDropdown } = this.state;
    return (
      <Dropdown
        isOpen={showDropdown}
        onClick={() =>
          this.setState({ showDropdown: !showDropdown })
        }
        menu={menuList}
      >
        Click me
      </Dropdown>
    );
  }
}

export default BasicDropdown;
```

--------------------------------

### Display Atomize Icon Component

Source: https://atomizecode.com/react/atoms

Shows how to render an icon using the Atomize `Icon` component, specifying its name, color, and size for visual presentation.

```jsx
// Add Icon
import { Icon } from "atomize";

<Icon name="Add" color="black" size="20px" />
```

--------------------------------

### Applying Responsive Spacing and Sizing Props in Atomize

Source: https://atomizecode.com/react/spacing

This snippet demonstrates how to apply responsive padding, margin, height, and width using Atomize Design System's utility props. It utilizes an 8-point grid system with `rem` units for quantization. Values can be defined for different breakpoints like `xs` (extra small) and `md` (medium) to achieve responsive layouts.

```JavaScript
// Padding
p={{ xs: '1rem', md: '4rem' }}

// Padding Directional
p={{ x: { xs: '1rem', md: '4rem' }, y: { xs: '2rem', md: '0rem' }}}

// Margin
m={{ xs: '1rem', md: '4rem' }}

// Margin Directional
m={{ x: { xs: '1rem', md: '4rem' }, y: { xs: '2rem', md: '0rem' }}}

// Height
h={{ xs: '1rem', md: '4rem' }}

// Width
h={{ xs: '1rem', md: '4rem' }}
```

--------------------------------

### Change Atomize React Grid Column Count via Theme

Source: https://atomizecode.com/react/theme

This example illustrates how to modify the default column count of the Atomize React grid system. By setting the `colCount` property within the theme object passed to `ThemeProvider`, developers can customize the grid's base number of columns, enabling flexible and non-standard grid layouts.

```JavaScript
import {
  ThemeProvider,
  Div,
  Row,
  Col } from "atomize";

const theme = {
  colCount: 9
};

ReactDOM.render(
  <ThemeProvider theme={theme}>
    <Div m={{ b: "4rem" }}>
      <Row>
        {[1, 2, 3, 4, 5, 6, 7, 8, 9].map(index => (
          <Col size={1} key={index}>
            <Div bg="warning800" h="3rem" rounded="md" />
          </Col>
        ))}
      </Row>
    </Div>
  </ThemeProvider>
  , mountNode
);
```

--------------------------------

### Add New Custom Colors to Atomize React Theme

Source: https://atomizecode.com/react/theme

This example illustrates how to extend Atomize React's color palette by adding entirely new custom color names and their corresponding hexadecimal values to the theme object via `ThemeProvider`. This allows for greater flexibility in design by introducing unique colors not present in the default set.

```JavaScript
import { ThemeProvider, Div } from "atomize";

const theme = {
  colors: {
    myColor: '#234423'
  }
};

ReactDOM.render(
  <ThemeProvider theme={theme}>
    <Div d="flex">
      <Div
        bg="myColor"
        m={{ r: "1rem" }}
        w="2rem"
        d="flex"
        flexDir="column"
        align="center"
      />
      <Div
        bg="myColor"
        rounded="circle"
        h="2rem"
        w="2rem"
        m={{ b: "0.5rem" }}
      />
      <Text
        textSize="tiny"
        textAlign="center"
        textWeight="500"
        textColor="medium"
      >
        myColor
      </Text>
    </Div>
  </Div>
  , mountNode
);
```

--------------------------------

### Atomize Tag Component API Documentation

Source: https://atomizecode.com/react/atoms

Comprehensive API documentation for the Atomize Tag component, detailing all available properties, their types, and default values. This includes options for content, layout, styling, text, and interactive behaviors.

```APIDOC
Tag Component Props:

tag: string (default: span)
  - HTML tag to render the component as.
prefix: ReactNode (default: -)
  - Content to display before the tag's children.
suffix: ReactNode (default: -)
  - Content to display after the tag's children.
p: object (default: { x: "0.5rem", y: "0.125rem" })
  - Padding utility prop.
m: string | object (default: -)
  - Margin utility prop.
d: string (default: inline-flex)
  - Display utility prop.
align: string (default: center)
  - Align items utility prop.
justify: string (default: center)
  - Justify content utility prop.
flexDir: string (default: -)
  - Flex direction utility prop.
flexGrow: number (default: -)
  - Flex grow utility prop.
flexWrap: string (default: -)
  - Flex wrap utility prop.
order: number (default: -)
  - Flex order utility prop.
rounded: string | number (default: sm)
  - Border radius utility prop.
bg: string (default: gray300)
  - Background color utility prop.
hoverBg: string (default: -)
  - Background color on hover utility prop.
h: string | number (default: -)
  - Height utility prop.
maxH: string | number (default: -)
  - Max height utility prop.
minH: string | number (default: -)
  - Min height utility prop.
w: string | number (default: -)
  - Width utility prop.
maxW: string | number (default: -)
  - Max width utility prop.
minW: string | number (default: -)
  - Min width utility prop.
border: string | number (default: -)
  - Border utility prop.
borderColor: string (default: -)
  - Border color utility prop.
hoverBorderColor: string (default: -)
  - Border color on hover utility prop.
textSize: string (default: caption)
  - Text size utility prop.
textWeight: number | string (default: 500)
  - Text weight utility prop.
textDecor: string (default: -)
  - Text decoration utility prop.
textTransform: string (default: -)
  - Text transform utility prop.
textAlign: string (default: center)
  - Text align utility prop.
textColor: string (default: medium)
  - Text color utility prop.
hoverTextColor: string (default: -)
  - Text color on hover utility prop.
fontFamily: string (default: -)
  - Font family utility prop.
shadow: string | number (default: -)
  - Shadow utility prop.
hoverShadow: string | number (default: -)
  - Shadow on hover utility prop.
position: string (default: -)
  - Position utility prop.
top: string | number (default: -)
  - Top position utility prop.
left: string | number (default: -)
  - Left position utility prop.
right: string | number (default: -)
  - Right position utility prop.
bottom: string | number (default: -)
  - Bottom position utility prop.
transform: string (default: -)
  - Transform utility prop.
transition: string (default: -)
  - Transition utility prop.
overflow: string (default: -)
  - Overflow utility prop.
cursor: string (default: -)
  - Cursor style utility prop.
```

--------------------------------

### Creating Basic Links with Atomize Anchor Component

Source: https://atomizecode.com/react/atoms

This React functional component demonstrates how to use the Atomize `Anchor` component to create standard and underlined links. It showcases setting the `href` and `target` attributes, along with applying Atomize-specific styling props like `d` (display) and `m` (margin) for layout, and `textDecor` for visual styling.

```javascript
import { Div, Tag, Anchor, Icon } from "atomize";

const BasicLinks = () => {
  return (
    <>
      <Anchor
        href="https://www.google.com"
        target="_blank"
        d="block"
        m={{ b: "1rem" }}
      >
        This is the link
      </Anchor>
      <Anchor
        href="https://www.google.com"
        target="_blank"
        textDecor="underline"
        d="block"
      >
        This is the underlined link
      </Anchor>
    </>
  );
}
```

--------------------------------

### Atomize Icon Component Props

Source: https://atomizecode.com/react/atoms

Documentation for available properties of the Atomize `Icon` component, including icon name, color, size, and layout options.

```APIDOC
Icon Component Props:
  name: string (Default: -) - Name of the icon to display.
  color: string (Default: black) - Color of the icon.
  hoverColor: string (Default: -) - Hover color of the icon.
  size: string (Default: 24px) - Size of the icon.
  p: string (Default: -) - Padding utility prop.
  m: string (Default: -) - Margin utility prop.
  d: string (Default: -) - Display utility prop.
  order: string (Default: -) - Flexbox order utility prop.
  position: string (Default: -) - Position utility prop.
  top: string (Default: -) - Top position utility prop.
  left: string (Default: -) - Left position utility prop.
  right: string (Default: -) - Right position utility prop.
  bottom: string (Default: -) - Bottom position utility prop.
  transform: string (Default: -) - Transform utility prop.
  cursor: string (Default: -) - Cursor utility prop.
```

--------------------------------

### Create Various Icon Buttons with Atomize

Source: https://atomizecode.com/react/atoms

Illustrates how to create different types of circular and rounded icon buttons using Atomize `Button` and `Icon` components, applying various background colors, hover effects, and shadows.

```jsx
// Icon Buttons
import { Div, Button } from "atomize";

<Div d="flex">
// Search Button
<Button
h="2.5rem"
w="2.5rem"
bg="warning700"
hoverBg="warning600"
rounded="circle"
m={{ r: "1rem" }}
shadow="2"
hoverShadow="4"
>
<Icon name="Search" size="20px" color="white" />
</Button>
// Bookmark Button
<Button
h="2.5rem"
w="2.5rem"
bg="info700"
hoverBg="info600"
rounded="circle"
m={{ r: "1rem" }}
shadow="2"
hoverShadow="4"
>
<Icon name="BookmarkSolid" size="20px" color="white" />
</Button>
// Delete Button
<Button
h="2.5rem"
w="2.5rem"
bg="danger700"
hoverBg="danger600"
rounded="circle"
m={{ r: "1rem" }}
shadow="2"
hoverShadow="4"
>
<Icon name="DeleteSolid" size="20px" color="white" />
</Button>
// Play Button
<Button
h="2.5rem"
w="2.5rem"
bg="success700"
hoverBg="success600"
rounded="circle"
m={{ r: "1rem" }}
shadow="2"
hoverShadow="4"
>
<Icon name="Play" size="20px" color="white" />
</Button>
// Heart Button
<Button
h="2.5rem"
w="2.5rem"
bg="danger300"
hoverBg="danger400"
rounded="lg"
m={{ r: "1rem" }}
>
<Icon name="HeartSolid" size="20px" color="danger700" />
</Button>
// Camera Button
<Button
h="2.5rem"
w="2.5rem"
bg="info300"
hoverBg="info400"
```

--------------------------------

### Create H1 Text Component with Atomize

Source: https://atomizecode.com/react/atoms

Demonstrates how to create an H1 heading using the Atomize `Text` component, applying specific text size and margin properties for display.

```jsx
// Creating a h1
import { Text } from "atomize";

<Text tag="h1" textSize="display1" m={{ b: "4rem" }}>
This is h1 of display1 size
</Text>
```

--------------------------------

### Atomize Button Component Props

Source: https://atomizecode.com/react/atoms

Documentation for available properties of the Atomize `Button` component, covering loading states, disabled states, styling, layout, and typography.

```APIDOC
Button Component Props:
  isLoading: boolean (Default: false) - Controls the loading state of the button.
  disabled: boolean (Default: -) - Disables the button.
  prefix: ReactNode (Default: -) - Content to display before the button text.
  suffix: ReactNode (Default: -) - Content to display after the button text.
  p: string (Default: { x: "1rem" }) - Padding utility prop.
  m: string (Default: -) - Margin utility prop.
  d: string (Default: flex) - Display utility prop.
  align: string (Default: center) - Align items utility prop.
  justify: string (Default: center) - Justify content utility prop.
  flexDir: string (Default: -) - Flex direction utility prop.
  flexGrow: string (Default: -) - Flex grow utility prop.
  flexWrap: string (Default: -) - Flex wrap utility prop.
  order: string (Default: -) - Flexbox order utility prop.
  rounded: string (Default: md) - Border radius utility prop.
  bg: string (Default: black) - Background color utility prop.
  hoverBg: string (Default: -) - Hover background color utility prop.
  bgPos: string (Default: -) - Background position utility prop.
  bgSize: string (Default: -) - Background size utility prop.
  h: string (Default: 2.5rem) - Height utility prop.
  maxH: string (Default: -) - Max height utility prop.
  minH: string (Default: -) - Min height utility prop.
  w: string (Default: -) - Width utility prop.
  maxW: string (Default: -) - Max width utility prop.
  minW: string (Default: -) - Min width utility prop.
  border: string (Default: none) - Border utility prop.
  borderColor: string (Default: -) - Border color utility prop.
  hoverBorderColor: string (Default: -) - Hover border color utility prop.
  textSize: string (Default: body) - Text size utility prop.
  textWeight: string (Default: 500) - Text weight utility prop.
  textDecor: string (Default: -) - Text decoration utility prop.
  textTransform: string (Default: -) - Text transform utility prop.
  textAlign: string (Default: -) - Text alignment utility prop.
  textColor: string (Default: white) - Text color utility prop.
  hoverTextColor: string (Default: -) - Hover text color utility prop.
  fontFamily: string (Default: primary) - Font family utility prop.
  shadow: string (Default: -) - Box shadow utility prop.
  hoverShadow: string (Default: -) - Hover box shadow utility prop.
  position: string (Default: -) - Position utility prop.
  top: string (Default: -) - Top position utility prop.
  left: string (Default: -) - Left position utility prop.
  right: string (Default: -) - Right position utility prop.
  bottom: string (Default: -) - Bottom position utility prop.
  transform: string (Default: -) - Transform utility prop.
  transition: boolean (Default: true) - Transition utility prop.
  overflow: string (Default: -) - Overflow utility prop.
  cursor: string (Default: pointer) - Cursor utility prop.
```

--------------------------------

### Render Images with Atomize UI Components in React

Source: https://atomizecode.com/react/atoms

This snippet demonstrates two ways to render images using Atomize UI: directly with the Image component and by setting an image as a background for a Div component. It showcases how to maintain aspect ratios and apply styling.

```javascript
// Images
import { Image, Div, Row, Col } from "atomize";

const BasicImages = () => {
  return (
    <Row>
      <Col>
        <Image src="https://images.unsplash.com/photo-1559963629-38ed0fbd4c86?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80" />
      </Col>
      <Col>
        <Div
          bgImg="https://images.unsplash.com/photo-1559963629-38ed0fbd4c86?ixlib=rb-1.2.1&ixid=eyJapHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80"
          bgSize="cover"
          bgPos="center"
          h="20rem"
        />
      </Col>
    </Row>
  );
}
```

--------------------------------

### Implement Basic Tag Components in React

Source: https://atomizecode.com/react/atoms

This snippet demonstrates various uses of the Atomize Tag component, including basic tags, tags with prefix/suffix icons, and tags wrapped within an Anchor component for navigation. It highlights how to apply styling and interactive elements.

```javascript
// Basic Tags
import { Div, Tag, Anchor, Icon } from "atomize";

const BasicTags = () => {
  return (
    <Div d="flex">
      <Tag m={{ r: "1rem", b: "1rem" }}>Tag 1</Tag>
      <Tag m={{ r: "1rem", b: "1rem" }}>Link</Tag>
      <Tag
        m={{ r: "1rem", b: "1rem" }}
        suffix={
          <Icon
            name="Cross"
            size="12px"
            m={{ l: "1rem" }}
            cursor="pointer"
          />
        }
      >
        Close
      </Tag>
      <Tag
        m={{ r: "1rem", b: "1rem" }}
        prefix={<Icon name="Edit" size="12px" m={{ r: "0.25rem" }} />}
      >
        Edit
      </Tag>
      <Anchor href="https://www.google.com" target="_blank">
        <Tag
          hoverBg="info200"
          m={{ r: "1rem", b: "1rem" }}
          prefix={<Icon name="Link" size="12px" m={{ r: "0.25rem" }} />}
          cursor="pointer"
        >
          Link
        </Tag>
      </Anchor>
    </Div>
  );
}
```

--------------------------------

### Implementing a Basic Modal with Atomize

Source: https://atomizecode.com/react/molecules

This React code snippet demonstrates how to create and manage a basic modal component using Atomize. It includes functionality to open and close the modal, display custom content, and handle user interactions like submitting or canceling.

```javascript
import { Div, Button, Modal, Icon, Text } from "atomize";

const AlignStartModal = ({ isOpen, onClose }) => {
  return (
    <Modal isOpen={isOpen} onClose={onClose} align="start" rounded="md">
      <Icon
        name="Cross"
        pos="absolute"
        top="1rem"
        right="1rem"
        size="16px"
        onClick={onClose}
        cursor="pointer"
      />
      <Div d="flex" m={{ b: "4rem" }}>
        <Icon
          name="AlertSolid"
          color="warning700"
          m={{ t: "0.35rem", r: "0.5rem" }}
        />
        <Text p={{ l: "0.5rem", t: "0.25rem" }} textSize="subheader">
          Do you really want to submit the request.
        </Text>
      </Div>
      <Div d="flex" justify="flex-end">
        <Button
          onClick={onClose}
          bg="gray200"
          textColor="medium"
          m={{ r: "1rem" }}
        >
          Cancel
        </Button>
        <Button onClick={onClose} bg="info700">
          Yes, Submit
        </Button>
      </Div>
    </Modal>
  );
};

class BasicModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showModal: false
    };
  }

  render() {
    const { showModal } = this.state;
    return (
      <>
        <Button
          bg="info700"
          hoverBg="info600"
          m={{ b: "1rem" }}
          onClick={() => this.setState({ showModal: true })}
        >
          Open Basic Modal (Align Start)
        </Button>
        <AlignStartModal
          isOpen={showModal}
          onClose={() => this.setState({ showModal: false })}
        />
      </>
    );
  }
}

export default BasicModal;
```

--------------------------------

### Basic Atomize Checkbox Component Usage

Source: https://atomizecode.com/react/atoms

Illustrates how to implement basic, disabled, and indeterminate checkboxes using Atomize UI's `Checkbox` component, wrapped within `Label` for clickable areas.

```JSX
import { Checkbox, Label } from "atomize";

const BasicCheckboxes = () => {
  return (
    <>
      <Label align="center" textWeight="600" m={{ b: "0.5rem" }}>
        <Checkbox /> Normal Checkbox
      </Label>
      <Label align="center" textWeight="600" m={{ b: "0.5rem" }}>
        <Checkbox disabled /> Disabled
      </Label>
      <Label align="center" textWeight="600" m={{ b: "0.5rem" }}>
        <Checkbox undetermine /> Undetermine
      </Label>
    </>
  );
}
```

--------------------------------

### Atomize Text Component Props

Source: https://atomizecode.com/react/atoms

Documentation for available properties of the Atomize `Text` component, including styling, layout, and typography options.

```APIDOC
Text Component Props:
  tag: string (Default: p) - HTML tag to render the text as.
  p: string (Default: -) - Padding utility prop.
  m: string (Default: -) - Margin utility prop.
  d: string (Default: -) - Display utility prop.
  flexGrow: string (Default: -) - Flexbox grow utility prop.
  order: string (Default: -) - Flexbox order utility prop.
  bg: string (Default: -) - Background color utility prop.
  hoverBg: string (Default: -) - Hover background color utility prop.
  h: string (Default: -) - Height utility prop.
  maxH: string (Default: -) - Max height utility prop.
  minH: string (Default: -) - Min height utility prop.
  w: string (Default: -) - Width utility prop.
  maxW: string (Default: -) - Max width utility prop.
  minW: string (Default: -) - Min width utility prop.
  textSize: string (Default: -) - Text size utility prop.
  textWeight: string (Default: -) - Text weight utility prop.
  textDecor: string (Default: -) - Text decoration utility prop.
  textTransform: string (Default: -) - Text transform utility prop.
  textAlign: string (Default: -) - Text alignment utility prop.
  textColor: string (Default: -) - Text color utility prop.
  hoverTextColor: string (Default: -) - Hover text color utility prop.
  fontFamily: string (Default: -) - Font family utility prop.
  position: string (Default: -) - Position utility prop.
  top: string (Default: -) - Top position utility prop.
  left: string (Default: -) - Left position utility prop.
  right: string (Default: -) - Right position utility prop.
  bottom: string (Default: -) - Bottom position utility prop.
  transform: string (Default: -) - Transform utility prop.
  transition: string (Default: -) - Transition utility prop.
  cursor: string (Default: -) - Cursor utility prop.
```

--------------------------------

### Atomize Dropdown Component API Properties

Source: https://atomizecode.com/react/molecules

Comprehensive API documentation for the Atomize Dropdown component, detailing all available properties, their default values, and descriptions. This includes props for controlling visibility, hover behavior, direction, loading states, custom styling, and layout.

```APIDOC
Dropdown Component Properties:

- menu: (ReactNode) - Content to be displayed inside the dropdown menu.
- isOpen: (boolean) Default: false - Controls the visibility of the dropdown menu.
- targethover: (boolean) Default: false - If true, the dropdown opens on hover instead of click.
- direction: (string) Default: bottomleft - Specifies the direction the dropdown menu opens (e.g., topleft, topright, bottomleft, bottomright, righttop, lefttop).
- isLoading: (boolean) Default: false - Displays a loading indicator in place of the suffix icon.
- prefix: (ReactNode) - Content to display before the dropdown trigger text.
- openSuffix: (ReactNode) Default: <Icon name="UpArrow" size="18px" m={{ l: "1rem" }} color="medium" /> - Icon or content to display when the dropdown is open.
- closeSuffix: (ReactNode) Default: <Icon name="DownArrow" size="18px" m={{ l: "1rem" }} color="medium" /> - Icon or content to display when the dropdown is closed.
- p: (object) Default: { x: "0.75rem" } - Padding utility prop.
- m: (object) - Margin utility prop.
- d: (string) Default: flex - Display utility prop.
- align: (string) Default: center - Align items utility prop.
- justify: (string) Default: space-between - Justify content utility prop.
- flexDir: (string) - Flex direction utility prop.
- flexGrow: (number) - Flex grow utility prop.
- flexWrap: (string) - Flex wrap utility prop.
- order: (number) - Order utility prop.
- rounded: (string) Default: md - Border radius utility prop.
- bg: (string) Default: white - Background color utility prop.
- hoverBg: (string) - Background color on hover utility prop.
- focusBg: (string) Default: gray100 - Background color on focus utility prop.
- bgImg: (string) - Background image utility prop.
- bgPos: (string) - Background position utility prop.
- bgSize: (string) - Background size utility prop.
- h: (string) Default: 2.5rem - Height utility prop.
- maxH: (string) - Max height utility prop.
- minH: (string) - Min height utility prop.
- w: (string) Default: 100% - Width utility prop.
- maxW: (string) - Max width utility prop.
- minW: (string) - Min width utility prop.
- border: (string) Default: 1px solid - Border utility prop.
- borderColor: (string) Default: gray500 - Border color utility prop.
- hoverBorderColor: (string) - Border color on hover utility prop.
- focusBorderColor: (string) Default: gray800 - Border color on focus utility prop.
- textSize: (string) Default: body - Text size utility prop.
- textWeight: (number) Default: 500 - Text weight utility prop.
- textDecor: (string) - Text decoration utility prop.
- textTransform: (string) - Text transform utility prop.
- textAlign: (string) - Text align utility prop.
- textColor: (string) Default: medium - Text color utility prop.
- hoverTextColor: (string) - Text color on hover utility prop.
- fontFamily: (string) - Font family utility prop.
- shadow: (string) - Box shadow utility prop.
- hoverShadow: (string) - Box shadow on hover utility prop.
- focusShadow: (string) - Box shadow on focus utility prop.
- position: (string) - Position utility prop.
- top: (string) - Top position utility prop.
- left: (string) - Left position utility prop.
- right: (string) - Right position utility prop.
- bottom: (string) - Bottom position utility prop.
- transform: (string) - Transform utility prop.
- transition: (string) - Transition utility prop.
- overflow: (string) - Overflow utility prop.
- cursor: (string) Default: pointer - Cursor utility prop.
```

--------------------------------

### Atomize Modal Component API Properties

Source: https://atomizecode.com/react/molecules

API documentation for the Atomize Modal component, outlining essential properties for controlling its visibility and behavior. This includes props for opening/closing the modal and lifecycle callbacks.

```APIDOC
Modal Component Properties:

- isOpen: (boolean) Default: false - Controls the visibility of the modal.
- onClose: (function) - Callback function triggered when the modal is requested to be closed (e.g., by clicking outside or pressing Escape).
- onEntering: (function) - Callback function triggered when the modal is about to enter.
- onEnter: (function) - Callback function triggered when the modal has entered.
- p: (string | object) Default: 2rem - Padding utility prop for the modal content.
- m: (string | object) - Margin utility prop for the modal container.
```