Skip to main content

Get Started

Installation​

npm install @shelter-england/design-system

Setup​

Wrap your application with ShelterThemeProvider and include GlobalStyle for base styles and fonts:

import {
  ShelterThemeProvider,
  GlobalStyle,
  Button,
} from '@shelter-england/design-system';
import theme from '@shelter-england/theme';

function App() {
  return (
    <ShelterThemeProvider theme={theme}>
      <GlobalStyle />
      <Button variant="primary">Get Started</Button>
    </ShelterThemeProvider>
  );
}

Next Steps​

  • Styles - Colours, typography, and spacing tokens
  • Components - Interactive UI elements
  • Patterns - Complete solutions with validation and behaviour
  • Accessibility - WCAG compliance and inclusive design