Skip to content

Commit 6cc0e6c

Browse files
[dapp-kit] update docs to include a snippet about importing the CSS stylesheet (MystenLabs#14920)
## Description A builder in Discord was confused about why the provided UI components weren't displaying correctly in their app, and it was because they didn't realize they needed to import the CSS file for dApp Kit into their application. I noticed we don't have anything in our documentation about this, so I'm adding a section in the docs with this PR 😄 <img width="1379" alt="image" src="https://github.com/MystenLabs/sui/assets/7453188/cf346843-1fbf-4893-9cbd-c0c9c01ad140"> https://mysten-labs.slack.com/archives/C0393DWJD7X/p1700380725599999 ## Test Plan - 👁️ --- If your changes are not user-facing and not a breaking change, you can skip the following section. Otherwise, please indicate what changed, and then add to the Release Notes section as highlighted during the release process. ### Type of Change (Check all that apply) - [ ] protocol change - [ ] user-visible impact - [ ] breaking change for a client SDKs - [ ] breaking change for FNs (FN binary must upgrade) - [ ] breaking change for validators or node operators (must upgrade binaries) - [ ] breaking change for on-chain data layout - [ ] necessitate either a data wipe or data migration ### Release notes
1 parent 6b9461d commit 6cc0e6c

File tree

2 files changed

+38
-8
lines changed

2 files changed

+38
-8
lines changed

sdk/dapp-kit/README.md

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ To use the Sui dApp Kit in your project, run the following command in your proje
2727
npm i --save @mysten/dapp-kit @mysten/sui.js @tanstack/react-query
2828
```
2929

30-
## Setting up Providers
30+
## Setting up providers
3131

3232
To be able to use the hooks and components in the dApp Kit, you need to wrap your app with a couple
3333
providers. The props available on the providers are covered in more detail in their respective docs
@@ -58,11 +58,26 @@ function App() {
5858
}
5959
```
6060

61-
## using hooks to make rpc calls
61+
## Using UI components to connect to a wallet
6262

63-
The dApp Kit provides a set of hooks for making rpc calls to the Sui blockchain. The hooks are thin
63+
The dApp Kit provides a set of flexible UI components that can be used to connect and manage wallet
64+
accounts from your dApp. The components are built on top of [Radix UI](radix-ui.com/primitives) and
65+
are customizable so you can quickly get your dApp up and running.
66+
67+
To use our provided UI components, you will need to import the dApp Kit's CSS stylesheet into your
68+
dApp as shown below. For more information regarding customization options, check out the respective
69+
documentation pages for the components and
70+
[themes](https://sui-typescript-docs.vercel.app/dapp-kit/themes).
71+
72+
```tsx
73+
import '@mysten/dapp-kit/dist/index.css';
74+
```
75+
76+
## Using hooks to make RPC calls
77+
78+
The dApp Kit provides a set of hooks for making RPC calls to the Sui blockchain. The hooks are thin
6479
wrappers around `useQuery` from `@tanstack/react-query`. For more comprehensive documentation on how
65-
these query hooks checkout the
80+
these query hooks can be used, check out the
6681
[react-query docs](https://tanstack.com/query/latest/docs/react/overview).
6782

6883
```tsx

sdk/docs/pages/dapp-kit/index.mdx

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ To use the Sui dApp Kit in your project, run the following command in your proje
2525
npm i --save @mysten/dapp-kit @mysten/sui.js @tanstack/react-query
2626
```
2727

28-
## Setting up Providers
28+
## Setting up providers
2929

3030
To be able to use the hooks and components in the dApp Kit, you need to wrap your app with a couple
3131
providers. The props available on the providers are covered in more detail in their respective docs
@@ -56,11 +56,26 @@ function App() {
5656
}
5757
```
5858

59-
## using hooks to make rpc calls
59+
## Using UI components to connect to a wallet
6060

61-
The dApp Kit provides a set of hooks for making rpc calls to the Sui blockchain. The hooks are thin
61+
The dApp Kit provides a set of flexible UI components that can be used to connect and manage wallet
62+
accounts from your dApp. The components are built on top of [Radix UI](radix-ui.com/primitives) and
63+
are customizable so you can quickly get your dApp up and running.
64+
65+
To use our provided UI components, you will need to import the dApp Kit's CSS stylesheet into your
66+
dApp as shown below. For more information regarding customization options, check out the respective
67+
documentation pages for the components and
68+
[themes](https://sui-typescript-docs.vercel.app/dapp-kit/themes).
69+
70+
```tsx
71+
import '@mysten/dapp-kit/dist/index.css';
72+
```
73+
74+
## Using hooks to make RPC calls
75+
76+
The dApp Kit provides a set of hooks for making RPC calls to the Sui blockchain. The hooks are thin
6277
wrappers around `useQuery` from `@tanstack/react-query`. For more comprehensive documentation on how
63-
these query hooks checkout the
78+
these query hooks can be used, check out the
6479
[react-query docs](https://tanstack.com/query/latest/docs/react/overview).
6580

6681
```tsx

0 commit comments

Comments
 (0)