### Install Atomize React and Dependencies

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

This command installs the Atomize UI library and `react-transition-group` as a dependency using Yarn. These packages are essential for building user interfaces with Atomize.

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

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

### Customize Atomize Theme with ThemeProvider

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

This example shows how to apply a custom theme to your Atomize components using the `ThemeProvider`. You can define custom colors, fonts, and other design tokens within the `theme` object, allowing for extensive customization of the UI library's appearance.

```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>
  );
}
```

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

### Integrate StyleReset in React Root Component

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

This example demonstrates how to include the `StyleReset` component from Atomize in your main React application component (e.g., `index.js` or `App.js`) to apply global style resets. It's crucial for ensuring consistent styling across your application and should be placed at the root of your component tree.

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

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

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

### Basic Input Component Usage in Atomize React

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

Illustrates the basic implementation of the Input component from Atomize React. This example shows how to import the component and render a simple input field with a placeholder text.

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

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

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

### React Row and Col Basic Grid Structure Example

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

Illustrates the fundamental use of AtomizeCode's `Row` and `Col` components to create a responsive grid layout. This example demonstrates how to divide content into columns using flexbox-based sizing, showcasing a 5-of-12 and 7-of-12 column division.

```JavaScript
// Basic Column Structure
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
);
```

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

### Examples of Applying Responsive Props in Atomize React

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

These examples demonstrate how to utilize the responsive prop system in Atomize React components. By passing an object with breakpoint keys (e.g., xs, md, lg) to styling props like p (padding) or border, developers can easily define responsive styles that adapt to different screen sizes.

```JavaScript
// 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' }
}
```

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

### React Container Component Usage Example

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

Demonstrates the basic usage of the AtomizeCode `Container` component in a React application. This component serves as the fundamental element for the grid system, automatically adjusting its max-width based on theme breakpoints for responsive design.

```JavaScript
// Container
import { Div, Container } from "atomize";

ReactDOM.render(
<Container>
{/* your Content goes here */}
</Container>
, mountNode
);
```

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

### Add Custom Shadows to Atomize React Theme

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

This example illustrates how to extend the default shadow values in Atomize React by adding a custom shadow definition to the theme object. The new shadow can then be applied to components using the `shadow` prop.

```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
);
```

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

### Creating Basic Links with Atomize Anchor Component

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

This code snippet demonstrates how to create basic hyperlinks using the `Anchor` component from the Atomize UI library. It showcases two examples: a standard link and an underlined link, both configured to open in a new browser tab.

```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>
    </>
  );
}
```

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

### Customize Component Transitions in Atomize React

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

This example demonstrates how to define and apply custom transition properties within the Atomize React theme. It shows a `Div` component animating its `transform` property using a custom 'custom' transition defined in the theme, triggered by a state change.

```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);
```

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

### Basic SideDrawer Implementation in Atomize React

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

This snippet illustrates how to implement a basic side drawer (or sidebar) component using Atomize React. It covers the essential `isOpen` and `onClose` props for controlling visibility and includes example content with an icon, text, and action buttons. The component demonstrates how to integrate a side drawer into a React application.

```React
import { Div, Button, SideDrawer, Icon, Text } from "atomize";

const BasicSideDrawer = ({ isOpen, onClose }) => {
  return (
    <SideDrawer isOpen={isOpen} onClose={onClose}>
      <Div d="flex" m={{ b: "4rem" }}>
        <Icon name="AlertSolid" color="warning700" />
        <Text p={{ l: "0.5rem", t: "0.25rem" }}>This is the modal</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">
          Submit
        </Button>
      </Div>
    </SideDrawer>
  );
};

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

  render() {
    const { showSideDrawer } = this.state;
    return (
      <>
        <Button
          bg="info700"
          hoverBg="info600"
          m={{ r: "0.5rem" }}
          onClick={() => this.setState({ showSideDrawer: true })}
        >
          Show Basic Sidedrawer
        </Button>
        <BasicSideDrawer
          isOpen={showSideDrawer}
          onClose={() => this.setState({ showSideDrawer: false })}
        />
      </>
    );
  }
}

export default Drawer;
```

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

