GSK custom component library with design tokens
npm install @gsk_poc/componentsjson
{
"react": ">=18.0.0",
"react-dom": ">=18.0.0",
"node": ">=18.0.0",
"npm": ">=9.0.0"
}
`
$3
`json
{
"react": "^19.0.0",
"react-dom": "^19.0.0",
"typescript": "^5.0.0",
"node": ">=20.0.0"
}
`
$3
| Browser | Minimum Version |
|---------|----------------|
| Chrome | 90+ |
| Firefox | 88+ |
| Safari | 14+ |
| Edge | 90+ |
| Mobile Safari (iOS) | 14+ |
| Chrome Android | 90+ |
Note: IE11 is not supported.
---
š Installation
$3
`bash
npm install @gsk/gsk-design-system
OR using yarn
yarn add @gsk/gsk-design-system
OR using pnpm
pnpm add @gsk/gsk-design-system
`
$3
`bash
npm install react@^18.0.0 react-dom@^18.0.0
If using TypeScript
npm install --save-dev typescript @types/react @types/react-dom
`
---
š Quick Start Guides
$3
Best for: Standard React applications with TypeScript
#### Step 1: Create Project
`bash
npx create-react-app my-gsk-app --template typescript
cd my-gsk-app
`
#### Step 2: Install Component Library
`bash
npm install @gsk/gsk-design-system
npm install tailwindcss@^4.0.0 @tailwindcss/vite --save-dev
`
#### Step 3: Configure Tailwind CSS
Create tailwind.config.js:
`javascript
/* @type {import('tailwindcss').Config} /
module.exports = {
content: [
"./src/*/.{js,jsx,ts,tsx}",
"./node_modules/@gsk/gsk-design-system/*/.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
`
#### Step 4: Import CSS
Update src/index.tsx:
`typescript
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
// Import GSK Design System CSS
import '@gsk/gsk-design-system/dist/styles/tokens.css';
import '@gsk/gsk-design-system/dist/styles/globals.css';
import '@gsk/gsk-design-system/dist/styles/theme.css';
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
root.render(
);
`
#### Step 5: Use Components
Update src/App.tsx:
`typescript
import React from 'react';
import { GSKButton, GSKInput } from '@gsk/gsk-design-system';
function App() {
const [email, setEmail] = React.useState('');
return (
My GSK Application
label="Email Address"
type="email"
placeholder="you@company.com"
value={email}
onChange={(e) => setEmail(e.target.value)}
isRequired
/>
Submit
);
}
export default App;
`
#### Step 6: Run Application
`bash
npm start
`
Your app will be running at http://localhost:3000
---
$3
Best for: JavaScript-only React applications
#### Step 1: Create Project
`bash
npx create-react-app my-gsk-app
cd my-gsk-app
`
#### Step 2: Install Component Library
`bash
npm install @gsk/gsk-design-system
npm install tailwindcss@^4.0.0 @tailwindcss/vite --save-dev
`
#### Step 3: Configure Tailwind CSS
Create tailwind.config.js:
`javascript
/* @type {import('tailwindcss').Config} /
module.exports = {
content: [
"./src/*/.{js,jsx}",
"./node_modules/@gsk/gsk-design-system/*/.{js,jsx}",
],
}
`
#### Step 4: Import CSS
Update src/index.js:
`javascript
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
// Import GSK Design System CSS
import '@gsk/gsk-design-system/dist/styles/tokens.css';
import '@gsk/gsk-design-system/dist/styles/globals.css';
import '@gsk/gsk-design-system/dist/styles/theme.css';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
);
`
#### Step 5: Use Components
Update src/App.js:
`javascript
import React, { useState } from 'react';
import { GSKButton, GSKInput } from '@gsk/gsk-design-system';
function App() {
const [email, setEmail] = useState('');
return (
My GSK Application
label="Email Address"
type="email"
placeholder="you@company.com"
value={email}
onChange={(e) => setEmail(e.target.value)}
isRequired
/>
Submit
);
}
export default App;
`
#### Step 6: Run Application
`bash
npm start
`
---
$3
Best for: Fast development with modern tooling
#### Step 1: Create Project
`bash
npm create vite@latest my-gsk-app -- --template react-ts
cd my-gsk-app
`
#### Step 2: Install Dependencies
`bash
npm install
npm install @gsk/gsk-design-system
npm install tailwindcss@^4.0.0 @tailwindcss/vite --save-dev
`
#### Step 3: Configure Vite
Update vite.config.ts:
`typescript
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
plugins: [
react(),
tailwindcss() // Add Tailwind plugin
],
})
`
#### Step 4: Configure Tailwind
Create tailwind.config.js:
`javascript
/* @type {import('tailwindcss').Config} /
export default {
content: [
"./index.html",
"./src/*/.{js,ts,jsx,tsx}",
"./node_modules/@gsk/gsk-design-system/*/.{js,jsx,ts,tsx}",
],
}
`
#### Step 5: Import CSS
Update src/main.tsx:
`typescript
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'
// Import GSK Design System CSS
import '@gsk/gsk-design-system/dist/styles/tokens.css'
import '@gsk/gsk-design-system/dist/styles/globals.css'
import '@gsk/gsk-design-system/dist/styles/theme.css'
ReactDOM.createRoot(document.getElementById('root')!).render(
,
)
`
#### Step 6: Use Components
Update src/App.tsx:
`typescript
import React, { useState } from 'react'
import { GSKButton, GSKInput } from '@gsk/gsk-design-system'
function App() {
const [email, setEmail] = useState('')
return (
My GSK Application
label="Email Address"
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
Submit
)
}
export default App
`
#### Step 7: Run Application
`bash
npm run dev
`
---
$3
Best for: Fast development without TypeScript
Follow the same steps as Option 3, but:
- Use --template react instead of --template react-ts
- Name files with .js and .jsx extensions
- Remove type annotations from code
---
$3
Best for: Server-side rendered applications
#### Step 1: Create Project
`bash
npx create-next-app@latest my-gsk-app --typescript
cd my-gsk-app
`
Answer prompts:
`
ā Would you like to use ESLint? ⦠Yes
ā Would you like to use Tailwind CSS? ⦠Yes
ā Would you like to use src/ directory? ⦠Yes
ā Would you like to use App Router? ⦠Yes
ā Would you like to customize the default import alias? ⦠No
`
#### Step 2: Install Component Library
`bash
npm install @gsk/gsk-design-system
`
#### Step 3: Configure Tailwind
Update tailwind.config.ts:
`typescript
import type { Config } from "tailwindcss";
const config: Config = {
content: [
"./src/pages/*/.{js,ts,jsx,tsx,mdx}",
"./src/components/*/.{js,ts,jsx,tsx,mdx}",
"./src/app/*/.{js,ts,jsx,tsx,mdx}",
"./node_modules/@gsk/gsk-design-system/*/.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
};
export default config;
`
#### Step 4: Import CSS
Update src/app/layout.tsx:
`typescript
import type { Metadata } from "next";
import "./globals.css";
// Import GSK Design System CSS
import '@gsk/gsk-design-system/dist/styles/tokens.css';
import '@gsk/gsk-design-system/dist/styles/globals.css';
import '@gsk/gsk-design-system/dist/styles/theme.css';
export const metadata: Metadata = {
title: "My GSK App",
description: "Built with GSK Design System",
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
{children}
);
}
`
#### Step 5: Use Components
Update src/app/page.tsx:
`typescript
'use client';
import React, { useState } from 'react';
import { GSKButton, GSKInput } from '@gsk/gsk-design-system';
export default function Home() {
const [email, setEmail] = useState('');
return (
My GSK Application
label="Email Address"
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
Submit
);
}
`
ā ļø Important: Next.js components need 'use client' directive when using React hooks.
#### Step 6: Run Application
`bash
npm run dev
`
---
$3
Follow the same steps as Option 5, but:
- Remove --typescript flag
- Use .js and .jsx extensions
- Remove type annotations
---
šØ CSS Framework Options
$3
| CSS Solution | Supported | Notes |
|-------------|-----------|-------|
| Tailwind CSS v4+ | ā
Required | Used internally by components |
| CSS Modules | ā
Yes | For custom styles |
| Styled Components | ā
Yes | Can wrap our components |
| Emotion | ā
Yes | Can wrap our components |
| Plain CSS | ā
Yes | For custom styles |
| SASS/SCSS | ā
Yes | For custom styles |
| CSS-in-JS | ā
Yes | Any solution works |
$3
| Limitation | Reason |
|-----------|--------|
| ā Remove Tailwind CSS | Components depend on Tailwind utilities |
| ā Use Tailwind v3 | Components require v4+ features |
| ā Modify component internals | Use composition instead |
| ā Override design tokens directly | Use theme extension instead |
$3
#### Option 1: Extend with Custom CSS
`css
/ CustomButton.module.css /
.myButton {
/ Your custom styles here /
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
`
`typescript
import { GSKButton } from '@gsk/gsk-design-system';
import styles from './CustomButton.module.css';
Custom Styled Button
`
#### Option 2: Styled Components Wrapper
`typescript
import styled from 'styled-components';
import { GSKButton } from '@gsk/gsk-design-system';
const StyledButton = styled(GSKButton)
;
Styled Button
`
#### Option 3: Inline Styles
`typescript
variant="primary"
style={{ marginTop: '20px', boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)' }}
>
Button with Inline Styles
`
---
š¦ Available Components
$3
| Component | Description | TypeScript | Status |
|-----------|-------------|------------|--------|
| GSKButton | Buttons with variants | ā
| Stable |
| GSKInput | Text inputs with validation | ā
| Stable |
| GSKCheckbox | ā³ Coming Soon | ā
| Beta |
| GSKRadio | ā³ Coming Soon | ā
| Beta |
| GSKSelect | ā³ Coming Soon | ā
| Beta |
| GSKTextarea | ā³ Coming Soon | ā
| Beta |
| GSKToggle | ā³ Coming Soon | ā
| Beta |
$3
| Component | Description | TypeScript | Status |
|-----------|-------------|------------|--------|
| GSKBadge | ā³ Coming Soon | ā
| Planned |
| GSKCard | ā³ Coming Soon | ā
| Planned |
| GSKTable | ā³ Coming Soon | ā
| Planned |
| GSKAvatar | ā³ Coming Soon | ā
| Planned |
$3
| Component | Description | TypeScript | Status |
|-----------|-------------|------------|--------|
| GSKAlert | ā³ Coming Soon | ā
| Planned |
| GSKToast | ā³ Coming Soon | ā
| Planned |
| GSKModal | ā³ Coming Soon | ā
| Planned |
| GSKSpinner | ā³ Coming Soon | ā
| Planned |
---
š» Usage Examples
$3
`typescript
import React, { useState } from 'react';
import { GSKButton, GSKInput } from '@gsk/gsk-design-system';
function LoginForm() {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [errors, setErrors] = useState<{ email?: string; password?: string }>({});
const validate = () => {
const newErrors: typeof errors = {};
if (!email) {
newErrors.email = 'Email is required';
} else if (!/\S+@\S+\.\S+/.test(email)) {
newErrors.email = 'Email is invalid';
}
if (!password) {
newErrors.password = 'Password is required';
} else if (password.length < 8) {
newErrors.password = 'Password must be at least 8 characters';
}
setErrors(newErrors);
return Object.keys(newErrors).length === 0;
};
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
if (validate()) {
console.log('Form submitted:', { email, password });
// Handle login logic
}
};
return (
);
}
export default LoginForm;
`
$3
`typescript
import React, { useState } from 'react';
import { GSKButton, GSKInput } from '@gsk/gsk-design-system';
interface ContactFormData {
name: string;
email: string;
phone: string;
message: string;
}
function ContactForm() {
const [formData, setFormData] = useState({
name: '',
email: '',
phone: '',
message: '',
});
const handleChange = (field: keyof ContactFormData) => (
e: React.ChangeEvent
) => {
setFormData({ ...formData, [field]: e.target.value });
};
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
console.log('Contact form submitted:', formData);
};
return (
);
}
export default ContactForm;
`
---
šØ Styling Customization
$3
All components use CSS custom properties that can be overridden:
`css
/ In your global CSS file /
:root {
/ Override brand colors /
--color-brand-600: #your-brand-color;
/ Override spacing /
--spacing-lg: 16px;
/ Override radius /
--radius-md: 8px;
/ Override typography /
--font-family-body: 'Your Font', sans-serif;
}
`
$3
`css
/ Enable dark mode /
.dark-mode {
--color-bg-primary: #1a1a1a;
--color-text-primary: #ffffff;
/ ... more dark mode overrides /
}
`
`typescript
// Toggle dark mode
`
---
š TypeScript Support
$3
All components include complete TypeScript definitions:
`typescript
import { GSKButton, GSKInput, GSKButtonProps, GSKInputProps } from '@gsk/gsk-design-system';
// Props are fully typed
const buttonProps: GSKButtonProps = {
variant: 'primary', // Autocomplete available
onClick: () => console.log('clicked'),
children: 'Click me',
};
const inputProps: GSKInputProps = {
label: 'Email',
type: 'email', // Type-safe
onChange: (e) => console.log(e.target.value), // Event types inferred
};
`
$3
Library works perfectly in JavaScript projects - TypeScript is optional!
`javascript
// Works in .js files
import { GSKButton, GSKInput } from '@gsk/gsk-design-system';
Click me
`
---
š Browser Support
| Feature | Support |
|---------|---------|
| CSS Grid | ā
Modern browsers |
| CSS Custom Properties | ā
Required |
| ES6+ JavaScript | ā
Transpiled |
| Flexbox | ā
Full support |
| CSS Animations | ā
Hardware accelerated |
Polyfills NOT included - Add them to your project if needed.
---
ā
What's Included / ā What's Not
$3
| Feature | Included | Notes |
|---------|----------|-------|
| React Components | ā
| 50+ components |
| TypeScript Definitions | ā
| Full type safety |
| CSS Styling | ā
| Design token-driven |
| Accessibility | ā
| WCAG 2.1 AA |
| Dark Mode Support | ā
| Built-in |
| Responsive Design | ā
| Mobile-first |
| Tree-Shaking | ā
| Import only what you need |
| Storybook Docs | ā
| View Documentation |
$3
| Feature | Included | Alternative |
|---------|----------|-------------|
| State Management | ā | Use Redux, Zustand, etc. |
| Routing | ā | Use React Router, Next.js Router |
| API Client | ā | Use Axios, Fetch, etc. |
| Form Validation Library | ā | Use React Hook Form, Formik |
| Icons | ā | Use Heroicons, React Icons |
| Charts/Graphs | ā | Use Recharts, Chart.js |
| Date Picker | ā | Use React DatePicker |
| Rich Text Editor | ā | Use Draft.js, Slate |
$3
`bash
Forms
npm install react-hook-form
Routing (if not using Next.js)
npm install react-router-dom
Icons
npm install @heroicons/react
Date handling
npm install date-fns
HTTP client
npm install axios
`
---
š Migration Guide
$3
`diff
- import { Button } from 'react-bootstrap';
+ import { GSKButton } from '@gsk/gsk-design-system';
-
+ Click
`
$3
`diff
- import { Button, TextField } from '@mui/material';
+ import { GSKButton, GSKInput } from '@gsk/gsk-design-system';
-
+
`
$3
`diff
- import { Button, Input } from 'antd';
+ import { GSKButton, GSKInput } from '@gsk/gsk-design-system';
-
+
`
---
š§ Troubleshooting
$3
Problem: Components render but have no styling
Solution: Ensure CSS files are imported:
`typescript
import '@gsk/gsk-design-system/dist/styles/tokens.css';
import '@gsk/gsk-design-system/dist/styles/globals.css';
import '@gsk/gsk-design-system/dist/styles/theme.css';
`
---
$3
Problem: Cannot find module '@gsk/gsk-design-system'
Solution: Ensure types are installed:
`bash
npm install --save-dev @types/react @types/react-dom
`
---
$3
Problem: Module not found: Can't resolve '@gsk/gsk-design-system'
Solution: Add to next.config.js:
`javascript
module.exports = {
transpilePackages: ['@gsk/gsk-design-system'],
}
`
---
$3
Problem: Styles overriding component styles
Solution: Use CSS specificity or CSS modules:
`css
/ Use more specific selectors /
.my-app .gsk-button {
/ Your overrides /
}
`
---
š Support & Resources
$3
- š Component Documentation
- šØ Design Tokens Guide
- š§ API Reference
- š” Examples Repository
$3
- š¬ GitHub Discussions
- š Report Issues
- š§ Email: design-system-team@gsk.com
- š¼ Slack Channel (Internal)
$3
We welcome contributions! See CONTRIBUTING.md for guidelines.
$3
See CHANGELOG.md for version history.
$3
MIT License - see LICENSE file for details.
---
š Quick Reference
$3
- [ ] Install @gsk/gsk-design-system
- [ ] Install react and react-dom (v18+)
- [ ] Install tailwindcss (v4+)
- [ ] Configure Tailwind to scan component library
- [ ] Import CSS files in correct order
- [ ] Start building!
$3
`typescript
// Always import from main package
import { GSKButton, GSKInput } from '@gsk/gsk-design-system';
// CSS imports (once in entry file)
import '@gsk/gsk-design-system/dist/styles/tokens.css';
import '@gsk/gsk-design-system/dist/styles/globals.css';
import '@gsk/gsk-design-system/dist/styles/theme.css';
``