Skip to content

Instantly share code, notes, and snippets.

@yyyyaaa

yyyyaaa/getting-started.md

Created November 28, 2023 08:43
Show Gist options
  • Save yyyyaaa/65cca11e3fd5d971b77fc8f3b06de727 to your computer and use it in GitHub Desktop.
Save yyyyaaa/65cca11e3fd5d971b77fc8f3b06de727 to your computer and use it in GitHub Desktop.
Download ZIP
Getting started with @interchain-ui/react
Raw
getting-started.md
  1. 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

  1. 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>
    );
};

We will frequently update this page and a nicer components explorer is on the way! Any questions let me know.

@daniel-farina
Copy link

Quick update:
This would be the right format to get it to work on 13.5.6 I'm trying 13.5.6 with the app directory first before jumping to 14.

'use client';
import { Inter } from 'next/font/google'
import './globals.css'
// This is a global CSS reset, optional
import '@interchain-ui/react/globalStyles';
// This is all components styles
import '@interchain-ui/react/styles';
import { ThemeProvider, useTheme } from '@interchain-ui/react';


const inter = Inter({ subsets: ['latin'] })


const RootLayout = ({
  children,
}: {
  children: React.ReactNode
}) => {
  const { theme, themeClass, setTheme } = useTheme();
  return (
      <html>
       <body>
       <ThemeProvider>
          <main className={themeClass}>
              {children}
          </main>
      </ThemeProvider>
       </body>
      </html>
  );
};

export default RootLayout;

@daniel-farina
Copy link

I started a project here for nextjs integration:
https://github.com/daniel-farina/interchain-ui-nextjs

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment