garetmckinley / Uigradients
Licence: mit
Gradients-as-a-react-component™
Stars: ✭ 211
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
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
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
Styled Components Spacing
Responsive margin and padding components for styled-components 💅.
Stars: ✭ 209 (-0.95%)
Mutual labels: styled-components
Reactour
Tourist Guide into your React Components
Stars: ✭ 2,782 (+1218.48%)
Mutual labels: styled-components
💾 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 byuigradients
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
styled-components
Use the Generator in 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
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
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
📜 License
This package is released under the MIT License
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].