# system-components

> Create consistent design-system-driven React UI components

Latest version **3.0.3** (published 2019-02-11) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install system-components
pnpm add system-components
yarn add system-components
bun add system-components
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 3.0.3 |
| Published | 2019-02-11 |
| First published | 2018-01-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 13.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Brent Jackson |
| Maintainers | jxnblk |
| Keywords | react, components, styled-system, styled-components, emotion, design-system, theme, css-in-js |

## Links

- npm: https://www.npmjs.com/package/system-components
- npm.io page: https://npm.io/package/system-components

## Dependencies (1)

- [styled-system](https://npm.io/package/styled-system.md) ^3.2.1

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 3.0.3 (latest) — 2019-02-11
- 2.1.0-0 (alpha) — 2018-06-16
- 3.0.2 — 2018-11-04
- 3.0.1 — 2018-09-06
- 3.0.0 — 2018-07-15
- 2.2.3 — 2018-07-05
- 2.2.2 — 2018-06-22
- 2.2.1 — 2018-06-18
- 2.2.0 — 2018-06-16
- 2.1.2 — 2018-06-16
- 2.1.1 — 2018-06-16
- 2.1.0 — 2018-06-16
- 2.0.4 — 2018-06-10
- 2.0.3 — 2018-04-24
- 2.0.2 — 2018-02-22
- … 8 more at https://npm.io/package/system-components/versions

## README

**DEPRECATED: This package has been renamed and moved to [@rebass/components](https://github.com/rebassjs/components)**

# system-components

Create consistent design-system-driven React UI components

Built with [styled-system][sys],
with support for [styled-components][sc] & [emotion][emotion]

[![Build Status][build-badge]][build]

[build-badge]: https://img.shields.io/travis/jxnblk/system-components/master.svg?style=flat-square
[build]: https://travis-ci.org/jxnblk/system-components

```js
import system from 'system-components'

// creates a Box with default props tied to your theme
const Box = system({
  p: 2,
  bg: 'blue'
})
```

Or, to use with [emotion][emotion]:

```js
import system from 'system-components/emotion'
```

## Usage

To create a styled-component with default props that hook into [styled-system][sys] props, pass a plain object as the first argument to the `system` function.

```js
const Card = system({
  px: 2,
  py: 3,
  borderWidth: 1,
  borderColor: 'lightGray',
  borderRadius: 2
})
```

The system function will automatically apply [styled-system][sys] functions
to the underlying styled-component based on the keys of the `defaultProps` object.
System components also add prop type definitions and remove style props from the underlying HTML element.

See the [styled-system docs][sys] for a complete list of the available style functions.

### Add style props without defaultProps

System components can also be created with [styled-system][sys] props without defining `defaultProps`.

```js
const Box = system(
  'space',
  'width',
  'color'
)
```

This allows for style props to be passed to the component instance:

```jsx
<Box
  width={1/2}
  px={3}
  py={4}
  bg='blue'
/>
```

### Using custom functions

Custom style functions can be passed as an argument.

```js
const Box = system(
  props => ({
    height: props.height
  })
)
```

### Changing the underlying HTML element

System components default to using a `<div>` as the HTML element.
To change the HTML element use the `is` prop.

```js
const Heading = system({
  is: 'h2',
  m: 0,
  fontSize: 6
})
```

Since `is` is a prop, it can also be passed to the element when used.
This is useful for one-off changes to ensure semantic markup.

```js
<Heading is='h1'>
  Hello
</Heading>
```

### Extending components

To extend another component, set it as the default `is` prop in your component definition, or pass it as a prop to the component instance.

```js
const Text = system({
  fontSize: 2,
})

const Bold = system({
  is: Text,
  fontWeight: 'bold'
})
```

### CSS prop

To add one-off custom CSS to any system-component, use the `css` prop.

```js
<Heading css='opacity:0.75;'>
  Hello
</Heading>
```


## Using with other CSS-in-JS libraries

The base `System` class can be used to create a system-components function for any CSS-in-JS library.

```js
import { System } from 'system-components'
import styled from 'nano-style'

const system = new System({
  createComponent: type => (...args) => styled(type)(...args)
})

export default system
```

---

[MIT License](License.md)

[sys]: https://github.com/jxnblk/styled-system
[sc]: https://github.com/styled-components/styled-components
[emotion]: https://github.com/emotion-js/emotion

---
_Source: https://npm.io/package/system-components · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._