{"id":25200180,"url":"https://github.com/rotmh/shadcn-templ","last_synced_at":"2025-05-11T21:04:25.616Z","repository":{"id":257813235,"uuid":"868485553","full_name":"rotmh/shadcn-templ","owner":"rotmh","description":"A shadcn/ui port to Go Templ","archived":false,"fork":false,"pushed_at":"2024-11-30T21:06:05.000Z","size":91330,"stargazers_count":71,"open_issues_count":1,"forks_count":4,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-05-11T21:02:14.344Z","etag":null,"topics":["alpine-js","component-library","go","golang","radix-ui","shadcn-ui","tailwindcss"],"latest_commit_sha":null,"homepage":"","language":"templ","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/rotmh.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}},"created_at":"2024-10-06T14:03:22.000Z","updated_at":"2025-05-07T17:48:58.000Z","dependencies_parsed_at":null,"dependency_job_id":"d9af2df8-ec79-45b2-8b79-76ee20d2f2e4","html_url":"https://github.com/rotmh/shadcn-templ","commit_stats":null,"previous_names":["rotemhoresh/shadcn-templ","rotmh/shadcn-templ"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rotmh%2Fshadcn-templ","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rotmh%2Fshadcn-templ/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rotmh%2Fshadcn-templ/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rotmh%2Fshadcn-templ/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rotmh","download_url":"https://codeload.github.com/rotmh/shadcn-templ/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253633012,"owners_count":21939388,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["alpine-js","component-library","go","golang","radix-ui","shadcn-ui","tailwindcss"],"created_at":"2025-02-10T04:11:20.320Z","updated_at":"2025-05-11T21:04:25.548Z","avatar_url":"https://github.com/rotmh.png","language":"templ","funding_links":[],"categories":["Ports \u0026 Implementations"],"sub_categories":[],"readme":"# Shadcn/ui port for Go + Templ + Alpine.js + Tailwind CSS\n\n[![Go Reference](https://pkg.go.dev/badge/github.com/rotemhoresh/shadcn-templ.svg)](https://pkg.go.dev/github.com/rotemhoresh/shadcn-templ)\n[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)\n[![Go Report Card](https://goreportcard.com/badge/github.com/rotemhoresh/shadcn-templ)](https://goreportcard.com/report/github.com/rotemhoresh/shadcn-templ)\n\n### Note\n\n**The codebase is going through a change in structure, so it's currently a bit messy**\n\nThis is a work in proccess. \n\n- Not all the components from shadcn/ui are implemented.\n- There are refinements needed for some of the components - alpine.js naming, unfinished accessibility, improvements I want to make, etc.\n- Some components might contain behavior that existed for previous needs (I detached the developement of this from another project). Hopefully will be fixed in the future.\n\n## Overview\n\nA [shadcn/ui](https://ui.shadcn.com/) port using [Go](https://go.dev/), [Templ](https://templ.guide/), [Alpine.js](https://alpinejs.dev/) and [Tailwind CSS](https://tailwindcss.com/).\n\n### Components\n\n[issue](https://github.com/rotemhoresh/shadcn-templ/issues/1#issue-2570468143).\n\n### Roadmap\n\n- Adding all the components from shadcn/ui\n- Making sure the components are of good quality: Accessibility, Correct functionality, Style, etc.\n- Creating a CLI to have a flow similar to shadcn's.\n\n### Usage \n\nYou have to include the [Head](https://github.com/rotemhoresh/shadcn-templ/blob/main/include.templ#L4) component in your `head` tag (it includes the neccessery scripts - Alpine.js and a theme script).\nYou have to serve the [CSS](https://github.com/rotemhoresh/shadcn-templ/blob/main/css.go#L10) var and link to it in your `head` tag.\n\nExample:\n\n```go\nrouter.HandleFunc(\"GET /static/css/styles.css\", func(w http.ResponseWriter, r *http.Request) {\n  w.Header().Set(\"Content-Type\", \"text/css\")\n  w.Write(shadcntempl.CSS)\n})\n```\n\n```templ\ntempl Layout() {\n  \u003c!DOCTYPE html\u003e\n\t\u003chtml lang=\"en\"\u003e\n\t\t\u003chead\u003e\n\t\t\t// ...\n\t\t\t@shadcntempl.Head()\n\t\t\t\u003clink rel=\"stylesheet\" href=\"/static/css/styles.css\"/\u003e\n\t\t\u003c/head\u003e\n\t\t\u003cbody\u003e\n\t\t\t{ children... }\n\t\t\u003c/body\u003e\n\t\u003c/html\u003e\n\n}\n```\n\n### Example\n\nUse in `.templ` files.\n\n```templ\nimport \"github.com/rotemhoresh/shadcn-templ/ui/button\"\n\ntempl Page() {\n  @button.Root(button.RootProps{}) {\n    Click me\n  }\n}\n```\n\n### Design\n\nThe components props (parameters) is structures like this:\n\n```go\ntype Props struct {\n  \u003cCOMPONENT_SPECIFIC_PROPS\u003e\n  p.CoreProps // Class and Attrs \n}\n```\n\nFor example, the `button.Root`'s props:\n\n```go\ntype RootProps struct {\n\tType    Type    // default: [TypeButton]\n\tVariant Variant // default: [VariantDefault]\n\tSize    Size    // default: [SizeDefault]\n\tp.CoreProps\n}\n```\n\nThe components are written with constant referencing to the shadcn/ui source code and the underlying radix components. \n\n## Contributing\n\nContributions are welcome for both new components and improvements for existing ones.\n\nMake sure to read the README and go over the codebase to understand the design choices and overall coding style as well as getting familiar with shadcn/ui.\n\n### License \n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frotmh%2Fshadcn-templ","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frotmh%2Fshadcn-templ","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frotmh%2Fshadcn-templ/lists"}