All Projects → garetmckinley → Uigradients

garetmckinley / Uigradients

Licence: mit
Gradients-as-a-react-component™

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Uigradients

Animate Css Styled Components
simple port of animate css for styled-components
Stars: ✭ 173 (-18.01%)
Mutual labels:  styled-components
Smakosh.com
My personal website
Stars: ✭ 185 (-12.32%)
Mutual labels:  styled-components
Styled React Boilerplate
Minimal & Modern boilerplate for building apps with React & styled-components
Stars: ✭ 198 (-6.16%)
Mutual labels:  styled-components
React Simon Says
A "Simon Says" game built with React and Redux 👾
Stars: ✭ 175 (-17.06%)
Mutual labels:  styled-components
Elm Styled
Styling your Html Elements with typed Css 💅
Stars: ✭ 180 (-14.69%)
Mutual labels:  styled-components
React Landing Page
🛬 Everything you need for a modern landing page, built with React & Styled Components
Stars: ✭ 193 (-8.53%)
Mutual labels:  styled-components
React Adminlte Dash
This project is No Longer Maintained. React implementation of AdminLTE themed dashboard
Stars: ✭ 170 (-19.43%)
Mutual labels:  styled-components
Styled Components Vs Emotion
a short doc comparing the popular CSS-in-JS libraries styled-components and emotion
Stars: ✭ 204 (-3.32%)
Mutual labels:  styled-components
Styled Theme
Extensible theming system for styled-components 💅
Stars: ✭ 183 (-13.27%)
Mutual labels:  styled-components
Styled Bootstrap Components
The bootstrap components made with styled-components 💅
Stars: ✭ 196 (-7.11%)
Mutual labels:  styled-components
Ran
⚡ RAN! React . GraphQL . Next.js Toolkit ⚡ - SEO-Ready, Production-Ready, SSR, Hot-Reload, CSS-in-JS, Caching, CLI commands and more...
Stars: ✭ 2,128 (+908.53%)
Mutual labels:  styled-components
Grid
This package has moved and renamed
Stars: ✭ 2,079 (+885.31%)
Mutual labels:  styled-components
Css In Js
Autocomplete React Native / JS Styles and converting plain CSS to JS styles
Stars: ✭ 192 (-9%)
Mutual labels:  styled-components
Bedrock
Foundational Layout Primitives for your React App
Stars: ✭ 173 (-18.01%)
Mutual labels:  styled-components
Lerna Yarn Workspaces Monorepo
🐉 A Monorepo with multiple packages and a shared build, test, and release process.
Stars: ✭ 201 (-4.74%)
Mutual labels:  styled-components
React Elastic Carousel
A flexible and responsive carousel component for react https://sag1v.github.io/react-elastic-carousel
Stars: ✭ 173 (-18.01%)
Mutual labels:  styled-components
Frontend
Save and share your best solutions
Stars: ✭ 191 (-9.48%)
Mutual labels:  styled-components
Styled Components Spacing
Responsive margin and padding components for styled-components 💅.
Stars: ✭ 209 (-0.95%)
Mutual labels:  styled-components
Layouts
Grab-and-go layouts for React
Stars: ✭ 202 (-4.27%)
Mutual labels:  styled-components
Reactour
Tourist Guide into your React Components
Stars: ✭ 2,782 (+1218.48%)
Mutual labels:  styled-components
UIGradients Logo

CircleCI npm npm GitHub

💾 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

sponsored by syntra.io
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].