https://github.com/kjinengineer/stayedcss
🎨 A CSS library for Next.js App Router, supporting server and client components.
https://github.com/kjinengineer/stayedcss
css-library nextjs nextjs-app-router
Last synced: 8 months ago
JSON representation
🎨 A CSS library for Next.js App Router, supporting server and client components.
- Host: GitHub
- URL: https://github.com/kjinengineer/stayedcss
- Owner: kjinengineer
- License: mit
- Created: 2024-11-19T08:09:15.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-24T08:13:14.000Z (about 1 year ago)
- Last Synced: 2025-05-13T01:18:22.258Z (8 months ago)
- Topics: css-library, nextjs, nextjs-app-router
- Language: TypeScript
- Homepage: https://stayedcss.vercel.app
- Size: 224 KB
- Stars: 3
- Watchers: 1
- Forks: 1
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
![version]()
## What is StayedCSS
### Unlock the Full Potential of Next.js Apps With a CSS Library Designed for Simplicity and Performance 🚀
StayedCSS is a static CSS library designed for **Next.js App Router**, offering full support for both server and client components. With a simple syntax similar to basic CSS, it enables efficient styling and aims to be the next-generation CSS library for the Next.js App Router.
Currently in its beta version, StayedCSS is rapidly improving in optimization and stability. It will continue to evolve to deliver a better styling experience for your projects.
## Why StayedCSS?
1. Simplifies complex styling tasks.
2. Optimized for the Next.js App Router.
3. Provides a modern, developer-friendly approach to CSS.
## Key Features
- **Flicker-Free Dark Mode Transitions**: Ensure smooth, visually appealing, and flicker-free transitions when toggling dark mode.
- **Server and Client Component Support**: Apply styles seamlessly to server and client components in the Next.js App Router environment.
- **Simple Syntax**: Write clean and maintainable CSS code with powerful features.
- **Media Queries**: Effortlessly create responsive designs with built-in media query support.
- **Pseudo-Classes and Elements**: Utilize CSS commands such as `:hover`, `::after`, and `~ p` for advanced styling.
## 🎉 **Start Using StayedCSS Today!** 🎉
Experience the future of styling with a library built for developers who love simplicity!
**Installation**
```bash
npm install stayedcss
# or
yarn add stayedcss
```
**Usage Example**
```jsx
import { useStyle } from "stayedcss";
const styles = useStyle({
componentId: "components/example",
container: {
backgroundColor: "black",
padding: "20px",
},
});
```
For more details, check out the [documentation](https://stayedcss.vercel.app/docs/getting-started/introduction).
## Limitations (Beta Version)
- As this libraryis currently in **beta version**, stability is not guaranteed.
- Any code, sturcture or function can be changed. Features may be modified, added, or removed as I continue to improve and stabilize it.
## Contribution
StayedCSS is an open-source project. Feel free to submit bug reports or feature requests on Issues. Your feedback is important for StayedCSS from a beta version to a stable and robust library.
### PR Guidelines
- Base Branch: Please ensure that your PR targets the dev branch.
- Commit Messages: Write clear and concise commit messages.
## License
MIT