Chakra UI Component Examples

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.

Live Demo

Check out the live demo here.

Table of Contents

• Installation

• Usage

• Components

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

• Custom Theme

Installation

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

Usage

To start the development server, run:

• For CRA

npm start

• For Vite:

npm run dev

Components

Buttons

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

Forms

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

Toast

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

Tooltip

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

Horizontal Stepper

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

Vertical Stepper

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

Modals

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

Drawer

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

Breadcrumb

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

Skeleton

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

Accordion

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

Progress Bar

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

Custom Theme

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.

License

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

Contributing

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