https://github.com/iwatakeshi/chakra-step

A component to create steps similar to Studio's steps section.
https://github.com/iwatakeshi/chakra-step

Last synced: 6 days ago
JSON representation

A component to create steps similar to Studio's steps section.

• Host: GitHub
• URL: https://github.com/iwatakeshi/chakra-step
• Owner: iwatakeshi
• License: mit
• Created: 2022-05-11T23:34:20.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-05-18T00:08:55.000Z (over 2 years ago)
• Last Synced: 2024-08-08T18:36:35.923Z (5 months ago)
• Language: TypeScript
• Homepage:
• Size: 2.21 MB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# chakra-step

A component to create steps similar to [Studio's steps section](https://studio.com/david-blaine-magic#how-it-works-section).

![Step](./screenshot.png)

## Usage

Import the component styles:

```ts

import { components } from "@iwatakeshi/chakra-step"

// ...

// Add to your theme

export const theme = extendTheme({

  components: {

    // ...

    ...components

  }

})

```

Start using the component

```tsx

import { Step, StepItem } from "@iwatakeshi/chakra-step"

import { Box } from "@chakra-ui/react"

// See the Page story in the stories directory for a complete example

export default function App() {

  return 

    

     {/* Left */}

     

       {/* ... */}

     

     {/* Right */}

     

     {/* ... */}

     

    

  

}

```

### How It Works

The left and right side both have `50vw` applied to their widths. This keeps the line centered between the two sides. If a `Container` component is used to wrap the `Step` component, you will need to change the widths by doing the following:

```tsx

```

## Contribution

If you would like to improve this library, feel free to create a pull request.