diff --git a/README.md b/README.md
index da1ca85..52a950b 100644
--- a/README.md
+++ b/README.md
@@ -6,6 +6,10 @@
React UI component library for [Deepgram Voice Agent](https://developers.deepgram.com/docs/voice-agent) — Tailwind v4, shadcn/ui, fully themeable.
+## Status
+
+This library is pre-1.0. Interfaces may change between minor versions, and releases are cut as the library evolves rather than on a fixed schedule. This package and its siblings — [`@deepgram/agents`](https://github.com/deepgram/agent), [`@deepgram/react`](https://github.com/deepgram/react), and [`@deepgram/agents-widget`](https://github.com/deepgram/agent) — build on the [Deepgram Voice Agent API](https://developers.deepgram.com/docs/voice-agent) to provide embeddable browser components.
+
## Install
```bash
@@ -22,9 +26,21 @@ import {
AgentMessage,
AgentTextInput,
AgentStatus,
+ useAgentConversation,
} from "@deepgram/ui";
import "@deepgram/ui/styles.css";
+function Conversation() {
+ const { conversation } = useAgentConversation();
+ return (
+
+ {conversation.map((entry) => (
+
+ ))}
+
+ );
+}
+
function App() {
return (
-
- {conversation.map((entry) => (
-
- ))}
-
+
diff --git a/packages/ui/README.md b/packages/ui/README.md
index f50bf67..36bb96a 100644
--- a/packages/ui/README.md
+++ b/packages/ui/README.md
@@ -2,8 +2,18 @@
Pre-built, styled React components for the [Deepgram Voice Agent API](https://developers.deepgram.com/docs/voice-agent). Fully customizable via CSS variables. Re-exports all hooks from [`@deepgram/react`](../react/) so you only need one import.
+## Status
+
+This package is pre-1.0. Interfaces may change between minor versions.
+
## Install
+```bash
+npm install @deepgram/ui react react-dom
+```
+
+or with Bun:
+
```bash
bun add @deepgram/ui react react-dom
```
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 48ea23b..cfbf8c1 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -27,7 +27,7 @@
"url": "https://github.com/deepgram/ui/issues"
},
"scripts": {
- "build": "tsc --noEmit && vite build",
+ "build": "tsc --noEmit && vite build && vite build --config vite.styles.config.ts",
"typecheck": "tsc --noEmit",
"dev": "vite build --watch",
"test": "bun test",
diff --git a/packages/ui/vite.config.ts b/packages/ui/vite.config.ts
index 5dcdd85..510aaff 100644
--- a/packages/ui/vite.config.ts
+++ b/packages/ui/vite.config.ts
@@ -1,6 +1,4 @@
import { defineConfig } from "vite";
-import { copyFileSync, mkdirSync } from "node:fs";
-import { resolve } from "node:path";
import tailwindcss from "@tailwindcss/vite";
import react from "@vitejs/plugin-react";
import cssInjected from "vite-plugin-css-injected-by-js";
@@ -34,16 +32,10 @@ export default defineConfig({
// when it imports @deepgram/ui/dist/index.js.
cssInjected(),
dts({ rollupTypes: true }),
- // Copy standalone styles.css to dist for @deepgram/ui/styles.css
- {
- name: "copy-styles",
- closeBundle() {
- mkdirSync(resolve(__dirname, "dist"), { recursive: true });
- copyFileSync(
- resolve(__dirname, "src/styles.css"),
- resolve(__dirname, "dist/styles.css"),
- );
- },
- },
+ // The standalone stylesheet for the `@deepgram/ui/styles.css` export is
+ // built by a second Vite pass (vite.styles.config.ts) that compiles
+ // src/styles.css through Tailwind. It was previously copied verbatim,
+ // which shipped raw Tailwind source (@import/@plugin directives) that
+ // consumer bundlers reject.
],
});
diff --git a/packages/ui/vite.styles.config.ts b/packages/ui/vite.styles.config.ts
new file mode 100644
index 0000000..66b4424
--- /dev/null
+++ b/packages/ui/vite.styles.config.ts
@@ -0,0 +1,24 @@
+import { defineConfig } from "vite";
+import tailwindcss from "@tailwindcss/vite";
+
+// Compiles the standalone stylesheet for the `@deepgram/ui/styles.css`
+// export. The main build (vite.config.ts) embeds compiled CSS into the JS
+// bundle via vite-plugin-css-injected-by-js, so no CSS asset leaves that
+// pass; this second pass exists solely to turn src/styles.css (Tailwind v4
+// source with @import/@plugin directives) into plain compiled CSS at
+// dist/styles.css. Previously the raw source file was copied verbatim,
+// which broke consumer builds (lightningcss rejects `@media prefix(dg)`)
+// and served no styles to consumers who imported it.
+export default defineConfig({
+ plugins: [tailwindcss()],
+ build: {
+ outDir: "dist",
+ emptyOutDir: false,
+ rollupOptions: {
+ input: "src/styles.css",
+ output: {
+ assetFileNames: "styles[extname]",
+ },
+ },
+ },
+});