### Overwrite Atomize React Default Colors

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

This example demonstrates how to override the default color palette in Atomize React by defining new values for existing color names within the `ThemeProvider`. It shows how to create a custom brand color scale from 100 to 900.

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

const theme = {
  colors: {
    brand100: "#F9F8FC",
    brand200: "#F3F1FA",
    brand300: "#E9E6F6",
    brand400: "#D2CCEC",
    brand500: "#BCB3E2",
    brand600: "#9C8FD6",
    brand700: "#6F5CC3",
    brand800: "#553EB5",
    brand900: "#382683",
  }
};

const BrandColors = () => (
  <ThemeProvider theme={theme}>
    <Div d="flex">
      {["100", "200", "300", "400", "500", "600", "700", "800", "900"].map(
        shade => (
          <Div
            m={{ r: "1rem" }}
            w="2rem"
            d="flex"
            flexDir="column"
            align="center"
          >
            <Div
              bg={`brand${shade}`}
              rounded="circle"
              h="2rem"
              w="2rem"
              m={{ b: "0.5rem" }}
            />
            <Text
              textSize="tiny"
              textAlign="center"
              textWeight="500"
              textColor="medium"
            >
              brand
              <br />
              {shade}
            </Text>
          </Div>
        )
      )}
    </Div>
  </ThemeProvider>
)

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

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

### Atomize React Button Component Examples

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

Demonstrates various styled Button components from Atomize React, including camera, message, and attachment buttons. Each button features custom background colors, hover effects, rounded corners, and embedded icons, showcasing common styling patterns.

```jsx
<Button
  h="2.5rem"
  w="2.5rem"
  bg="info300"
  hoverBg="info400"
  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>
```

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

### Basic Modal Implementation in Atomize React

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

This snippet demonstrates how to create and manage a basic modal dialog using Atomize React components. It includes state management for modal visibility, custom content rendering with icons and text, and action buttons for user interaction. The modal is configured to align its content to the start.

```React
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;
```

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

### Set Custom Font Sizes in Atomize React Theme

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

This example demonstrates how to define custom font sizes and their corresponding line heights within the Atomize React theme. The `textSize` property allows for granular control over typography, enabling the use of custom text sizes like 'customSize'.

```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
);
```

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

### Basic Checkbox Component Usage in Atomize React

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

Demonstrates the basic usage of the Checkbox component in Atomize React. Examples include a normal checkbox, a disabled checkbox, and an undetermined checkbox, all wrapped within a Label component for improved clickability.

```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>
    </>
  );
}
```

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

### Managing Radiobox State in Atomize React

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

Demonstrates how to manage the checked state of Radiobox components in Atomize React using a React class component. It includes an example of toggling selected values and rendering multiple radioboxes within a flexible container.

```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">
        <Label
          align="center"
          textWeight="600"
          m={{ b: "0.5rem", r: "2rem" }}
        >
          <Radiobox
            onChange={() => this.toggleSelectedCount(1)}
            checked={ selectedCountValue === 1 }
            name="count"
          />
          1
        </Label>
        <Label
          align="center"
          textWeight="600"
          m={{ b: "0.5rem", r: "2rem" }}
        >
          <Radiobox
            onChange={() => this.toggleSelectedCount(2)}
            checked={ selectedCountValue === 2 }
            name="count"
          />
          2
        </Label>
        <Label
          align="center"
          textWeight="600"
          m={{ b: "0.5rem", r: "2rem" }}
        >
          <Radiobox
            onChange={() => this.toggleSelectedCount(3)}
            checked={ selectedCountValue === 3 }
            name="count"
          />
          3
        </Label>
        <Label align="center" textWeight="600" m={{ b: "0.5rem" }}>
          <Radiobox
            onChange={() => this.toggleSelectedCount(4)}
            checked={ selectedCountValue === 4 }
```

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

