This repository demonstrates various Chakra UI components with examples. The project includes buttons, forms, toasts, tooltips, steppers, modals, drawers, breadcrumbs, skeletons, accordions, grids, stacks, responsive styles, and a progress bar. Additionally, it showcases the usage of a custom theme with overridden theme configurations.

Check out the live demo here.

• Installation

• Usage

• Components

  • Buttons
  • Forms
  • Toast
  • Tooltip
  • Horizontal Stepper
  • Vertical Stepper
  • Modals
  • Drawer
  • Breadcrumb
  • Skeleton
  • Accordion
  • Progress Bar

• Custom Theme

To get started, clone the repository and install the dependencies:

git clone https://github.com/ahelmi365/chakra-ui-react.git
cd chakra-ui-react
npm install

To start the development server, run:

• For CRA

npm start

• For Vite:

npm run dev

Demonstrates various styles and configurations of Chakra UI buttons. These include primary, secondary, and various other styled buttons.

Shows form controls and validation using Chakra UI. This includes input fields, checkboxes, radio buttons, and more.

Provides examples of toast notifications for feedback messages. Useful for displaying quick messages to users.

Displays informative text when users hover over elements. Tooltips are used to provide additional information about an element.

Guides users through a series of steps in a horizontal layout. This is useful for multi-step forms and processes.

Guides users through a series of steps in a vertical layout. Similar to the horizontal stepper but oriented vertically.

Shows overlays for dialogs or other interactive elements. Modals are used to capture user attention for critical information or actions.

Provides side panel navigation or contextual menus. Drawers can be used for navigation or additional content without leaving the main view.

Displays hierarchical navigation links. Breadcrumbs help users understand their location within the application.

Shows placeholder content while data is loading. Skeletons improve user experience by indicating that content is being loaded.

Toggles content visibility in a vertical stack. Accordions are used to show and hide sections of related content.

Displays a progress bar to indicate completion status. Useful for showing the progress of tasks or uploads.

This project uses a custom theme with the following custom colors and overridden configurations:

• Primary Color Scheme: Custom shades of blue-green.
• Secondary Color Scheme: Custom shades of gray.
• Success Color Scheme: Custom shades of green.
• Danger Color Scheme: Custom shades of red.
• Warning Color Scheme: Custom shades of yellow.
• Info Color Scheme: Custom shades of blue.

Overrides include border radius settings for all input components.

This project is licensed under the MIT License. See the LICENSE file for details.

Contributions are welcome! Please open an issue or submit a pull request with your changes.