{"id":50700315,"url":"https://github.com/twangodev/sv11-ui","last_synced_at":"2026-06-09T09:02:08.652Z","repository":{"id":349472994,"uuid":"1202349893","full_name":"twangodev/sv11-ui","owner":"twangodev","description":"elevenlabs/ui, but for Svelte.","archived":false,"fork":false,"pushed_at":"2026-05-29T23:49:27.000Z","size":88069,"stargazers_count":0,"open_issues_count":6,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-30T01:19:02.497Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://sv11.ui.twango.dev","language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/twangodev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":"AGENTS.md","dco":null,"cla":null}},"created_at":"2026-04-05T23:31:37.000Z","updated_at":"2026-05-29T23:49:30.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/twangodev/sv11-ui","commit_stats":null,"previous_names":["twangodev/svagent-ui","twangodev/sv11-ui"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/twangodev/sv11-ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twangodev%2Fsv11-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twangodev%2Fsv11-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twangodev%2Fsv11-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twangodev%2Fsv11-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/twangodev","download_url":"https://codeload.github.com/twangodev/sv11-ui/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twangodev%2Fsv11-ui/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34098952,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-09T02:00:06.510Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-06-09T09:02:07.521Z","updated_at":"2026-06-09T09:02:08.640Z","avatar_url":"https://github.com/twangodev.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"# sv11-ui\n\n[sv11-ui](https://sv11.ui.twango.dev) is a Svelte 5 port of [elevenlabs/ui](https://github.com/elevenlabs/ui), built on top of [shadcn-svelte](https://shadcn-svelte.com/) to help you build AI agent interfaces faster.\n\n## Overview\n\nsv11-ui brings the [ElevenLabs UI](https://ui.elevenlabs.io) component library to the Svelte ecosystem. Same components — orbs, waveforms, voice agents, audio players, conversation UIs, and more — rebuilt from the ground up for Svelte 5 and SvelteKit.\n\nThis time, it's provider-agnostic by design. You can bring your own backend (ElevenLabs, OpenAI, Deepgram, or custom).\n\nThe CLI makes it easy to add these components to your SvelteKit project.\n\n## Installation\n\n```bash\n# Using shadcn-svelte CLI\nnpx shadcn-svelte@latest add https://sv11.ui.twango.dev/r/\u003ccomponent-name\u003e.json\n\n# Install all components\nnpx shadcn-svelte@latest add https://sv11.ui.twango.dev/r/all.json\n```\n\n## Prerequisites\n\nBefore using sv11-ui, ensure your SvelteKit project meets these requirements:\n\n- **Node.js 18** or later\n- **shadcn-svelte** initialized in your project\n- **Tailwind CSS** configured\n- **Svelte 5** with runes\n\n## Usage\n\n### Install Specific Components\n\n```bash\n# Install the message component\nnpx shadcn-svelte@latest add https://sv11.ui.twango.dev/r/message.json\n\n# Install the audio player\nnpx shadcn-svelte@latest add https://sv11.ui.twango.dev/r/audio-player.json\n\n# Install the orb\nnpx shadcn-svelte@latest add https://sv11.ui.twango.dev/r/orb.json\n```\n\n### Install All Components\n\n```bash\nnpx shadcn-svelte@latest add https://sv11.ui.twango.dev/r/all.json\n```\n\n## Components\n\n### UI Components\n\nComponents below are listed in recommended porting order: foundations first, then composites that build on them, saving the heaviest lifts (Web Audio, Three.js) for last.\n\n| Component           | Description                                         | Status |\n| ------------------- | --------------------------------------------------- | ------ |\n| `message`           | Chat message bubble with avatar and variant styling | Done   |\n| `response`          | Streaming markdown renderer for AI responses        | Done   |\n| `shimmering-text`   | Text with shimmer/gradient animation                | Done   |\n| `scrub-bar`         | Audio timeline scrubber                             | Done   |\n| `conversation`      | Chat message container with auto-scroll             | Done   |\n| `audio-player`      | Full-featured audio playback with scrubbing         | Done   |\n| `waveform`          | Static audio waveform visualization                 | Done   |\n| `live-waveform`     | Real-time microphone waveform                       | Done   |\n| `voice-button`      | Voice input button with state feedback              | Done   |\n| `mic-selector`      | Microphone device selector                          | Done   |\n| `matrix`            | LED matrix display with animations                  | Done   |\n| `bar-visualizer`    | Audio frequency band visualization                  | Done   |\n| `transcript-viewer` | Synchronized transcript with audio playback         | Done   |\n| `speech-input`      | Real-time speech-to-text input                      | Done   |\n| `conversation-bar`  | Chat input bar with voice/text modes                | Done   |\n| `orb`               | 3D animated voice agent visualclzation              | Done   |\n| `voice-picker`      | Voice selection dropdown with preview               | Done   |\n\n### Provider-Agnostic\n\nComponents that interact with AI services accept adapter interfaces — not SDK-specific types. Implement `ConversationAdapter`, `TranscriptionAdapter`, or `Voice` for your provider of choice.\n\n```svelte\n\u003cscript\u003e\n\timport { ConversationBar } from \"$lib/registry/ui/conversation-bar\";\n\timport { createMyConversation } from \"./my-adapter\";\n\n\tconst conversation = createMyConversation({ agentId: \"xxx\" });\n\u003c/script\u003e\n\n\u003cConversationBar adapter={conversation} /\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftwangodev%2Fsv11-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftwangodev%2Fsv11-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftwangodev%2Fsv11-ui/lists"}