Skip to content

Commit

Permalink
Merge pull request #5699 from jpcchaves/documentation-notes
Browse files Browse the repository at this point in the history
docs: add notes to help beginners in getting started section
  • Loading branch information
matuzalemsteles authored Oct 23, 2023
2 parents 3e723db + c78dd35 commit e95768d
Show file tree
Hide file tree
Showing 2 changed files with 20 additions and 6 deletions.
18 changes: 16 additions & 2 deletions clayui.com/content/docs/get-started/how-to-use-clay.md
Original file line number Diff line number Diff line change
Expand Up @@ -33,15 +33,24 @@ You can check out the full list of [packages available in NPM](https://www.npmjs
#### NPM

```shell{expanded}
npm install @clayui/css @clayui/*
npm install @clayui/css @clayui/{PACKAGE_NAME}
```

#### Yarn

```shell{expanded}
yarn add @clayui/css @clayui/*
yarn add @clayui/css @clayui/{PACKAGE_NAME}
```

> **_Important Note: Be Mindful of the Asterisk:_**
> When using the `@clayui/*` command for installation, it's crucial to remember that the asterisk (\*) is a placeholder. It's not a valid package name on its own. To install a specific Clay package, you must replace the asterisk with the name of the package you require.
>
> For instance, if you want to install the "Clay Button" package, the correct command would be:
>
> ```shell
> npm install @clayui/button or yarn add @clayui/button
> ```
### Install via Clay CSS CDN
We provide Clay CSS via CDN, which is an option when you do not want to install the clay package via NPM or Yarn.
Expand Down Expand Up @@ -74,6 +83,11 @@ Example:
This quick start requires that you have a minimum knowledge of <a href="https://reactjs.org/docs/hooks-intro.html" target="_blank">React Hooks</a>, not much of your API's will be used but just <a href="https://reactjs.org/docs/hooks-reference.html#usestate" target="_blank"><b>useState</b></a> to control the component.
</div>

<div class="clay-site-alert alert alert-warning">
<strong class="lead">Warning</strong>
To ensure that Clay functions correctly, please remember to import the CSS package from @clayui/css into your React entrypoint component, as demonstrated in the example below.
</div>

For this quick start we will use [codesandbox](https://codesandbox.io/) which does not need to install an environment on your machine.

Use the **codesandbox** below as your text editor and environment so we can follow through with the examples.
Expand Down
8 changes: 4 additions & 4 deletions clayui.com/static/images/icons/icons.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit e95768d

Please sign in to comment.