Home

Awesome

<img src="https://raw.githubusercontent.com/garetmckinley/project-assets/master/uigradients/header.svg?sanitize=true" alt="UIGradients Logo" id="dracula-invert" /> <p align="center"> <img alt="CircleCI" src="https://img.shields.io/circleci/build/github/garetmckinley/uigradients?style=for-the-badge"> <img alt="npm" src="https://img.shields.io/npm/v/uigradients?style=for-the-badge"> <img alt="npm" src="https://img.shields.io/npm/dt/uigradients?color=dodgerblue&label=Installs&style=for-the-badge"> <img alt="GitHub" src="https://img.shields.io/github/license/garetmckinley/uigradients?color=mediumslateblue&style=for-the-badge"> </p>

💾 Installation

npm install --save uigradients

or

yarn add uigradients

📚 Docs

Components

Utilities

Or, go to the interactive docs →

🏗 Usage Examples

Linear Gradient Component

// Import the component...
import { Gradient } from 'uigradients';

// Now, use it!
class App extends Component {
    // If no gradient preset is provided,
    // a random preset will be used.
    return (
      <Gradient preset="cherry">
        <h1>This will draw a div with a cherry gradient, like the one you're looking at right now.</h1>
      </Gradient>
    );
}
cherry is only one of the many presets provided by uigradients

A complete list of the gradient presets can be previewed here. You can use your own preset library via GradientProvider

Radial Gradient Component

import { Gradient } from 'uigradients';

class App extends Component {
    return (
      // Add a "type" attribute on your component and
      // set it to "radial" for a radial gradient!
      // NOTE: If a "type" attribute is not on
      // your component, the gradient type will
      // default to linear
      <Gradient preset="aubergine" type="radial">
        <h1>Wow, a radial gradient!</h1>
      </Gradient>
    );
}

Gradient Generator

import { generator } from 'uigradients';

generator({preset: 'intuitive_purple'});

/* The function above returns:
background-color: ,#DA22FF,;
background-image: -webkit-linear-gradient(
  left,
  ,#DA22FF,,
  ,#9733EE,);
background-image: linear-gradient(
  to left,
  ,#DA22FF,,
  ,#9733EE,);
*/

💅 Styled Components

Use the Generator in styled-components

import { generator } from 'uigradients';
import styled from 'styled-components';

const Pre = styled.pre`
  ${generator({preset: 'electric_violet'})}
  border-radius: 4px;
  display: block;
`;

And render the component

This is what an electric_violet pre looks like!

Or, you can override other properties on the Gradient component

import { Gradient } from 'uigradients';
import styled from 'styled-components';

const Header = styled(Gradient)`
  min-height: 300px;
  text-align: center;
  width: 100%;
`;

And render the component

Awesome!

Or, you can generate a radial gradient

import { generator } from 'uigradients';
import styled from 'styled-components';

const RadialComponent = styled.div`
  ${generator({gradient: 'electric_violet', type: 'radial'})}
`;

And render the component

Radial gradient

📜 License

This package is released under the MIT License

<img src="https://raw.githubusercontent.com/syntra/assets/master/syntra-sponsorship.svg?sanitize=true" alt="sponsored by syntra.io"/>