Stitches homepage
Blog

Stitches alpha

Today we are announcing the first alpha release of Stitches. This is an early look at the API and features.

Pedro Duarte

4 min readChangelog

This is the first public alpha release of Stitches. It includes the following features:

Most of the features above have been documented. Below are some helpful starting points:

An example of a Button Component with multiple variants and pseudo-class selectors.

const Button = styled('button', {
borderRadius: '9999px',
lineHeight: '1',
fontWeight: 500,
border: '0',
variants: {
color: {
violet: {
backgroundColor: 'blueviolet',
color: 'white',
'&:hover': {
backgroundColor: 'darkviolet',
},
},
gray: {
backgroundColor: 'gainsboro',
'&:hover': {
backgroundColor: 'lightgray',
},
},
},
size: {
small: {
fontSize: '13px',
height: '25px',
paddingRight: '10px',
paddingLeft: '10px',
},
large: {
fontSize: '15px',
height: '35px',
paddingLeft: '15px',
paddingRight: '15px',
},
},
},
});
// Render
<Button color="gray" size="small">Button</Button>
<Button color="violet" size="small">Button</Button>
<Button color="gray" size="large">Button</Button>
<Button color="violet" size="large">Button</Button>

Here's a CodeSandbox template with a basic setup Stitches. Feel free to fork and try it for yourself.

We are excited to see what you'll build with Stitches. At this alpha stage your feedback is very valuable to us. You can reach us on GitHub or on Twitter.

We're grateful for everyone who contributed and provided feedback along the way.

Special thanks to Christian Alfoni and Fabrice Weinberg for the intial work on the atomic generation and typings.

Special thanks to Pedro Duarte, Jenna Smith and Abdulhadi Alhallak for the API design, thorough testing, roadmap and documentation.

Special thanks to the Modulz founders Colm Tuite and Stephen Haney for officially bringing Stitches under the Modulz organisation and dedicating an official team to keep Stitches maintained.

Share this post on Twitter.