- 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.
I got this semi working:
nextjs 14 app folder structure
page.tsx
what would be a good place to get the
wallets
object? Looking at the sotrybook, it's not clear where it's getting the list from.