Skip to main content

Components

Reusable interface elements built with accessibility and consistency in mind. Components are context-agnostic with no domain logic, designed to be composed together.

The library is a work in progress and currently contains 60+ components. Documentation is being added progressively - see Storybook for the full list with interactive examples.

Usage​

import { Button, Callout } from '@shelter-england/design-system';

function Example() {
  return (
    <div>
      <Callout
        backgroundColor="grey"
        borderColor="blue"
        icon="exclamation-mark"
      >
        This is an important message for users.
      </Callout>

      <Button variant="primary" onClick={() => console.log('clicked')}>
        Take Action
      </Button>
    </div>
  );
}

Component Principles​

  • Accessibility first - Semantic HTML, ARIA attributes, keyboard navigation, WCAG 2.1 AA tested
  • Design token driven - All styling uses theme values, no hard-coded colours or spacing
  • Presentational only - No domain logic or validation; combine with patterns for complete solutions