https://github.com/bouiboui/remix-chakra-ui

Sparse checkout of https://github.com/remix-run/remix/tree/main/examples/chakra-ui
https://github.com/bouiboui/remix-chakra-ui

Last synced: 3 months ago
JSON representation

Sparse checkout of https://github.com/remix-run/remix/tree/main/examples/chakra-ui

• Host: GitHub
• URL: https://github.com/bouiboui/remix-chakra-ui
• Owner: bouiboui
• Created: 2022-01-26T13:49:54.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2025-01-23T15:49:34.000Z (3 months ago)
• Last Synced: 2025-01-23T16:35:42.493Z (3 months ago)
• Language: TypeScript
• Size: 128 KB
• Stars: 1
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Chackra UI Example

In this setup we will setup Chakra UI with Remix.

Please note that when adding Chakra UI to a TypeScript project, a minimum TypeScript version of `4.1.0` is required

## Preview

Open this example on [CodeSandbox](https://codesandbox.com):

[![Open in CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/remix-run/remix/tree/main/examples/chakra-ui)

## Run and debug in the cloud with Codeanywhere

[![Open in Codeanywhere](https://codeanywhere.com/img/open-in-codeanywhere-btn.svg)](https://app.codeanywhere.com/#https://github.com/remix-run/remix/tree/main/examples/chakra-ui)

## Example

This example shows how to use Chakra UI with Remix.

Check [app/root.tsx](./app/root.tsx) where Chakra UI is imported and provides context to the component tree.

Uncomment the thrown error on `./app/root.tsx` to see how Chackra UI handles your styles graciously on `CatchBoundary`. Then, navigate a **Not Found** route (like `/admin`) to see `ErrorBoundary` in action.

## Related Links

[Chakra UI](https://chakra-ui.com/guides/getting-started/remix-guide)