@graphprotocol/gds-react

@graphprotocol/gds-react

React components for The Graph Design System.

Installation

pnpm add @graphprotocol/gds-react

Peer Dependencies

This package requires the following peer dependencies:

pnpm add react react-dom react-is tailwindcss

Setup

• Ensure Tailwind CSS is installed and configured in your project (preferably with Vite).

• Replace the tailwind import in your main CSS file with @graphprotocol/gds-react:

  - @import 'tailwindcss';
  + @import '@graphprotocol/gds-react';
  

• Register source paths relative to your CSS file:

    @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.

• Wrap your app with GDSProvider:

  import { GDSProvider } from '@graphprotocol/gds-react'
  
  function App() {
    return <GDSProvider>{/* your app */}</GDSProvider>
  }
  

  The provider accepts optional props:

  • theme - 'dark' (default), 'light', or 'system'
  • direction - 'ltr' (default) or 'rtl'
  • language - defaults to 'en' as long as direction is 'ltr'

Usage

import { Button, Card, Input } from '@graphprotocol/gds-react'

function Example() {
  return (
    <Card>
      <Input label="Enter text..." />
      <Button variant="primary">Submit</Button>
    </Card>
  )
}

Exports

• @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
• @graphprotocol/gds-react/utils - React-specific utility functions

License

MIT