styled

A high performance and easy to use CSS-in-JS library that can be used with React or Solid.

Installation

1# with npm
2npm install @n3e/styled
3
4# with yarn
5yarn add @n3e/styled
6
7# with pnpm
8pnpm add @n3e/styled
9
10# with bun
11bun add @n3e/styled

Usage

1import styled from '@n3e/styled';
2
3const accent = '#ff6995';
4
5const Button = styled.button({
6  appearance: 'none',
7  backgroundColor: accent,
8  border: `2px solid ${accent}`,
9  borderRadius: '0.25rem',
10  margin: 0,
11  padding: '0 6px',
12  transition: '0.2s linear'
13});
14
15const Composition = () => (
16  <Button>
17    I'm a button
18  </Button>
19);

Solid

SolidJS users need to import Styled from the the solid output folder:

1# as ES module
2import styled from '@n3e/styled/solid/esm';
3
4# as CommonJS module
5import styled from '@n3e/styled/solid/cjs';

Documentation

See https://www.styled.guide/