### Atomize React Container and Gutter Width Defaults

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

This section outlines the default responsive container widths and the default gutter width used in Atomize React's layout system. It specifies container sizes for various device breakpoints (xl, lg, md, sm, xs) and the standard spacing between grid columns.

```APIDOC
Container has default width of 1200px, 1156px, 960px, 720px & 540px on xl, lg, md, sm & xs devices, respectively.
And gutterWidth is of 16px by default.
```

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

### Change Grid Column Count in Atomize React Theme

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

This example shows how to customize the total number of columns in the Atomize React grid system. By setting the `colCount` property within the `ThemeProvider`, the grid can be adapted to a different column structure, such as a 9-column layout.

```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
);
```

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

### Basic Image Component Usage in React

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

Illustrates how to render images using the Atomize `Image` component and how to use a `Div` with `bgImg` for background images, maintaining aspect ratio with `bgSize` and `bgPos`.

```javascript
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=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80"

bgSize="cover"

bgPos="center"

h="20rem"

/>

</Col>

</Row>

);

}
```

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

### Atomize React Input Component API Reference

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

Comprehensive API documentation for the Atomize React Input component, detailing all available properties, their default values, and descriptions for customization. This includes styling, layout, and behavioral properties.

```APIDOC
Input Component Props:
  isLoading: boolean (default: -)
  prefix: ReactNode (default: -)
  suffix: ReactNode (default: -)
  p: object (default: { x: "0.75rem" })
  m: object (default: -)
  d: string (default: flex)
  flexGrow: number (default: -)
  order: number (default: -)
  rounded: string (default: md)
  bg: string (default: white)
  hoverBg: string (default: -)
  focusBg: string (default: -)
  bgPos: string (default: -)
  bgSize: string (default: -)
  h: string (default: 2.5rem)
  maxH: string (default: -)
  minH: string (default: -)
  w: string (default: 100%)
  maxW: string (default: -)
  minW: string (default: -)
  border: string (default: 1px solid)
  borderColor: string (default: gray500)
  hoverBorderColor: string (default: -)
  focusBorderColor: string (default: gray700)
  textSize: string (default: body)
  textWeight: number (default: 500)
  textDecor: string (default: -)
  textTransform: string (default: -)
  textAlign: string (default: -)
  textColor: string (default: dark)
  hoverTextColor: string (default: -)
  focusTextColor: string (default: -)
  fontFamily: string (default: -)
  shadow: string (default: -)
  hoverShadow: string (default: -)
  focusShadow: string (default: -)
  position: string (default: -)
  top: string (default: -)
  left: string (default: -)
  right: string (default: -)
  bottom: string (default: -)
  transform: string (default: -)
  transition: boolean (default: true)
  overflow: string (default: -)
  cursor: string (default: -)
```

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

### Customize Font Families in Atomize React Theme

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

This snippet illustrates how to override or add custom font families to the Atomize React theme. It shows how to change the primary font family, which then affects components using that family.

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

const theme = {
  fontFamily: {
    primary: "equity-text, serif"
  }
};

ReactDOM.render(
  <ThemeProvider theme={theme}>
    <Text fontFamily="secondary" textSize="heading">
      This is different font
    </Text>
  </ThemeProvider>
  , mountNode
);
```

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

### Basic Dropdown Component Usage in React

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

Demonstrates how to implement a basic dropdown component using Atomize, including defining a menu list with multiple options and controlling the dropdown's visibility with React state. It utilizes `Dropdown` and `Anchor` components from the Atomize library.

```JSX
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;
```

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

### Creating a Div Component in Atomize React

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

This snippet demonstrates how to create a basic Div component using the Atomize React library. It applies a background color, sets display properties to flex, centers content, and adds padding, showcasing a simple layout usage of the `Div` component.

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

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

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

### Display Default 12-Column Grid in Atomize React

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

This code demonstrates the default 12-column grid structure provided by Atomize React. It renders 12 equally sized columns within a `Row` component, showcasing the basic grid layout.

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

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

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

### Add Custom Colors to Atomize React Theme

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

This snippet illustrates how to extend the Atomize React color palette by adding entirely new custom color names and their corresponding hexadecimal values to the `colors` object within the `ThemeProvider` configuration.

```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>
  </ThemeProvider>
  , mountNode
);
```

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

### Atomize Modal Component API Reference

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

Comprehensive API documentation for the Atomize Modal component, detailing available properties for controlling its visibility, lifecycle events, and styling. This includes props for managing open/close states and callbacks for modal transitions.

```APIDOC
Modal Component Props:

