Folders and files
| Name | Name | Last commit date | ||
|---|---|---|---|---|
Integrate Stylescape with React and Vite for fast development and optimized production builds.
- ⚛️ 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"
git clone https://github.com/stylescape/example-react.git
cd example-react
npm install
npm startsrc/
├── App.jsx # Main application component
├── main.jsx # Entry point with Stylescape imports
└── styles/
└── main.scss # Stylescape SCSS import
npm install stylescape react react-dom
npm install -D vite @vitejs/plugin-react sass// src/styles/main.scss
@use "stylescape";// src/main.jsx
import './styles/main.scss';
import 'stylescape';<div className="frame_main">
<header className="ribbon--top">
<input type="checkbox" data-ss="theme-toggle" />
</header>
<aside className="sidebar--left" data-ss="aside">
{/* Sidebar content */}
</aside>
<main className="main_content">
<div data-ss="accordion">
<details>
<summary>Accordion Item</summary>
<p>Content here</p>
</details>
</div>
</main>
</div>| Command | Description |
|---|---|
| npm start | Start development server |
| npm run build | Build for production |
| npm run preview | Preview production build |
Made with ❤️ by Scape Agency
Contributions are welcome! Please fork the repository and submit a pull request with your changes.
This project is licensed under the MIT license. See the LICENSE file for details.