https://github.com/yukukotani/just-styled
A dead simple CSS-in-JS for React 19
https://github.com/yukukotani/just-styled
css-in-js design-system react typescript
Last synced: about 2 months ago
JSON representation
A dead simple CSS-in-JS for React 19
- Host: GitHub
- URL: https://github.com/yukukotani/just-styled
- Owner: yukukotani
- License: apache-2.0
- Created: 2024-10-14T06:18:59.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-01-28T02:02:56.000Z (4 months ago)
- Last Synced: 2025-04-02T06:09:51.826Z (about 2 months ago)
- Topics: css-in-js, design-system, react, typescript
- Language: TypeScript
- Homepage:
- Size: 127 KB
- Stars: 93
- Watchers: 2
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# just-styled
A dead simple CSS-in-JS library for React 19 or higher.
## Features
- **Familiar API**: Both styled-components-like Styled Function and Style Prop are supported
- **Typed Theme**: Auto-completes your design token
- **RSC Support**: It just works. Nothing bothers you
- **No Build Step**: No need to set up build configuration
- **Small Runtime:** It's 1.8 kb minified & gzipped
- **Atomic CSS**: Generates optimized stylesheet to keep your distribution small
## Installation
> [!IMPORTANT]
> just-styled requires React 19 since it's based on [React 19's stylesheet support](https://react.dev/blog/2024/04/25/react-19#support-for-stylesheets). You can try it on [Next.js 15 RC](https://nextjs.org/blog/next-15-rc2) for now.
```bash
npm install just-styled
```
## Usage
### Styled Function
Creates your component with `styled` function.
```tsx
import { styled } from "just-styled";
const StyledBox = styled("div", {
fontSize: "20px",
backgroundColor: "gray",
});
The background is gray;
```
### Style Prop
Declares inline style with `style` prop.
```tsx
The text color is green
```
### Box Component
We also have the built-in Box component as an equivalent of div.
```tsx
import { Box } from "just-styled";
Big text;
```
This is just a syntax sugar for the code below.
```tsx
const Box = styled("div", {});
```
### Nested Styles
You can nest styles with selectors such as pseudo classes.
```tsx
const StyledBox = styled("div", {
backgroundColor: "gray",
":hover": {
backgroundColor: "black",
},
});
```
Also supports media queries and other at rules.
```tsx
const StyledBox = styled("div", {
backgroundColor: "gray",
"@media (min-width: 768px)": {
backgroundColor: "black",
},
});
```
### Theme
Create a config file anywhere you want. Currently `colors`, `spaces`, `sizes`, `fontSizes`, and `radii` tokens are supported.
```tsx
import { defineConfig } from "just-styled";
export const config = defineConfig({
tokens: {
colors: {
"gray.200": "#eeeeee",
"gray.600": "#555555",
"red.200": "#EB7076",
"red.600": "#E02932",
primary: "$colors.red.600",
bg: "$colors.gray.200",
},
spaces: {
sm: "8px",
md: "16px",
},
},
});
// This is required for auto-completion
type UserConfig = typeof config;
declare module "just-styled" {
export interface JustStyledConfig extends UserConfig {}
}
```
Then, put ThemeProvider at the top of your component tree (e.g., `layout.tsx` on Next.js).
```tsx
// import the config you defined
import { config } from "./theme-config.ts";
import { ThemeProvider } from "just-styled";
export default function RootLayout({
children,
}: Readonly<{ children: React.ReactNode }>) {
return (
{children}
);
}
```
Now, you can use your tokens with auto-completion.
```tsx
const StyledBox = styled("div", {
backgroundColor: "$colors.bg",
padding: "$spaces.md",
});
Styled!;
```