docs: improve guide installation (#393)

openlitedotdev · Sep 17, 2024 · 9f4d3a0 · 9f4d3a0
1 parent aa562fd
commit 9f4d3a0
Show file tree

Hide file tree

Showing 8 changed files with 52 additions and 40 deletions.
diff --git a/docs/content/docs/figma.mdx b/docs/content/docs/figma.mdx
@@ -6,14 +6,14 @@ description: Every component recreated in Figma. With customizable props, typogr
 The Figma UI Kit is open sourced by [Open Lab](https://github.com/OpenLabs-dev).
 
 <div className="w-full mt-4 aspect-video">
-  <iframe
-    src="https://embed.figma.com/file/1354464067434498042/hf_embed?community_viewer=true&embed_host=fastma&fuid=1338616720486870221&hub_file_id=1354464067434498042&kind=file&viewer=1"
+  <iframe  
     className="overflow-hidden rounded-large border w-full"
-    height="450"
-    allowFullScreen
-  />
+    height="450"    
+    src="https://embed.figma.com/design/CA4RlpNtWPmqM3ZQJzax0M/Dialect-%E2%80%93-Design-System-%26-Component-Library-(Free)-(Community)?node-id=0-1&embed-host=share" allowFullScreen
+    >
+    </iframe>
 </div>
 
 ## Grab a copy
 
-[Link to Figma](https://www.figma.com/community/file/1354464067434498042/open-ui)
+[Link to Figma](https://www.figma.com/design/CA4RlpNtWPmqM3ZQJzax0M/Dialect-%E2%80%93-Design-System-%26-Component-Library-(Free)-(Community)?node-id=0-1&t=UQxxiw1B29rUlcw6-1)
diff --git a/docs/content/docs/frameworks/astro.mdx b/docs/content/docs/frameworks/astro.mdx
@@ -21,28 +21,28 @@ In your Astro project, run one of the following command to install Open UI:
     <Tab value='npm'>
 
 ```bash
-npm install @openlabs/ui
+npm install @openlite/ui
 ```
 
     </Tab>
     <Tab value="pnpm">
 
 ```bash
-pnpm add @openlabs/ui
+pnpm add @openlite/ui
 ```
 
     </Tab>
     <Tab value='yarn'>
 
 ```bash
-yarn add @openlabs/ui
+yarn add @openlite/ui
 ```
 
     </Tab>
     <Tab value='bun'>
 
 ```bash
-bun add @openlabs/ui
+bun add @openlite/ui
 ```
 
     </Tab>
@@ -58,12 +58,12 @@ the following code to your `tailwind.config.mjs` file:
 
 ```js
 // tailwind.config.mjs
-import { openui } from "@openlabs/theme"
+import { openui } from "@openlite/ui/tailwind"
 
 export default {
   content: [
     //...
-    "./node_modules/@openlabs/theme/dist/**/*.{js,ts,jsx,tsx}",
+    "./node_modules/@openlite/ui/dist/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
     extend: {},
@@ -76,10 +76,12 @@ export default {
 
 Now you can import Open UI components and use them in your Astro project:
 
-```markdown
+<Button>My button in Astro </Button>
+
+```astro
 ---
 import Layout from '../layouts/Layout.astro';
-import { Button } from '@openlabs/ui';
+import { Button } from '@openlite/ui';
 ---
 
 <Layout title="Welcome to Astro.">

diff --git a/docs/content/docs/frameworks/nextjs.mdx b/docs/content/docs/frameworks/nextjs.mdx
@@ -21,28 +21,28 @@ directly in your React Server Components (RSC).
     <Tab value='npm'>
 
 ```bash
-npm install @openlabs/ui
+npm install @openlite/ui
 ```
 
     </Tab>
     <Tab value="pnpm">
 
 ```bash
-pnpm add @openlabs/ui
+pnpm add @openlite/ui
 ```
 
     </Tab>
     <Tab value='yarn'>
 
 ```bash
-yarn add @openlabs/ui
+yarn add @openlite/ui
 ```
 
     </Tab>
     <Tab value='bun'>
 
 ```bash
-bun add @openlabs/ui
+bun add @openlite/ui
 ```
 
     </Tab>
@@ -57,13 +57,13 @@ the following code to your `tailwind.config.js` file:
 
 ```js
 // tailwind.config.js
-import { openui } from "@openlabs/theme"
+import { openui } from "@openlite/ui/tailwind"
 
 /** @type {import("tailwindcss").Config} */
 export default {
   content: [
     //...
-    "./node_modules/@openlabs/theme/dist/**/*.{js,ts,jsx,tsx}",
+    "./node_modules/@openlite/ui/dist/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
     extend: {},
@@ -76,6 +76,8 @@ export default {
 
 Now, you can use the component you installed in your application 🎉.
 
+<Button>My button in Next.js </Button>
+
 ```jsx
 // src/components/ButtonExample.jsx
 import { Button } from "@openlabs/ui"

diff --git a/docs/content/docs/frameworks/remix.mdx b/docs/content/docs/frameworks/remix.mdx
@@ -16,28 +16,28 @@ In your Remix project, run one of the following command to install Open UI:
     <Tab value='npm'>
 
 ```bash
-npm install @openlabs/ui
+npm install @openlite/ui
 ```
 
     </Tab>
     <Tab value="pnpm">
 
 ```bash
-pnpm add @openlabs/ui
+pnpm add @openlite/ui
 ```
 
     </Tab>
     <Tab value='yarn'>
 
 ```bash
-yarn add @openlabs/ui
+yarn add @openlite/ui
 ```
 
     </Tab>
     <Tab value='bun'>
 
 ```bash
-bun add @openlabs/ui
+bun add @openlite/ui
 ```
 
     </Tab>
@@ -53,12 +53,12 @@ the following code to your `tailwind.config.ts` file:
 ```ts
 // tailwind.config.ts
 import type { Config } from 'tailwindcss'
-import { openui } from "@openlabs/theme"
+import { openui } from "@openlite/ui/tailwind"
 
 export default {
   content: [
     //...
-    "./node_modules/@openlabs/theme/dist/**/*.{js,ts,jsx,tsx}",
+    "./node_modules/@openlite/ui/dist/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
     extend: {},
@@ -71,6 +71,8 @@ export default {
 
 Now, you can use the component you installed in your application 🎉.
 
+<Button>My button in Remix </Button>
+
 ```jsx
 // src/components/ButtonExample.tsx
 import { Button } from "@openlabs/ui"

diff --git a/docs/content/docs/frameworks/vite.mdx b/docs/content/docs/frameworks/vite.mdx
@@ -17,28 +17,28 @@ In your Vite React project, run one of the following command to install Open UI:
     <Tab value='npm'>
 
 ```bash
-npm install @openlabs/ui
+npm install @openlite/ui
 ```
 
     </Tab>
     <Tab value="pnpm">
 
 ```bash
-pnpm add @openlabs/ui
+pnpm add @openlite/ui
 ```
 
     </Tab>
     <Tab value='yarn'>
 
 ```bash
-yarn add @openlabs/ui
+yarn add @openlite/ui
 ```
 
     </Tab>
     <Tab value='bun'>
 
 ```bash
-bun add @openlabs/ui
+bun add @openlite/ui
 ```
 
     </Tab>
@@ -53,13 +53,13 @@ the following code to your `tailwind.config.js` file:
 
 ```js
 // tailwind.config.js
-import { openui } from "@openlabs/theme"
+import { openui } from "@openlite/ui/tailwind"
 
 /** @type {import("tailwindcss").Config} */
 export default {
   content: [
     //...
-    "./node_modules/@openlabs/theme/dist/**/*.{js,ts,jsx,tsx}",
+    "./node_modules/@openlite/ui/dist/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
     extend: {},
@@ -72,6 +72,8 @@ export default {
 
 Now, you can use the component you installed in your application 🎉.
 
+<Button>My button in Vite </Button>
+
 ```jsx
 // src/components/ButtonExample.jsx
 import { Button } from "@openlabs/ui"

diff --git a/docs/content/docs/installation.mdx b/docs/content/docs/installation.mdx
@@ -14,28 +14,28 @@ Requirements:
     <Tab value='npm'>
 
 ```bash
-npm install @openlabs/ui
+npm install @openlite/ui
 ```
 
     </Tab>
     <Tab value="pnpm">
 
 ```bash
-pnpm add @openlabs/ui
+pnpm add @openlite/ui
 ```
 
     </Tab>
     <Tab value='yarn'>
 
 ```bash
-yarn add @openlabs/ui
+yarn add @openlite/ui
 ```
 
     </Tab>
     <Tab value='bun'>
 
 ```bash
-bun add @openlabs/ui
+bun add @openlite/ui
 ```
 
     </Tab>
@@ -48,13 +48,13 @@ Open UI is built on top of Tailwind CSS, so you need to install Tailwind CSS fir
 
 ```js
 // tailwind.config.js
-import { openui } from "@openlabs/theme"
+import { openui } from "@openlite/ui/tailwind"
 
 /** @type {import("tailwindcss").Config} */
 export default {
   content: [
     //...
-    "./node_modules/@openlabs/theme/dist/**/*.{js,ts,jsx,tsx}",
+    './node_modules/@openlite/ui/dist/**/*.{js,ts,jsx,tsx,mdx}',
   ],
   theme: {
     extend: {},
@@ -67,8 +67,10 @@ export default {
 
 Now, you can use the component you installed in your application 🎉.
 
+<Button>Press me</Button>
+
 ```jsx
-import { Button } from "@openlabs/ui"
+import { Button } from "@openlite/ui"
 
 export default function App() {
   return <Button>Press me</Button>

diff --git a/docs/content/docs/meta.json b/docs/content/docs/meta.json
@@ -7,7 +7,7 @@
     "installation",
     "typography",
     "figma",
-    "---frameworks---",
+    "---Frameworks---",
     "...frameworks",
     "---Components---",
     "...components"

diff --git a/docs/mdx-components.tsx b/docs/mdx-components.tsx
@@ -12,10 +12,12 @@ import {
 import type { ReactNode } from 'react'
 import { Popup, PopupContent, PopupTrigger } from 'fumadocs-ui/twoslash/popup'
 import { cn } from '@openlite/ui/tailwind'
+import { Button } from '@openlite/ui'
 
 export function useMDXComponents(components: MDXComponents): MDXComponents {
   return {
     ...defaultComponents,
+    Button,
     Popup,
     PopupContent,
     PopupTrigger,