- In your React project, install dependency:
If you're using yarn:
yarn add @interchain-ui/react
If you're using npm:
npm i @interchain-ui/react
- Setting up your root layout/ route:
- import the css stylesheet into your root layout:
// This is a global CSS reset, optional
import '@interchain-ui/react/globalStyles';
// This is all components styles
import '@interchain-ui/react/styles';
- wrap the root layout with our
ThemeProvider
and attach the theming class to a container:
import { ThemeProvider, useTheme } from '@interchain-ui/react';
const MyRootLayout = (props) => {
const { theme, themeClass, setTheme } = useTheme();
return (
<ThemeProvider>
<main className={themeClass}>
{props.children}
</main>
</ThemeProvider>
);
};
- You can start to use our components at this point. All components are in: https://interchain-storybook-static.surge.sh/
We will frequently update this page and a nicer components explorer is on the way! Any questions let me know.
@daniel-farina Hi! Right now this library can be used with
"use client";
directive because a part of it still use React's client hooks likeuseState
..etc. We are working on making it RSC compatible. Other than that there's no limitation to use.Btw we recently moved the docs and storybook, the new storybook URL is: storybook.cosmology.zone