Skip to content

Commit

Permalink
chore: Update README.md
Browse files Browse the repository at this point in the history
  • Loading branch information
Emmanuel-Develops authored Nov 22, 2024
1 parent 26eb72f commit f7fe6f3
Showing 1 changed file with 34 additions and 16 deletions.
50 changes: 34 additions & 16 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,34 +7,50 @@
To install the BDP-UI library, you can use the following command:

```bash
yarn add github:bitcoin-dev-project/bdp-ui
yarn add @bitcoin-dev-project/bdp-ui
```
or
```bash
npm install github:bitcoin-dev-project/bdp-ui
npm i @bitcoin-dev-project/bdp-ui
```

## Usage

Once installed, you can import the components you need from the library:
Once installed, you can import the components or icons you need from the library:

note: you can set up an entry point in your project config to `/dist` to fix the autocomplete and linting issues. Or in typescript you can use the `paths` property in tsconfig.json to fix the import paths.
## CSS workaround
Kindly import the css file to your global entry point.
Usually, that is `app/layout.tsx`

```json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"bdp-ui/*": ["./node_modules/bdp-ui/dist/*"]
}
}
}
_note: import the css before your global css so if there are any conflicts your css takes precedence_
```tsx
// app/layout.tsx
...
import "@bitcoin-dev-project/bdp-ui/styles.css"
import "./globals.css";
...
```

If you use tailwind for styling, also point your tailwind config to the library
i.e
```tsx
// tailwind.config.ts
...
const config: Config = {
darkMode: "class",
content: [
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
"node_modules/@bitcoin-dev-project/bdp-ui/dist/**/*.{js,mjs,jsx,ts,tsx}", // add it here
],
...
```
### Components
Here is how you can import and use components
```jsx
import { Button } from 'bdp-ui';
import { Button } from '@bitcoin-dev-project/bdp-ui';

function App() {
return (
Expand All @@ -44,8 +60,10 @@ function App() {
```
### Icons
Here is how you can import icons
```jsx
import { GithubIcon } from 'bdp-ui/icons';
import { GithubIcon } from '@bitcoin-dev-project/bdp-ui/icons';

function App() {
return (
Expand All @@ -56,4 +74,4 @@ function App() {
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details

0 comments on commit f7fe6f3

Please sign in to comment.