Core

Introduction

Core provides styling tools and reusable behaviour through @sky-uk/ui-core.

System modifiers

System modifiers adjust component styles through props, including responsive values. This example adds more space above the button on larger screens:

import { Button } from '@sky-uk/ui-core';

export const ContinueButton = () => (
  <Button $marginTop={{ xs: 4, lg: 6 }}>Continue</Button>
);

Check each component's React API for supported modifiers. Explore margin, padding, and colour for common styling options.

Hooks

Hooks add reusable behaviour to React components. For example, useReducedMotion reads the user's motion preference:

'use client';

import { useReducedMotion } from '@sky-uk/ui-core';

export function MotionPreference() {
  const { reducedMotion } = useReducedMotion();

  return <p>{reducedMotion ? 'Reduced motion enabled' : 'Standard motion enabled'}</p>;
}

See reduced motion, translations, and viewport visibility for more examples.

Utilities

Utilities help with common styling tasks. For example, responsiveCss creates responsive styles for your own styled components:

import styled, { css } from 'styled-components';
import { responsiveCss, spacing } from '@sky-uk/ui-core';

export const Panel = styled.div`
  ${responsiveCss(
    { padding: { xs: spacing(4), lg: spacing(6) } },
    ({ padding }) => css`padding: ${padding};`
  )}
`;

Explore responsive CSS, focus styles, and gradients.

For shared design values, see Foundations. For practical styling and composition examples, follow Building with Sky UI.