@sul/ui NPM | npm.io

SUL UI

SUL UI is designed to provide a solid foundation for websites and applications. With a primary goal to standardize components across projects.

SUL UI is an extension of theme-ui and is based on a theme specification.

Core Principles:

Each component is simple and intuitive
Each component is 100% tested
Each component is responsive
Each component is well defined with design, ux and development documentation

Install

npm install @sul/ui

Usage

SUL UI is designed to be simple. Each component is built to work in isolation and self-supporting.

Quick Start

import React from 'react'
import ReactDOM from 'react-dom'
import { ThemeProvider, Button } from '@sul/ui'

import theme from './theme'

const App = () => (
  <ThemeProvider theme={theme}>
    <Button>Hello World</Button>
  </ThemeProvider>
)

ReactDOM.render(<App />, document.querySelector('#app'))

To provide the theme in context, wrap your application with the ThemeProvider component and pass in a custom theme object.

The theme object follows the system-ui theme specification.

// example theme.js
export default {
  fonts: {
    body:
      'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
    heading: '"Avenir Next", sans-serif',
    monospace: 'Menlo, monospace',
  },
  colors: {
    text: '#000',
    background: '#fff',
    primary: '#33e',
  },
}

Component Status

Current version: Pre-release 1.0.0-alpha.1

SUL UI is a living, breathing system that will grow with our needs. Here you'll find the ongoing status of our system. Stable signifies the component is ready to be used in a production environment. Experimental components, designs and other resources are presented for testing and feedback. They're not intended for production use.

Elements

Provide basic building blocks. These are typically low-level presentational components.

Component	Stable	Experimental
AspectRatio	✓	-
Button	✓	-
Divider	✓	-
Form	✓	-
Heading	✓	-
Icon	✓	-
Image	✓	-
Link	✓	-
Text	✓	-

Layout

Provide or manipulate structure in some way.

Component	Stable	Experimental
Article	✓	-
Box	✓	-
Card	✓	-
Container	✓	-
Flex	✓	-
Grid	✓	-
Section	✓	-

Modules

Modules are lower-level functional utilities or components. Typically these are extended and used in presentational level components.

Component	Stable	Experimental
Layer	✓	-
Popover	-	✓

Patterns

Provide advanced layout and additional functionality. These components are typically more opinionated on structure.

Component	Stable	Experimental
Copyright	✓	-
MailTo	✓	-
Modal	✓	-

Utilities

Utility	Stable	Experimental
keyboard	✓	-

Tag Descriptions

Tag	Name	Definition
✓	Ready	The component is design and dev ready
⚠	Under Review	Indicates that a component’s design, code, or usage is being re-examined or created.
X	Deprecated	Deprecated components have either been completely replaced by new components or are no longer being supported in the component library.
(New)		This component is brand new to SUL UI
(Updated)		Applied only to existing components after they have been under review, tweaked, and re-released to the design system.