{"id":28748495,"url":"https://github.com/vela-ui/vela-ui","last_synced_at":"2026-01-18T15:08:32.671Z","repository":{"id":279928868,"uuid":"937959436","full_name":"vela-ui/vela-ui","owner":"vela-ui","description":"React Aria Components + Tailwindcss v4  = Vela UI","archived":false,"fork":false,"pushed_at":"2025-10-26T09:08:39.000Z","size":1607,"stargazers_count":1,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-26T09:13:40.001Z","etag":null,"topics":["component-library","react-aria","react-aria-components","react-components","tailwindcss","ui-components"],"latest_commit_sha":null,"homepage":"https://vela-ui.vercel.app","language":"TypeScript","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/vela-ui.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2025-02-24T07:38:25.000Z","updated_at":"2025-10-26T09:07:57.000Z","dependencies_parsed_at":"2025-06-16T10:22:02.319Z","dependency_job_id":"0c7365ad-945d-45f3-8fa9-989b1b9f6db0","html_url":"https://github.com/vela-ui/vela-ui","commit_stats":null,"previous_names":["vela-ui/vela-ui"],"tags_count":41,"template":false,"template_full_name":null,"purl":"pkg:github/vela-ui/vela-ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vela-ui%2Fvela-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vela-ui%2Fvela-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vela-ui%2Fvela-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vela-ui%2Fvela-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vela-ui","download_url":"https://codeload.github.com/vela-ui/vela-ui/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vela-ui%2Fvela-ui/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28539020,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-18T14:59:57.589Z","status":"ssl_error","status_checked_at":"2026-01-18T14:59:46.540Z","response_time":98,"last_error":"SSL_read: 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":["component-library","react-aria","react-aria-components","react-components","tailwindcss","ui-components"],"created_at":"2025-06-16T18:04:50.810Z","updated_at":"2026-01-18T15:08:32.659Z","avatar_url":"https://github.com/vela-ui.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vela UI\n\nVela UI is a modern React component library that combines the elegant design principles of shadcn/ui with the robust accessibility features of React Aria Components. Built on top of Tailwind CSS\n\n## Installation\n\nAdd dependencies to your project manually.\n\n### Add Tailwind CSS\n\nComponents are styled using Tailwind CSS. You need to install Tailwind CSS in your project.\n\n[Follow the Tailwind CSS installation instructions to get started.](https://tailwindcss.com/docs/installation)\n\n### Add dependencies\n\n```sh\npnpm install tw-animate-css @vela-ui/react\n```\n\n## Configure styles\n\nAdd the following to your styles/globals.css file. You can learn more about using CSS variables for theming in the theming section. [Shadcn Theming](https://ui.shadcn.com/docs/theming)\n\n```css\n@import \"tailwindcss\";\n@import \"tw-animate-css\";\n@custom-variant dark (\u0026:is(.dark *));\n@source \"../node_modules/@vela-ui/react\";\n\n:root {\n  --radius: 0.625rem;\n  --background: oklch(1 0 0);\n  --foreground: oklch(0.145 0 0);\n  --card: oklch(1 0 0);\n  --card-foreground: oklch(0.145 0 0);\n  --popover: oklch(1 0 0);\n  --popover-foreground: oklch(0.145 0 0);\n  --primary: oklch(0.205 0 0);\n  --primary-foreground: oklch(0.985 0 0);\n  --secondary: oklch(0.97 0 0);\n  --secondary-foreground: oklch(0.205 0 0);\n  --muted: oklch(0.97 0 0);\n  --muted-foreground: oklch(0.556 0 0);\n  --accent: oklch(0.97 0 0);\n  --accent-foreground: oklch(0.205 0 0);\n  --destructive: oklch(0.577 0.245 27.325);\n  --border: oklch(0.922 0 0);\n  --input: oklch(0.922 0 0);\n  --ring: oklch(0.708 0 0);\n  --chart-1: oklch(0.646 0.222 41.116);\n  --chart-2: oklch(0.6 0.118 184.704);\n  --chart-3: oklch(0.398 0.07 227.392);\n  --chart-4: oklch(0.828 0.189 84.429);\n  --chart-5: oklch(0.769 0.188 70.08);\n  --sidebar: oklch(0.985 0 0);\n  --sidebar-foreground: oklch(0.145 0 0);\n  --sidebar-primary: oklch(0.205 0 0);\n  --sidebar-primary-foreground: oklch(0.985 0 0);\n  --sidebar-accent: oklch(0.97 0 0);\n  --sidebar-accent-foreground: oklch(0.205 0 0);\n  --sidebar-border: oklch(0.922 0 0);\n  --sidebar-ring: oklch(0.708 0 0);\n}\n\n.dark {\n  --background: oklch(0.145 0 0);\n  --foreground: oklch(0.985 0 0);\n  --card: oklch(0.205 0 0);\n  --card-foreground: oklch(0.985 0 0);\n  --popover: oklch(0.269 0 0);\n  --popover-foreground: oklch(0.985 0 0);\n  --primary: oklch(0.922 0 0);\n  --primary-foreground: oklch(0.205 0 0);\n  --secondary: oklch(0.269 0 0);\n  --secondary-foreground: oklch(0.985 0 0);\n  --muted: oklch(0.269 0 0);\n  --muted-foreground: oklch(0.708 0 0);\n  --accent: oklch(0.371 0 0);\n  --accent-foreground: oklch(0.985 0 0);\n  --destructive: oklch(0.704 0.191 22.216);\n  --border: oklch(1 0 0 / 10%);\n  --input: oklch(1 0 0 / 15%);\n  --ring: oklch(0.556 0 0);\n  --chart-1: oklch(0.488 0.243 264.376);\n  --chart-2: oklch(0.696 0.17 162.48);\n  --chart-3: oklch(0.769 0.188 70.08);\n  --chart-4: oklch(0.627 0.265 303.9);\n  --chart-5: oklch(0.645 0.246 16.439);\n  --sidebar: oklch(0.205 0 0);\n  --sidebar-foreground: oklch(0.985 0 0);\n  --sidebar-primary: oklch(0.488 0.243 264.376);\n  --sidebar-primary-foreground: oklch(0.985 0 0);\n  --sidebar-accent: oklch(0.269 0 0);\n  --sidebar-accent-foreground: oklch(0.985 0 0);\n  --sidebar-border: oklch(1 0 0 / 10%);\n  --sidebar-ring: oklch(0.439 0 0);\n}\n\n@theme inline {\n  --color-background: var(--background);\n  --color-foreground: var(--foreground);\n  --color-card: var(--card);\n  --color-card-foreground: var(--card-foreground);\n  --color-popover: var(--popover);\n  --color-popover-foreground: var(--popover-foreground);\n  --color-primary: var(--primary);\n  --color-primary-foreground: var(--primary-foreground);\n  --color-secondary: var(--secondary);\n  --color-secondary-foreground: var(--secondary-foreground);\n  --color-muted: var(--muted);\n  --color-muted-foreground: var(--muted-foreground);\n  --color-accent: var(--accent);\n  --color-accent-foreground: var(--accent-foreground);\n  --color-destructive: var(--destructive);\n  --color-border: var(--border);\n  --color-input: var(--input);\n  --color-ring: var(--ring);\n  --color-chart-1: var(--chart-1);\n  --color-chart-2: var(--chart-2);\n  --color-chart-3: var(--chart-3);\n  --color-chart-4: var(--chart-4);\n  --color-chart-5: var(--chart-5);\n  --radius-sm: calc(var(--radius) - 4px);\n  --radius-md: calc(var(--radius) - 2px);\n  --radius-lg: var(--radius);\n  --radius-xl: calc(var(--radius) + 4px);\n  --color-sidebar: var(--sidebar);\n  --color-sidebar-foreground: var(--sidebar-foreground);\n  --color-sidebar-primary: var(--sidebar-primary);\n  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);\n  --color-sidebar-accent: var(--sidebar-accent);\n  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);\n  --color-sidebar-border: var(--sidebar-border);\n  --color-sidebar-ring: var(--sidebar-ring);\n}\n\n@layer base {\n  * {\n    @apply border-border outline-ring/50;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}\n```\n\n## Useful Links\n\n- [Shadcn](https://ui.shadcn.com/)\n- [React Aria Components](https://react-spectrum.adobe.com/react-aria/index.html)\n- [Tailwind CSS](https://tailwindcss.com/)\n- [tw-animate-css](https://github.com/Wombosvideo/tw-animate-css)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvela-ui%2Fvela-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvela-ui%2Fvela-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvela-ui%2Fvela-ui/lists"}