Illust
MarketplaceGlobal Art MapBlogTwitter
  • Illust.space
  • .github
    • pull_request_template
  • docs
    • Illust Dev Docs
    • Packages
    • process
    • dev-workflow
      • Deployment
      • Development process
      • Visual Studio Code
    • libraries
      • Storybook
      • Act
      • Aframe
      • Chakra UI
      • Cypress
      • Hosting
      • React Three Fiber
        • Shadows
      • Firebase
        • Firestore
      • zustand
      • Firebase Url Shotener
    • Flows
      • User Sign In
      • Aframe AR Map
  • packages
    • Illust API
    • Illust Marketplace
    • Migrate DB
    • scraper
    • Illust Shared
    • Illust WebAR Discovery App
  • Illust Code Style Guide
    • JavaScript/TypeScript
    • Code Orgainzation
    • React
    • Testing
  • Knowledge Base
    • React
      • Hooks
Powered by GitBook
On this page

Was this helpful?

  1. docs
  2. libraries

Chakra UI

PreviousAframeNextCypress

Last updated 3 years ago

Was this helpful?

We use as the UI library.

Some useful pointers:

The holds the shared fonts, colors, and sizes used across the apps. Chakra props will be theme-aware, so you should generally not refer directly to fonts, colors, and spacing sizes, but instead pull them from the theme.

It's often useful to create a delegating component that renders a chakra component and takes all of its props, plus some extra props for specific logic:

export interface MyComponentProps extends ChakraComponentProps {
  myProp: boolean;
}

export const MyComponent: FunctionComponent<MyComponentProps> => ({myProp, ...props}) => {
  return <ChakraComponent {...props}>
    <OtherComponent myProp={myProp} />
  </ChakraComponent>
}
Chakra UI
theme.ts