Minimal and performant React component library built on styled-components

Last update: Jan 3, 2022

@novas/components

Minimal and performant React component library built on styled-components

Installation

yarn add @novas/components styled-components

babel-plugin-styled-components is also required to use the css prop (strongly recommended)

Components

Layout

  • Flex
  • Stack
  • Grid

Form - coming soon

  • Checkbox
  • Radio
  • Select
  • Toggle

Styles

  • Global
  • Apply

State

  • Triggers

Motivation

Foregoing a themeing library like styled-system saves on both runtime performance and bundle size. Relying on the css prop provided by babel-plugin-styled-components gives us the best of all worlds:

  • Colocate CSS styles inline with components
  • Easily extend and customize existing components
  • Props and theme access
  • Supports all CSS instead of a subset
  • Better runtime performance than style props
  • Smaller bundle size (realistically ~5kb smaller)

CSS custom properties can be used for theming instead of a JavaScript object, which will prevent the need to access the theme via props. Accessing the theme via props is still supported of course.

Usage

You should prefer to create new custom elements using the css prop or styled function syntax.

Hello world!
Hello world

Thanks for taking a look!

) ">
import { ResetStyles, Stack, Flex } from '@novas/components'

const Heading = ({ as: Component = 'h3', ...props }) => (
	<Component
		{...props}
		css={{
			fontSize: '1.5rem',
			lineHeight: '1.2',
			color: 'black',
		}}
	/>
)

const Card = (props) => (
	<Stack
		{...props}
		css={{
			padding: '16px',
			borderRadius: '4px',
			boxShadow: '0 2px 3px 0 rgba(0, 0, 0, 0.2)',
		}}
	/>
)

const App = () => (
	<>
		<Global
			reset
			style={`
				--color-blue: #0000ff;
			`}
		/>
		<Stack>
			<Heading as="h1" css={{ color: '--color-blue' }}>
				Hello world!
			</Heading>
			<main css={{ marginTop: '16px' }}>
				<Flex as="section" css={{ padding: '8px' }}>
					<Card>
						<Heading>Hello world</Heading>
						<p>Thanks for taking a look!</p>
					</Card>
				</Flex>
			</main>
		</Stack>
	</>
)

GitHub

https://github.com/codynova/components
You might also like...

Front-End Mentor: Landing page usando ReactJS + Styled Components

Front-End Mentor: Landing page usando ReactJS + Styled Components

Front-End Mentor: Fylo Landing Page ✨ O projeto se trata de um desafio disponível no site Front-End Mentor. A ideia é desenvolver um código que se apr

Feb 14, 2022

Flexibly styled chat-widget for your react apps.

Flexibly styled chat-widget for your react apps.

Flexibly styled chat-widget for your react apps. It was mainly created for integration with chat-bots in messengers.

Jun 11, 2021

A terminal style/styled portfolio website made with 3 using react.

A Terminal Styled Portfolio Website. 🐱‍💻, a terminal style/styled portfolio website made with 3 using react.

Jun 23, 2022

Material-tailwind - An easy-to-use components library for Tailwind CSS and Material Design

Material-tailwind - An easy-to-use components library for Tailwind CSS and Material Design

Material-tailwind - An easy-to-use components library for Tailwind CSS and Material Design

Jun 20, 2022

A Simple Spinner and Loader Library for React

A Simple Spinner and Loader Library for React

React-Spinner A Simple Spinner and Loader Library Have a look How to use? The NPM package is not released yet. You can clone the project and try out t

May 21, 2022

The UI design language and React library for Conversational UI

The UI design language and React library for Conversational UI

The UI design language and React library for Conversational UI Website:https://chatui.io English | 简体中文 Features 😎 Best Practices: The best practice

Jun 9, 2022

Encapsulated styling for your javascript components with all the power of javascript and CSS combined.

Stilr Encapsulated styling for your javascript components with all the power of javascript and CSS combined. Unique class names (Content Hash Based) U

May 30, 2022

A networked multiplayer tetris game built using react and redux

A networked multiplayer tetris game built using react and redux

Red-tetris-42Network The objective of this project is to develop a networked mul

May 11, 2022

👩‍🎤 CSS-in-JS library designed for high performance style composition

👩‍🎤 CSS-in-JS library designed for high performance style composition

emotion The Next Generation of CSS-in-JS Emotion 11 has been released 🚀 See the blog post Emotion is a performant and flexible CSS-in-JS library. Bui

Jun 24, 2022
Create tailwind css react components like styled components with classes name on multiple lines

Create Tailwind CSS React components like styled components with class names on multiple lines and conditional class rendering

Jun 21, 2022
A react component available on npm to easily link to your project on github and is made using React, TypeScript and styled-components.

fork-me-corner is a react component available on npm to easily link to your project on github and is made using React, TypeScript and styled-components.

Feb 27, 2022
Imersão React.js 3º edição. Project using ReactJS, Next JS, and Styled Components for the week challenge by Alura. We created a social network inspired by Orkut.

Example app with styled-components This example features how you use a different styling solution than styled-jsx that also supports universal styles.

Jul 19, 2021
The simplest solution for content loading in React and styled-components.

styled-content-loader The simplest solution for content loading in React and styled-components. Getting Started npm install styled-components styled-c

Jul 13, 2021
A styled switch for React built using Emotion CSS and Framer motion
A styled switch for React built using Emotion CSS and Framer motion

A styled switch for React built using Emotion CSS and Framer motion

Aug 27, 2021
Simples Projeto Desenvolvido durante o programa DevInHouse do SENAI-SC, com o intúito de desenvolver um formulário em React utilizando Styled Components
Simples Projeto Desenvolvido durante o programa DevInHouse do SENAI-SC, com o intúito de desenvolver um formulário em React utilizando Styled Components

Simple Styled Form Simples Projeto Desenvolvido durante o programa DevInHouse do SENAI-SC, com o intúito de desenvolver um formulário em React utiliza

Oct 29, 2021
Simple Portfolio Using React Hooks & Styled Components
Simple Portfolio Using React Hooks & Styled Components

Said MOUNAIM To view a live example, click here. Getting Started These instructi

Jun 16, 2022
🎥A criação de uma UI para Streaming utilizando React.js, Styled Components junto com Sass.
🎥A criação de uma UI para Streaming utilizando React.js, Styled Components junto com Sass.

Movie Screen - Exercitando React, Styled Components e Sass ??️ Dependencias React Styled Components Sass React Icons ?? Objetivo O principal intuito d

Dec 28, 2021
Styled Components for React Native the way they should have been.

?? Styled-RN Styled Components for React Native the way they should have been. Inspired by this article Intro Why ?? styled-rn it better than ???? sty

Jun 13, 2022
🔧 💅 Jest utilities for Styled Components

Jest Styled Components A set of utilities for testing Styled Components with Jest. This package improves the snapshot testing experience and provides

Jun 21, 2022