diff --git a/README.md b/README.md index bf6db3d..e24fb02 100644 --- a/README.md +++ b/README.md @@ -47,7 +47,7 @@ - [x] Anchor links - [x] Toast - [x] Autohide - - [ ] Dismissable + - [x] Dismissable - [ ] Position - [ ] Promise based - [ ] DatePicker / TimePicker / Calendar diff --git a/docs/docs/components/README.md b/docs/docs/components/README.md deleted file mode 100644 index 6db3be2..0000000 --- a/docs/docs/components/README.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -sidebar_position: 0 ---- - -# All components diff --git a/docs/docs/components/README.mdx b/docs/docs/components/README.mdx new file mode 100644 index 0000000..361fc0e --- /dev/null +++ b/docs/docs/components/README.mdx @@ -0,0 +1,65 @@ +--- +sidebar_position: 0 +--- + +# Installation + +## CDN + +You can use the following lines in your `head` tag to load the latest version of Bloum from a CDN: + +```html + + + + + + +``` + +## Package manager + + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + + ```bash + npm install bloum + ``` + + + ```bash + yarn add bloum + ``` + + + ```bash + pnpm add bloum + ``` + + + ```bash + bun add bloum + ``` + + + +Once installed, you can import the library in your JavaScript project: + +```js +import "bloum" +import "bloum/dist/style.min.css" +import "bloum/dist/modern.min.css" +``` + +Then, you can use the components in your HTML: + +```html + +
Option 1
+
Option 2
+
Option 3
+
+``` diff --git a/docs/docs/components/03-modal.mdx b/docs/docs/components/modal.mdx similarity index 100% rename from docs/docs/components/03-modal.mdx rename to docs/docs/components/modal.mdx diff --git a/docs/docs/components/02-select.md b/docs/docs/components/select.mdx similarity index 100% rename from docs/docs/components/02-select.md rename to docs/docs/components/select.mdx diff --git a/docs/docs/components/04-tabs.mdx b/docs/docs/components/tabs.mdx similarity index 100% rename from docs/docs/components/04-tabs.mdx rename to docs/docs/components/tabs.mdx