{"id":16144088,"url":"https://github.com/threlte/threlte-uikit","last_synced_at":"2026-05-23T20:02:01.431Z","repository":{"id":243104122,"uuid":"809911441","full_name":"threlte/threlte-uikit","owner":"threlte","description":"@pmndrs/uikit for Threlte apps","archived":false,"fork":false,"pushed_at":"2026-04-08T03:09:41.000Z","size":63580,"stargazers_count":22,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-04-08T05:02:47.345Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://threlte.github.io/threlte-uikit/","language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/threlte.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"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":null,"dco":null,"cla":null}},"created_at":"2024-06-03T17:29:14.000Z","updated_at":"2026-04-08T03:09:44.000Z","dependencies_parsed_at":"2025-01-21T22:41:17.724Z","dependency_job_id":"e76ba86c-5b51-4e23-9030-91661618e8dd","html_url":"https://github.com/threlte/threlte-uikit","commit_stats":null,"previous_names":["michealparks/threlte-uikit","threlte/threlte-uikit"],"tags_count":20,"template":false,"template_full_name":null,"purl":"pkg:github/threlte/threlte-uikit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/threlte%2Fthrelte-uikit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/threlte%2Fthrelte-uikit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/threlte%2Fthrelte-uikit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/threlte%2Fthrelte-uikit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/threlte","download_url":"https://codeload.github.com/threlte/threlte-uikit/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/threlte%2Fthrelte-uikit/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33410345,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-23T18:09:33.147Z","status":"ssl_error","status_checked_at":"2026-05-23T18:09:31.380Z","response_time":53,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":"2024-10-10T00:11:23.226Z","updated_at":"2026-05-23T20:02:01.401Z","avatar_url":"https://github.com/threlte.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"# threlte-uikit\n\n`threlte-uikit` wraps [`@pmndrs/uikit`](https://github.com/pmndrs/uikit) in a declarative syntax for use with [Threlte](https://threlte.xyz).\n\n```\nnpm i threlte-uikit\n```\n\n## Subpath exports\n\n| Import path             | Contents                                    |\n| ----------------------- | ------------------------------------------- |\n| `threlte-uikit`         | Core primitives (`Container`, `Text`, etc.) |\n| `threlte-uikit/kit`     | Kit component library                       |\n| `threlte-uikit/horizon` | Horizon component library                   |\n| `threlte-uikit/lucide`  | Lucide icon components                      |\n\n## Getting started\n\n```svelte\n\u003cscript\u003e\n  import { T } from '@threlte/core'\n  import { interactivity } from '@threlte/extras'\n  import { Container, Text } from 'threlte-uikit'\n\n  interactivity()\n\u003c/script\u003e\n\n\u003cT.Group\u003e\n  \u003cContainer\n    padding={10}\n    backgroundColor=\"#ccc\"\n  \u003e\n    \u003cText text=\"Hello uikit!\" /\u003e\n  \u003c/Container\u003e\n\u003c/T.Group\u003e\n```\n\nThe component instance may be accessed via the `ref` property.\n\n```svelte\n\u003cContainer bind:ref\u003e...\u003c/Container\u003e\n```\n\n## Core primitives\n\nThese components map 1:1 to the `@pmndrs/uikit` primitives. See the [uikit component docs](https://docs.pmnd.rs/uikit/getting-started/components-and-properties) for the full property reference.\n\n| Component    | Docs                                                                                    |\n| ------------ | --------------------------------------------------------------------------------------- |\n| `Container`  | [docs](https://docs.pmnd.rs/uikit/getting-started/components-and-properties#container)  |\n| `Fullscreen` | [docs](https://docs.pmnd.rs/uikit/getting-started/components-and-properties#fullscreen) |\n| `Image`      | [docs](https://docs.pmnd.rs/uikit/getting-started/components-and-properties#image)      |\n| `Text`       | [docs](https://docs.pmnd.rs/uikit/getting-started/components-and-properties#text)       |\n| `SVG`        | [docs](https://docs.pmnd.rs/uikit/getting-started/components-and-properties#svg)        |\n| `Content`    | [docs](https://docs.pmnd.rs/uikit/getting-started/components-and-properties#content)    |\n| `Input`      | [docs](https://docs.pmnd.rs/uikit/getting-started/components-and-properties#input)      |\n| `Textarea`   | [docs](https://docs.pmnd.rs/uikit/getting-started/components-and-properties#textarea)   |\n| `Video`      | [docs](https://docs.pmnd.rs/uikit/getting-started/components-and-properties#video)      |\n\n## Scrollable containers\n\nSet `overflow=\"scroll\"` on any `Container` to make it scrollable. Requires `interactivity()` to be active.\n\n```svelte\n\u003cContainer\n  overflow=\"scroll\"\n  height={200}\n  flexDirection=\"column\"\n\u003e\n  {#each items as item}\n    \u003cText text={item} /\u003e\n  {/each}\n\u003c/Container\u003e\n```\n\n## Events\n\nInvoke the Threlte [`interactivity`](https://threlte.xyz/docs/reference/extras/interactivity) plugin in the same component or a parent to enable pointer events. All events supported by `interactivity` are supported.\n\n```svelte\n\u003cContainer\n  onclick={() =\u003e console.log('clicked')}\n  onpointerenter={() =\u003e console.log('entered')}\n  onpointerleave={() =\u003e console.log('left')}\n\u003e\n  \u003cText text=\"I am a button\" /\u003e\n\u003c/Container\u003e\n```\n\n`hover` and `active` conditional properties also require `interactivity()`:\n\n```svelte\n\u003cContainer\n  backgroundColor=\"red\"\n  hover={{ backgroundColor: 'purple' }}\n  active={{ backgroundColor: 'blue' }}\n\u003e\n  ...\n\u003c/Container\u003e\n```\n\n## Kit components\n\nImport from `threlte-uikit/kit`. These are unstyled, accessible components built on the uikit primitives, inspired by [shadcn/ui](https://ui.shadcn.com).\n\n| Component          | Description                                          |\n| ------------------ | ---------------------------------------------------- |\n| `Alert`            | Alert banner with icon, title, and description slots |\n| `AlertIcon`        | Icon slot for `Alert`                                |\n| `AlertTitle`       | Title slot for `Alert`                               |\n| `AlertDescription` | Description slot for `Alert`                         |\n| `Accordion`        | Collapsible accordion container                      |\n| `AccordionItem`    | Individual accordion section                         |\n| `AccordionTrigger` | Clickable accordion header                           |\n| `AccordionContent` | Accordion body content                               |\n| `Avatar`           | Circular image avatar                                |\n| `Badge`            | Small label badge                                    |\n| `Button`           | Pressable button                                     |\n| `Card`             | Card container                                       |\n| `CardHeader`       | Card header section                                  |\n| `CardTitle`        | Card title                                           |\n| `CardDescription`  | Card description                                     |\n| `CardContent`      | Card body content                                    |\n| `CardFooter`       | Card footer section                                  |\n| `Checkbox`         | Checkbox with checked/unchecked state                |\n| `KitInput`         | Single-line text input                               |\n| `KitTextarea`      | Multi-line text input                                |\n| `Label`            | Form label                                           |\n| `Progress`         | Linear progress bar                                  |\n| `RadioGroup`       | Radio group container                                |\n| `RadioGroupItem`   | Individual radio item                                |\n| `Separator`        | Horizontal divider                                   |\n| `Skeleton`         | Loading skeleton placeholder                         |\n| `Slider`           | Range slider                                         |\n| `Switch`           | Toggle switch                                        |\n| `Tabs`             | Tab container                                        |\n| `TabsList`         | Tab navigation bar                                   |\n| `TabsTrigger`      | Individual tab button                                |\n| `TabsContent`      | Tab panel content                                    |\n| `Toggle`           | Pressable toggle button                              |\n| `ToggleGroup`      | Group of toggle buttons                              |\n| `ToggleGroupItem`  | Individual item in a `ToggleGroup`                   |\n\n## Horizon components\n\nImport from `threlte-uikit/horizon`. A fully themed component set that supports light and dark mode automatically.\n\n| Component           | Description                                                              |\n| ------------------- | ------------------------------------------------------------------------ |\n| `Panel`             | Rounded card container                                                   |\n| `Button`            | Button with `primary`, `secondary`, `tertiary`, `negative` variants      |\n| `Badge`             | Label badge with `primary`, `secondary`, `positive`, `negative` variants |\n| `Avatar`            | Circular image avatar (`sm`, `md`, `lg`)                                 |\n| `Checkbox`          | Styled checkbox                                                          |\n| `Toggle`            | Styled toggle switch                                                     |\n| `Slider`            | Styled range slider                                                      |\n| `ProgressBar`       | Linear progress indicator                                                |\n| `RadioGroup`        | Styled radio group                                                       |\n| `RadioGroupItem`    | Styled radio item                                                        |\n| `Input`             | Styled text input with optional icon                                     |\n| `InputField`        | Labeled input field                                                      |\n| `Dropdown`          | Styled dropdown                                                          |\n| `DropdownButton`    | Dropdown trigger button                                                  |\n| `DropdownTextValue` | Displays the selected dropdown value                                     |\n| `DropdownList`      | Dropdown option list                                                     |\n| `DropdownListItem`  | Individual dropdown option                                               |\n| `IconIndicator`     | Status indicator dot (`none`, `good`, `poor`, `bad`)                     |\n| `Divider`           | Horizontal rule                                                          |\n\n## Lucide icons\n\nImport from `threlte-uikit/lucide`. Renders any [Lucide](https://lucide.dev) icon as a uikit element.\n\n```svelte\n\u003cscript\u003e\n  import { Icon, SearchIcon } from 'threlte-uikit/lucide'\n\u003c/script\u003e\n\n\u003cIcon\n  is={SearchIcon}\n  width={24}\n  height={24}\n/\u003e\n```\n\nAll Lucide icon components are re-exported from this subpath.\n\n## Utilities\n\n### `provideDefaultProperties()`\n\nOverrides default properties for all uikit components within the calling component's subtree.\n\n```ts\nlet defaultProps = $state({ margin: 10 })\nprovideDefaultProperties(() =\u003e defaultProps)\n```\n\n### `provideFontFamilies()`\n\nProvides custom font families to the subtree. See the [uikit custom fonts guide](https://docs.pmnd.rs/uikit/tutorials/custom-fonts) for how to generate compatible font JSON files.\n\n```ts\nprovideFontFamilies({\n  roboto: {\n    light: 'url-to-json',\n    medium: 'url-to-json',\n    bold: 'url-to-json',\n  },\n})\n```\n\n## Dark mode\n\n`threlte-uikit` inherits dark mode from `@pmndrs/uikit` via the `isDarkMode` signal. Horizon components automatically respond to dark/light mode changes.\n\n```svelte\n\u003cscript\u003e\n  import { isDarkMode } from 'threlte-uikit'\n\u003c/script\u003e\n\n\u003cdiv\u003e\n  {isDarkMode.current ? 'Light mode' : 'Dark mode'}\n\u003c/div\u003e\n```\n\n## Camera controls\n\nWhen using `CameraControls` or `OrbitControls` from `@threlte/extras`, they are automatically detected by `threlte-uikit` and disabled during UI pointer interactions such as drags and scrolls — no extra configuration required.\n\n```svelte\n\u003cscript\u003e\n  import { CameraControls, interactivity } from '@threlte/extras'\n  import { Container } from 'threlte-uikit'\n\n  interactivity()\n\u003c/script\u003e\n\n\u003cCameraControls /\u003e\n\n\u003cContainer\u003e\n  \u003c!-- Sliders, scrollable containers, etc. automatically disable CameraControls while active --\u003e\n\u003c/Container\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthrelte%2Fthrelte-uikit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthrelte%2Fthrelte-uikit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthrelte%2Fthrelte-uikit/lists"}