https://github.com/stylescape/example-react

Stylescape Example | React
https://github.com/stylescape/example-react

react stylescape

Last synced: about 1 month ago
JSON representation

Stylescape Example | React

• Host: GitHub
• URL: https://github.com/stylescape/example-react
• Owner: stylescape
• License: mit
• Created: 2024-08-16T06:34:35.000Z (almost 2 years ago)
• Default Branch: dev
• Last Pushed: 2026-04-05T06:10:38.000Z (about 2 months ago)
• Last Synced: 2026-04-05T08:13:07.426Z (about 2 months ago)
• Topics: react, stylescape
• Language: JavaScript
• Homepage: https://style.scape
• Size: 739 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • Contributing: .github/CONTRIBUTING.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE
  • Code of conduct: .github/CODE_OF_CONDUCT.md
  • Citation: CITATION.cff
  • Codeowners: .github/CODEOWNERS
  • Security: .github/SECURITY.md
  • Codemeta: codemeta.json

Awesome Lists containing this project

README

          


[![GitHub License](https://img.shields.io/github/license/stylescape/example-react?style=flat-square&logo=readthedocs&logoColor=FFFFFF&label=&labelColor=%23041B26&color=%23041B26&link=LICENSE)](https://github.com/stylescape/example-react/blob/main/LICENSE)

[![devContainer](https://img.shields.io/badge/devContainer-23041B26?style=flat-square&logo=Docker&logoColor=%23FFFFFF&labelColor=%23041B26&color=%23041B26)](https://vscode.dev/redirect?url=vscode://ms-vscode-remote.remote-containers/cloneInVolume?url=https://github.com/stylescape/example-react)

[![StackBlitz](https://img.shields.io/badge/StackBlitz-23041B26?style=flat-square&logo=StackBlitz&logoColor=%23FFFFFF&labelColor=%23041B26&color=%23041B26)](https://stackblitz.com/github/stylescape/example-react/tree/main?file=src%2Findex.html)





    



Stylescape + React

Example Project


[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/stylescape/example-react)

---

Integrate [Stylescape](https://scape.style) with [React](https://react.dev/) and [Vite](https://vitejs.dev/) 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

```sh

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

```sh

npm install stylescape react react-dom

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

```

### 2. Import Stylescape in SCSS

```scss

// src/styles/main.scss

@use "stylescape";

```

### 3. Import in Entry File

```jsx

// src/main.jsx

import './styles/main.scss';

import 'stylescape';

```

### 4. Use Stylescape Classes

```jsx



    

        

    

    

        {/* Sidebar content */}

    

    

        


            

                Accordion Item

                
Content here

            

        

    



```


---

## 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](https://www.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](LICENSE) file for details.

---