React components for The Graph Design System
npm install @graphprotocol/gds-reactReact components for The Graph Design System.
``bash`
pnpm add @graphprotocol/gds-react
This package requires the following peer dependencies:
`bash`
pnpm add react react-dom react-is tailwindcss
1. Ensure Tailwind CSS is installed and configured in your project (preferably with Vite).
2. Replace the tailwind import in your main CSS file with @graphprotocol/gds-react:
`diff`
- @import 'tailwindcss';
+ @import '@graphprotocol/gds-react';
3. Register source paths relative to your CSS file:
`diff`
@import '@graphprotocol/gds-react';
+ @source '../src';
@graphprotocol/gds-react disables Tailwind's default content scanning as an optimization measure, so you must explicitly register your source paths using @source directives. Make sure to include all paths where Tailwind classes are used.
4. Wrap your app with GDSProvider:
`tsx
import { GDSProvider } from '@graphprotocol/gds-react'
function App() {
return
}
`
The provider accepts optional props:
- theme - 'dark' (default), 'light', or 'system'
- - 'ltr' (default) or 'rtl'
- - defaults to 'en' as long as direction is 'ltr'
`tsx
import { Button, Card, Input } from '@graphprotocol/gds-react'
function Example() {
return (
)
}
`
- @graphprotocol/gds-react - Styled components@graphprotocol/gds-react/base
- - Base/primitive (mostly unstyled) components@graphprotocol/gds-react/hooks
- - React hooks that are useful when working with GDS components@graphprotocol/gds-react/icons
- - React components for gds-icons
-
MIT