Skip to content

Commit d7f4712

Browse files
imp-danceimp-dance
committed
chore: updated readme
1 parent ab245c6 commit d7f4712

File tree

2 files changed

+80
-91
lines changed

2 files changed

+80
-91
lines changed

Diff for: ‎README.md

+39-65
Original file line numberDiff line numberDiff line change
@@ -1,91 +1,65 @@
1-
# RadixOS
1+
# Radix OS
22

3-
An in-browser operating system simulation built using the Radix design system.
3+
Radix OS is an operating system simulated on the web, with a modular file system that can be swapped out with any async source, able to run your own custom built applications. Designed to be flexible and easily extendable so it can fit your needs.
44

5-
#### TOC
5+
![Preview](https://radix-os.netlify.app/assets/images/sh-22aa7102bc92ee3fccb90107fe234d72.jpg)
66

7-
1. [Documentation](#documentation)
8-
2. [Live demo](#live-demo)
9-
3. [Setup](#setup)
10-
4. [Tools and technologies](#tools-and-technologies)
11-
5. [Launch demo locally](#launch-demo-locally)
7+
## Features
128

13-
## [Documentation](https://radix-os.netlify.app/)
9+
- Window management
10+
- Modular file system
11+
- Customizable UI
12+
- App launcher
13+
- Keyboard shortcuts
14+
- Context menus
15+
- System UI components
16+
- Drag 'n drop file upload
1417

15-
Read the docs for more information on how to implement Radix OS into your project, using React and the npm package `radix-os`.
16-
17-
See a [working example](https://stackblitz.com/edit/radix-os?file=src%2FApp.tsx) of Radix OS on Stackblitz.
18-
19-
## **[Live demo](https://imp-dance.github.io/radix-os/)**
20-
21-
![Screenshot 2024-10-06 at 18 18 09](https://github.com/user-attachments/assets/c9a063f4-bee0-45ec-95c6-bb39f621baf3)
22-
23-
24-
## Setup
18+
## Getting started
2519

2620
### Installation
2721

28-
1. If you don't have radix ui themes installed already, install this first:
22+
If you don't have radix ui themes installed already, install this first:
2923

30-
```
31-
npm i @radix-ui/themes @radix-ui/react-icons
24+
```shell
25+
npm i @radix-ui/themes
3226
```
3327

34-
2. Then install Radix OS:
28+
Then install Radix OS:
3529

36-
```
30+
```shell
3731
npm i radix-os
3832
```
3933

34+
We also recommend that you install `@radix-ui/react-icons` if you plan on extending the OS with your own applications.
35+
4036
### Quick setup
4137

42-
```tsx title="lib/radix-os.ts"
38+
```tsx
39+
import "@radix-ui/themes/styles.css";
4340
import {
44-
fsZustandIntegration,
41+
createZustandFsIntegration,
4542
setupApps,
46-
createUseAppLauncher
47-
} from "radix-os";
48-
49-
export const applications = setupApps();
50-
export const useAppLauncher = createUseAppLauncher(applications);
51-
```
52-
53-
```tsx title="App.tsx"
54-
import '@radix-ui/themes/styles.css';
55-
import {
5643
RadixOS,
57-
fsZustandIntegration
5844
} from "radix-os";
59-
import { applications } from "./lib/radix-os";
6045

61-
export default function App(){
62-
return <RadixOS fs={fsZustandIntegration} applications={applications} />
46+
// You can provide some optional config to these
47+
const fs = createZustandFsIntegration();
48+
const applications = setupApps([]);
49+
50+
export function App() {
51+
return (
52+
<RadixOS
53+
fs={fs}
54+
applications={applications}
55+
// You can also pass some customization options:
56+
radius="none"
57+
accentColor="crimson"
58+
/>
59+
);
6360
}
6461
```
6562

66-
## Tools and technologies
67-
68-
This project uses
63+
### Documentation
6964

70-
- [`vite`](https://vitejs.dev/)
71-
- [`react`](https://react.dev)
72-
- [`@monaco-editor/react`](https://github.com/suren-atoyan/monaco-react)
73-
- [`@radix-ui/themes`](https://www.radix-ui.com/)
74-
- [`@radix-ui/react-icons`](https://www.radix-ui.com/icons)
75-
- [`dnd-kit`](https://dndkit.com/)
76-
- [`zustand`](https://zustand.docs.pmnd.rs/)
77-
78-
## Launch demo locally
79-
80-
Assuming you have node and pnpm installed:
81-
82-
```shell
83-
# clone repo
84-
git clone [email protected]:imp-dance/radix-os.git
85-
# navigate into folder
86-
cd radix-os
87-
# install dependencies
88-
pnpm install
89-
# launch dev server
90-
pnpm dev
91-
```
65+
To read more about how to create your own applications for the "OS", setting up desktop items and all of the exported utilities - check out [the official docs](https://radix-os.netlify.app/).

Diff for: ‎packages/radix-os/README.md

+41-26
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,65 @@
11
# Radix OS
22

3-
Radix OS is a operating system simulated on the web, with a modular file system that can be swapped out with any async source, able to run your own custom built applications. Designed to be flexible and easily extendable so it can fit your needs.
3+
Radix OS is an operating system simulated on the web, with a modular file system that can be swapped out with any async source, able to run your own custom built applications. Designed to be flexible and easily extendable so it can fit your needs.
44

5-
Check out the [documentation](https://radix-os.netlify.app) for more in depth guides.
5+
![Preview](https://radix-os.netlify.app/assets/images/sh-22aa7102bc92ee3fccb90107fe234d72.jpg)
66

7-
[![Preview](/sh.jpg)](https://imp-dance.github.io/radix-os/)
7+
## Features
8+
9+
- Window management
10+
- Modular file system
11+
- Customizable UI
12+
- App launcher
13+
- Keyboard shortcuts
14+
- Context menus
15+
- System UI components
16+
- Drag 'n drop file upload
817

918
## Getting started
1019

1120
### Installation
1221

13-
1. If you don't have radix ui themes installed already, install this first:
22+
If you don't have radix ui themes installed already, install this first:
1423

15-
```
16-
npm i @radix-ui/themes @radix-ui/react-icons
24+
```shell
25+
npm i @radix-ui/themes
1726
```
1827

19-
2. Then install Radix OS:
28+
Then install Radix OS:
2029

21-
```
30+
```shell
2231
npm i radix-os
2332
```
2433

34+
We also recommend that you install `@radix-ui/react-icons` if you plan on extending the OS with your own applications.
35+
2536
### Quick setup
2637

27-
```tsx title="lib/radix-os.ts"
38+
```tsx
39+
import "@radix-ui/themes/styles.css";
2840
import {
41+
createZustandFsIntegration,
2942
setupApps,
30-
createUseAppLauncher,
31-
createZustandFsIntegration
32-
} from "radix-os;
33-
34-
export const useAppLauncher = createUseAppLauncher(applications);
35-
export const applications = setupApps();
36-
export const fs = createZustandFsIntegration();
37-
```
38-
39-
```tsx title="App.tsx"
40-
import '@radix-ui/themes/styles.css';
41-
import {
4243
RadixOS,
43-
fsZustandIntegration
44-
} from "radix-os;
45-
import { applications, fs } from "./lib/radix-os";
44+
} from "radix-os";
45+
46+
// You can provide some optional config to these
47+
const fs = createZustandFsIntegration();
48+
const applications = setupApps([]);
4649

47-
export default function App(){
48-
return <RadixOS fs={fs} applications={applications} />
50+
export function App() {
51+
return (
52+
<RadixOS
53+
fs={fs}
54+
applications={applications}
55+
// You can also pass some customization options:
56+
radius="none"
57+
accentColor="crimson"
58+
/>
59+
);
4960
}
5061
```
62+
63+
### Documentation
64+
65+
To read more about how to create your own applications for the "OS", setting up desktop items and all of the exported utilities - check out [the official docs](https://radix-os.netlify.app/).

0 commit comments

Comments
 (0)