---
title: "Core"
canonical: https://sky-ui.cf.sky.com/core
apiPackages: [{"name":"@sky-uk/ui-core","representedVersion":"14.1.0"}]
---

# Core

System modifiers, hooks, and utilities for building with Sky UI.

## 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:

```jsx
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](/core/system/margin/),
[padding](/core/system/padding/), and [colour](/core/system/color/) for common styling options.

## Hooks

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

```jsx
'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](/core/hooks/use-reduced-motion/),
[translations](/core/hooks/use-translation/), and
[viewport visibility](/core/hooks/use-intersection/) for more examples.

## Utilities

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

```jsx
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](/core/utilities/responsive-css/),
[focus styles](/core/utilities/focus-mixin/), and
[gradients](/core/utilities/generate-simple-gradient/).

For shared design values, see [Foundations](/foundations/). For practical styling and composition
examples, follow [Building with Sky UI](/intro-to-sky-ui/building-with-sky-ui/).