diff --git a/apps/demo-react/index.html b/apps/demo-react/index.html
index e0d1c840..e4b78eae 100644
--- a/apps/demo-react/index.html
+++ b/apps/demo-react/index.html
@@ -1,4 +1,4 @@
-
+
diff --git a/apps/demo-react/src/App.tsx b/apps/demo-react/src/App.tsx
index 22216c58..a459bc87 100644
--- a/apps/demo-react/src/App.tsx
+++ b/apps/demo-react/src/App.tsx
@@ -1,7 +1,5 @@
import './App.css'
-import { defineCustomElements, OramaSearchBox } from 'ui-stencil-react'
-
-// import {} from 'ui-stencil-react'
+import { defineCustomElements, OramaChatBox } from 'ui-stencil-react'
void defineCustomElements()
@@ -14,9 +12,14 @@ function App() {
- Stencil Components
+ ChatBox
-
+
diff --git a/apps/demo-react/src/index.css b/apps/demo-react/src/index.css
index 6b18b398..e5cc7b49 100644
--- a/apps/demo-react/src/index.css
+++ b/apps/demo-react/src/index.css
@@ -116,8 +116,14 @@ section {
margin-bottom: 1rem;
}
+main {
+ width: 90%;
+ max-width: 1200px;
+ margin: 0 auto;
+}
+
.component-row {
- background-color: #ddd;
- padding: 1rem;
- border-radius: 1rem;
+ width: 100%;
+ max-width: 800px;
+ margin: 0 auto;
}
diff --git a/packages/ui-stencil-react/src/index.ts b/packages/ui-stencil-react/src/index.ts
index 49b8df3a..a61c3cdc 100644
--- a/packages/ui-stencil-react/src/index.ts
+++ b/packages/ui-stencil-react/src/index.ts
@@ -1,2 +1,4 @@
-export * from "./components/stencil-generated";
-export { defineCustomElements } from "ui-stencil/loader";
+export * from './components/stencil-generated'
+export { defineCustomElements } from 'ui-stencil/loader'
+
+import 'ui-stencil/dist/orama-ui/orama-ui.css'
diff --git a/packages/ui-stencil/src/index.html b/packages/ui-stencil/src/index.html
index 41dfe273..ec018ab8 100644
--- a/packages/ui-stencil/src/index.html
+++ b/packages/ui-stencil/src/index.html
@@ -7,7 +7,7 @@
-
+