- isOpen: boolean
  Description: Controls the visibility of the modal.
  Default: false

- onClose: function
  Description: Callback function triggered when the modal is requested to close.
  Default: -

- onEntering: function
  Description: Callback function triggered when the modal is about to enter.
  Default: -

- onEnter: function
  Description: Callback function triggered when the modal has entered.
  Default: -

- p: string
  Description: Padding utility prop (e.g., '2rem').
  Default: 2rem

- m: string
  Description: Margin utility prop.
  Default: -
```

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

### AtomizeCode React Container Component Props

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

Documents the extensive list of available properties for the AtomizeCode `Container` component. These props allow for detailed customization of its display, alignment, sizing, background, border, text, shadow, position, and transition properties within a React application.

```APIDOC
Container Props:
- d: Default Value - View
- align: Default Value - View
- justify: Default Value - View
- flexDir: Default Value - View
- flexGrow: Default Value - View
- flexWrap: Default Value - View
- rounded: Default Value - View
- bg: Default Value - View
- hoverBg: Default Value - View
- bgImg: Default Value - View
- bgPos: Default Value - View
- bgSize: Default Value - View
- h: Default Value - View
- maxH: Default Value - View
- minH: Default Value - View
- minW: Default Value - View
- border: Default Value - View
- borderColor: Default Value - View
- hoverBorderColor: Default Value - View
- textSize: Default Value - View
- textWeight: Default Value - View
- textDecor: Default Value - View
- textTransform: Default Value - View
- textAlign: Default Value - View
- textColor: Default Value - View
- hoverTextColor: Default Value - View
- fontFamily: Default Value - View
- shadow: Default Value - View
- hoverShadow: Default Value - View
- position: Default Value - View
- top: Default Value - View
- left: Default Value - View
- right: Default Value - View
- bottom: Default Value - View
- transform: Default Value - View
- transition: Default Value - View
- overflow: Default Value - View
- cursor: Default Value - View
```

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

### Atomize Dropdown Component API Reference

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

Comprehensive API documentation for the Atomize Dropdown component, detailing all available properties, their types, default values, and descriptions for customizing behavior, appearance, and positioning. This includes props for controlling visibility, hover effects, direction, loading states, and various styling utilities.

```APIDOC
Dropdown Component Props:

- menu: ReactNode
  Description: Content to be displayed inside the dropdown menu.
  Default: -

- isOpen: boolean
  Description: Controls the visibility of the dropdown menu.
  Default: false

- targethover: boolean
  Description: If true, the dropdown will open on hover instead of click.
  Default: false

- direction: 'topleft' | 'topright' | 'righttop' | 'lefttop' | 'bottomright' | 'bottomleft'
  Description: Specifies the positioning of the dropdown menu relative to the trigger.
  Default: bottomleft

- isLoading: boolean
  Description: Displays a loading indicator, replacing the right icon.
  Default: false

- prefix: ReactNode
  Description: Content to display before the dropdown trigger text.
  Default: -

- openSuffix: ReactNode
  Description: Icon or content to display when the dropdown is open.
  Default: <Icon name="UpArrow" size="18px" m={{ l: "1rem" }} color="medium" />

- closeSuffix: ReactNode
  Description: Icon or content to display when the dropdown is closed.
  Default: <Icon name="DownArrow" size="18px" m={{ l: "1rem" }} color="medium" />

