Stylescape + React

Example Project

---

Integrate Stylescape with React and Vite for fast development and optimized production builds.

---

Features

• ⚛️ React 19 with modern hooks and patterns
• ⚡ Vite for lightning-fast HMR and builds
• 🎨 Stylescape's complete styling system
• 🌗 Built-in theme toggle with data-ss="theme-toggle"
• 📐 Frame layout with sidebars and ribbons
• 🎹 Interactive accordion with data-ss="accordion"

---

Quickstart

git clone https://github.com/stylescape/example-react.git
cd example-react
npm install
npm start

---

Project Structure

src/
├── App.jsx # Main application component
├── main.jsx # Entry point with Stylescape imports
└── styles/
└── main.scss # Stylescape SCSS import

---

Usage

1. Install Dependencies

npm install stylescape react react-dom
npm install -D vite @vitejs/plugin-react sass

2. Import Stylescape in SCSS

// src/styles/main.scss@use"stylescape";

3. Import in Entry File

// src/main.jsximport'./styles/main.scss';import'stylescape';

4. Use Stylescape Classes

<divclassName="frame_main"><headerclassName="ribbon--top"><inputtype="checkbox"data-ss="theme-toggle"/></header><asideclassName="sidebar--left"data-ss="aside">{/* Sidebar content */}</aside><mainclassName="main_content"><divdata-ss="accordion"><details><summary>Accordion Item</summary><p>Content here</p></details></div></main></div>

---

Scripts

Command	Description
npm start	Start development server
npm run build	Build for production
npm run preview	Preview production build

---

Colophon

Made with ❤️ by Scape Agency

Contributing

Contributions are welcome! Please fork the repository and submit a pull request with your changes.

License

This project is licensed under the MIT license. See the LICENSE file for details.

---