# @sul/ui > SUL UI is designed to provide a solid foundation for websites and applications. With a primary goal to standardize components across projects. Latest version **1.0.0-alpha.1** (published 2020-03-29) · MIT license · 0 weekly downloads ## Install ```sh npm install @sul/ui pnpm add @sul/ui yarn add @sul/ui bun add @sul/ui ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.0-alpha.1 | | Published | 2020-03-29 | | First published | 2018-11-28 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 7 | | Unpacked size | 154 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | Stiff Upper Lip LLC \| andrew@sul.io | | Maintainers | sul | ## Links - npm: https://www.npmjs.com/package/@sul/ui - npm.io page: https://npm.io/package/@sul/ui ## Dependencies (7) - [formik](https://npm.io/package/formik.md) ^2.1.4 - [lodash](https://npm.io/package/lodash.md) ^4.17.15 - [shortid](https://npm.io/package/shortid.md) ^2.2.15 - [theme-ui](https://npm.io/package/theme-ui.md) ^0.3.1 - [react-popper](https://npm.io/package/react-popper.md) ^1.3.7 - [react-feather](https://npm.io/package/react-feather.md) ^2.0.3 - [@theme-ui/presets](https://npm.io/package/@theme-ui/presets.md) ^0.3.0 ## Recent versions - 1.0.0-alpha.1 (latest) — 2020-03-29 - 0.6.0 — 2019-03-07 - 0.5.0 — 2019-03-02 - 0.4.3 — 2019-02-03 - 0.4.2 — 2019-02-01 - 0.4.1 — 2019-01-31 - 0.4.0 — 2019-01-30 - 0.3.0 — 2019-01-25 - 0.2.0 — 2018-12-16 - 0.1.0 — 2018-11-28 ## README # 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](https://theme-ui.com/) and is based on a [theme specification](https://system-ui.com/theme). 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 ```sh 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 ```javascript import React from 'react' import ReactDOM from 'react-dom' import { ThemeProvider, Button } from '@sul/ui' import theme from './theme' const App = () => ( ) ReactDOM.render(, 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](https://system-ui.com/theme). ```javascript // 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. | ## Versioning We use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/sulweb/sul-ui/tags). Please read [CHANGELOG.md](https://github.com/sulweb/sul-ui/blob/master/CHANGELOG.md) for detailed changes to this project. ## Authors - **Andrew Smith** - _Initial work_ - [Stiff Upper Lip](https://github.com/sulweb) ## License This project is licensed under the MIT License - see the [LICENSE.md](https://github.com/sulweb/sul-ui/blob/master/LICENSE.md) file for details. --- _Source: https://npm.io/package/@sul/ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._