- p: object
  Description: Padding utility props (e.g., { x: "0.75rem" }).
  Default: { x: "0.75rem" }

- m: object
  Description: Margin utility props.
  Default: -

- d: string
  Description: Display utility prop (e.g., 'flex').
  Default: flex

- align: string
  Description: Align items utility prop (e.g., 'center').
  Default: center

- justify: string
  Description: Justify content utility prop (e.g., 'space-between').
  Default: space-between

- flexDir: string
  Description: Flex direction utility prop.
  Default: -

- flexGrow: string
  Description: Flex grow utility prop.
  Default: -

- flexWrap: string
  Description: Flex wrap utility prop.
  Default: -

- order: string
  Description: Order utility prop.
  Default: -

- rounded: string
  Description: Border radius utility prop (e.g., 'md').
  Default: md

- bg: string
  Description: Background color utility prop (e.g., 'white').
  Default: white

- hoverBg: string
  Description: Background color on hover.
  Default: -

- focusBg: string
  Description: Background color on focus.
  Default: gray100

- bgImg: string
  Description: Background image utility prop.
  Default: -

- bgPos: string
  Description: Background position utility prop.
  Default: -

- bgSize: string
  Description: Background size utility prop.
  Default: -

- h: string
  Description: Height utility prop (e.g., '2.5rem').
  Default: 2.5rem

- maxH: string
  Description: Max height utility prop.
  Default: -

- minH: string
  Description: Min height utility prop.
  Default: -

- w: string
  Description: Width utility prop (e.g., '100%').
  Default: 100%

- maxW: string
  Description: Max width utility prop.
  Default: -

- minW: string
  Description: Min width utility prop.
  Default: -

- border: string
  Description: Border utility prop (e.g., '1px solid').
  Default: 1px solid

- borderColor: string
  Description: Border color utility prop (e.g., 'gray500').
  Default: gray500

- hoverBorderColor: string
  Description: Border color on hover.
  Default: -

- focusBorderColor: string
  Description: Border color on focus.
  Default: gray800

- textSize: string
  Description: Text size utility prop (e.g., 'body').
  Default: body

- textWeight: string
  Description: Text weight utility prop (e.g., '500').
  Default: 500

- textDecor: string
  Description: Text decoration utility prop.
  Default: -

- textTransform: string
  Description: Text transform utility prop.
  Default: -

- textAlign: string
  Description: Text align utility prop.
  Default: -

- textColor: string
  Description: Text color utility prop (e.g., 'medium').
  Default: medium

- hoverTextColor: string
  Description: Text color on hover.
  Default: -

- fontFamily: string
  Description: Font family utility prop.
  Default: -

- shadow: string
  Description: Shadow utility prop.
  Default: -

- hoverShadow: string
  Description: Shadow on hover.
  Default: -

- focusShadow: string
  Description: Shadow on focus.
  Default: -

- position: string
  Description: Position utility prop.
  Default: -

- top: string
  Description: Top position utility prop.
  Default: -

- left: string
  Description: Left position utility prop.
  Default: -

- right: string
  Description: Right position utility prop.
  Default: -

- bottom: string
  Description: Bottom position utility prop.
  Default: -

- transform: string
  Description: Transform utility prop.
  Default: -

- transition: string
  Description: Transition utility prop.
  Default: -

- overflow: string
  Description: Overflow utility prop.
  Default: -

- cursor: string
  Description: Cursor utility prop (e.g., 'pointer').
  Default: pointer
```

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

### Define Custom Border Radius in Atomize React Theme

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

This snippet shows how to add or customize border radius values in Atomize React's theme. A new `veryLarge` radius is defined and then applied to a `Div` component, demonstrating how to use custom rounded values.

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

const theme = {
  rounded: {
    veryLarge: "18px"
  }
};

ReactDOM.render(
  <ThemeProvider theme={theme}>
    <Div
      rounded="veryLarge"
      h="3rem"
      bg="warning700"
      d="flex"
      align="center"
      justify="center"
      textColor="white"
    >
      Custom Radius
    </Div>
  </ThemeProvider>
  , mountNode
);
```

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

