
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:
- coredomainSpecific
-
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.
---