chore: updated readme 0b9fb22c
Steve · 2025-10-18 19:51 1 file(s) · +8 −8
README.md +8 −8
16 16 

            

            
            

                17
                17
                 
                
## Quickstart

            

            
            

                18
                18
                 
                

            

            
            

                19
                
                -
                
1. Initialize `norns` with your package manager of choice

            

            
            

                
                19
                +
                
### 1. Initialize `norns` with your package manager of choice

            

            
            

                20
                20
                 
                

            

            
            

                21
                21
                 
                
```bash

            

            
            

                22
                22
                 
                
npx norns-ui@latest init

            

            
        
            

            
            

                29
                29
                 
                

            

            
            

                30
                30
                 
                
This will create a `norns.json` file in the root of your project with your selections

            

            
            

                31
                31
                 
                

            

            
            

                32
                
                -
                
2. Add components

            

            
            

                
                32
                +
                
### 2. Add components

            

            
            

                33
                33
                 
                

            

            
            

                34
                34
                 
                
Using the `norns.json` the CLI will install them to the provided path in the config.

            

            
            

                35
                35
                 
                

            

            
        
            

            
            

                39
                39
                 
                
npx norns-ui@latest add contract-read

            

            
            

                40
                40
                 
                
```

            

            
            

                41
                41
                 
                

            

            
            

                42
                
                -
                
3. Use components

            

            
            

                
                42
                +
                
### 3. Use components

            

            
            

                43
                43
                 
                

            

            
            

                44
                44
                 
                
These web components should work in virtually any framework setup, whether you're in React, Vue, Svelte, or just plain HTML.

            

            
            

                45
                45
                 
                

            

            
            

                46
                
                -
                
### HTML/Vanilla JS

            

            
            

                
                46
                +
                
**HTML/Vanilla JS**

            

            
            

                47
                47
                 
                

            

            
            

                48
                48
                 
                
```html

            

            
            

                49
                49
                 
                
<!DOCTYPE html>

            

            
        
            

            
            

                62
                62
                 
                
</html>

            

            
            

                63
                63
                 
                
```

            

            
            

                64
                64
                 
                

            

            
            

                65
                
                -
                
### React

            

            
            

                
                65
                +
                
**React**

            

            
            

                66
                66
                 
                

            

            
            

                67
                67
                 
                
```tsx

            

            
            

                68
                68
                 
                
import { useEffect, useRef } from "react";

            

            
        
            

            
            

                88
                88
                 
                
}

            

            
            

                89
                89
                 
                
```

            

            
            

                90
                90
                 
                

            

            
            

                91
                
                -
                
### Vue

            

            
            

                
                91
                +
                
**Vue**

            

            
            

                92
                92
                 
                

            

            
            

                93
                93
                 
                
```vue

            

            
            

                94
                94
                 
                
<script setup lang="ts">

            

            
        
            

            
            

                102
                102
                 
                
</template>

            

            
            

                103
                103
                 
                
```

            

            
            

                104
                104
                 
                

            

            
            

                105
                
                -
                
### Svelte

            

            
            

                
                105
                +
                
**Svelte**

            

            
            

                106
                106
                 
                

            

            
            

                107
                107
                 
                
```svelte

            

            
            

                108
                108
                 
                
<script lang="ts">

            

            
        
            

            
            

                114
                114
                 
                
</main>

            

            
            

                115
                115
                 
                
```

            

            
            

                116
                116
                 
                

            

            
            

                117
                
                -
                
### TypeScript

            

            
            

                
                117
                +
                
**TypeScript**

            

            
            

                118
                118
                 
                

            

            
            

                119
                119
                 
                
```typescript

            

            
            

                120
                120
                 
                
import "./components/connect-wallet";