### Atomize Icon Component Props and Available Icons

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

Details the properties for the Atomize `Icon` component and lists all supported icon names that can be used, along with their default values.

```APIDOC
Icon Component Props:
- name: string (Default: "-") - The name of the icon to display.
- color: string (Default: "black") - The color of the icon.
- hoverColor: string (Default: "-") - The color of the icon on hover.
- size: string (Default: "24px") - The 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 property.
- position: string (Default: "-") - CSS position property.
- top: string (Default: "-") - Top offset.
- left: string (Default: "-") - Left offset.
- right: string (Default: "-") - Right offset.
- bottom: string (Default: "-") - Bottom offset.
- transform: string (Default: "-") - CSS transform property.
- cursor: string (Default: "-") - CSS cursor property.

Available Icon Names:
Add, AlertSolid, Alert, Attachment, Back, Bag, Behance, BookmarkSolid, Bookmark, Bulk, CameraSolid, Camera, Card, Checked, CloseSolid, Close, Cross, DeleteSolid, Delete, Dot, DownArrowCircle, DownArrowSolid, DownArrow, Down, Download, Draft, Dribbble, EditSolid, Edit, Email, Expand, External, EyeSolid, Eye, Facebook, FolderSolid, Folder, Github, HeartSolid, Heart, History, HomeSolid2, HomeSolid, Home, InfoSolid, Info, Instagram, LeftArrowSolid, LeftArrow, LeftUp, Link, Linkedin, Loading, Loading2, Loading3, LocationSolid, Location, LockSolid, Lock, Logout, LongLeft, LongRight, Mail, MasterCard, Menu, MessageSolid, Message, Minus, Next, NotificationSolid, Notification, OptionsVertical, Options, Photo, Pause, Play, PlayNext, PlayPrev, Plus, Power, Print, QuestionSolid, Question, Refresh, RemoveSolid, Remove, Rename, RightArrowSolid, RightArrow, RightUp, Search, SettingsSolid, Settings, StarSolid, Status, Stop, Store, Success, TimestampSolid, Timestamp, Twitter, UpArrowSolid, UpArrow, Up, Upload, UserCircle, UserSolid, User, Visa, CBChecked, CBDisabled, CBIndetermine, CBUnchecked, RBChecked, RBUnchecked
```

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

### Applying Responsive Spacing Properties in Atomize React

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

Demonstrates how to apply responsive padding, margin, height, and width using Atomize's component props. Values are defined using an object with breakpoint keys (`xs`, `md`) and `rem` units, adhering to the 8-point grid system for consistent design across different screen sizes.

```React
// 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' }}
```

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

### Basic Tag Component Usage in React

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

Demonstrates various ways to use the Atomize `Tag` component, including basic tags, tags with links, and tags with prefix/suffix icons for close or edit actions. It also shows how to apply hover effects.

```javascript
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>

);

}
```

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

### Display Icon with Atomize Icon Component

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

Shows how to render an icon using the Atomize `Icon` component, specifying its name (e.g., 'Add'), color, and size.

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

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

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

### Customize Container Width and Gutter in Atomize React

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

This snippet demonstrates how to override the default container width and gutter width settings in Atomize React using the `ThemeProvider` component. It shows how to define responsive container widths for different breakpoints (xs, sm, md, lg, xl) and a global gutter width.

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

const theme = {
  grid: {
    containerWidth: {
      xs: "540px",
      sm: "720px",
      md: "960px",
      lg: "1156px",
      xl: "1156px"
    },
    gutterWidth: "12px"
  }
};

ReactDOM.render(
  <ThemeProvider theme={theme}>
    <Container>
      <Row>
        <Col size={4} />
        <Col size={8} />
      </Row>
    </Container>
  </ThemeProvider>
  , mountNode
);
```