npm install gd-design-libraryGridKit is the official design system and component library from Grid Dynamics.
It provides a set of reusable, accessible, and themeable React UI components designed to accelerate the development of consistent, scalable applications – with a focus on e-commerce and enterprise platforms.
---
- 🧩 35+ modular components (core, layout, domain-specific)
- 🎨 Theming support with dynamic runtime switching
- 🔗 Design tokens synced with Figma
- 📦 Optimized build using Vite
- 📚 Fully documented via Storybook
- ♿ WCAG 2.1 AA-compliant components
- ⚙️ Type-safe and fully tested with Vitest + RTL
---
Start by ensuring that you already have @emotion/react and @emotion/styled installed. Then, run one of the following commands to install the dependencies:
``bash`
npm install gd-design-library @emotion/styled @emotion/reactor
yarn add gd-design-library @emotion/styled @emotion/react
Make sure you're using Node.js version ≥22.17.0.
Note: Since this package is private, you need to configure your .npmrc with a valid auth token:
`bash`
//registry.npmjs.org/:_authToken=
---
- Node.js (22.17.0 or higher)
- Yarn or npm
`bash`
git clone https://github.com/griddynamics/cto-rnd-system-design.git
cd gd-design-system
yarn install
---
Start the local dev server with Vite:
`bash`
yarn dev
Open http://localhost:5173 in your browser.
`bash`
yarn storybook
---
`bash`
gd-design-system/
├── src/
│ ├── components/
│ │ ├── core/ # Core UI components (Button, Input, etc.)
│ │ ├── domainSpecific/ # Business-specific components
│ ├── tokens/ # Design tokens from Figma
│ ├── hooks/ # Shared React hooks
│ └── utils/ # Utility functions
├── .storybook/ # Storybook config
├── vite.config.ts # Vite config
├── tsconfig.json # TypeScript config
├── README.md
---
`bash`
yarn test
`bash`
yarn lint
`bash`
yarn format
`bash`
yarn format:check
---
Use our CLI script to quickly scaffold new components:
`bash`
chmod +x ./bin/create-component.js
`bash`
yarn crc ButtonGroup
You’ll be prompted to select:
- core
-
The script will generate boilerplate files and update exports automatically.
---
Wrap your app in the ThemeProvider with isDefault to apply default GD global styles and tokens:
`tsx
import { ThemeProvider } from 'gd-design-library';
// OPTIONAL: default GD global styles, reset, font.
import 'gd-design-library/styles.css';
function App() {
return (
);
}
`
or initialTheme to install custom one as default initially
`json`
{
"name": "myCustomTheme",
"componentAStyles": {
"style": "value"
}
}
`tsx
import { ThemeProvider, defaultTheme } from 'gd-design-library';
import myCustomTheme from 'PROJECT_PATH/myCustomTheme'; // JSON or any js/ts and similliar with object return
const App = () => {
// In case you want extend default theme, by overwriting only particular components
const initialTheme = Object.assign({}, defaultTheme, myCustomTheme);
return (
);
};
`
You can now use components like this:
`tsx
import { Button } from 'gd-design-library';
;
`
Here’s a minimal React app example showing how to create and apply custom theme based on default, exactly like in your snippet.
Example structure:
- main.tsx: wraps the app with ThemeProvider
`tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { ThemeProvider } from 'gd-design-library';
ReactDOM.createRoot(document.getElementById('root')!).render(
);
`
- useCustomTheme.tsx: theme hook
\\ Can be used on top level instead isDefault, use initialTheme, based on updateThemeTokens & defaultTheme from hook snippet
`tsx
import { useEffect } from 'react';
import { updateThemeTokens, defaultTheme, useTheme } from 'gd-design-library';
export default function useCustomTheme() {
const { addTheme, setTheme } = useTheme();
const customTheme = {
...defaultTheme,
name: 'CustomTheme',
};
useEffect(() => {
// Customise tokens
updateThemeTokens(customTheme, {
'select.dropdown': {
backgroundColor: 'red',
borderRadius: '10px',
boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)',
padding: '10px',
width: '200px',
height: '200px',
zIndex: 1000,
position: 'absolute',
top: '50%',
left: '50%',
},
// any other theme overwrites here
'button.default': {
borderRadius: '32px',
},
'chatbubble.question': {
background: '#F1F5FA',
},
});
// Add customTheme in a theme scope
addTheme(customTheme.name, customTheme);
//Set customTheme as an active, optional on demand to apply as an active
setTheme(customTheme.name);
}, []);
}
`
- App.tsx: renders a Select to demonstrate the change
`tsx
import React from 'react';
import { FlexContainer, Typography, Row, Select, type Option } from 'gd-design-library';
import useCustomTheme from './useCustomTheme';
const items: Option[] = [
{ name: 'Option 1', value: 'option1' },
{ name: 'Option 2', value: 'option2' },
{ name: 'Option 3', value: 'option3' },
];
export default function App() {
useCustomTheme();
return (
);
}
``
---
Explore our hosted Storybook:
👉 https://storybook.cto-rnd-system-design.griddynamics.net
---
© Grid Dynamics. All rights reserved.
This package is for internal and authorized client use only.
---