{"id":28431077,"url":"https://github.com/safe-stack/safe-shadcn","last_synced_at":"2025-07-07T16:32:05.769Z","repository":{"id":292858178,"uuid":"976748160","full_name":"SAFE-Stack/safe-shadcn","owner":"SAFE-Stack","description":null,"archived":false,"fork":false,"pushed_at":"2025-05-12T14:11:19.000Z","size":382,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-06-05T14:43:29.068Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"F#","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/SAFE-Stack.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}},"created_at":"2025-05-02T17:14:50.000Z","updated_at":"2025-05-23T11:19:18.000Z","dependencies_parsed_at":"2025-05-12T14:57:08.558Z","dependency_job_id":"6a3e7880-23a5-44c0-b0bb-92fdfc9e4e23","html_url":"https://github.com/SAFE-Stack/safe-shadcn","commit_stats":null,"previous_names":["safe-stack/safe-shadcn"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/SAFE-Stack/safe-shadcn","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SAFE-Stack%2Fsafe-shadcn","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SAFE-Stack%2Fsafe-shadcn/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SAFE-Stack%2Fsafe-shadcn/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SAFE-Stack%2Fsafe-shadcn/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SAFE-Stack","download_url":"https://codeload.github.com/SAFE-Stack/safe-shadcn/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SAFE-Stack%2Fsafe-shadcn/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263587992,"owners_count":23484843,"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":[],"created_at":"2025-06-05T14:36:17.880Z","updated_at":"2025-07-04T17:31:13.746Z","avatar_url":"https://github.com/SAFE-Stack.png","language":"F#","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SAFE Template with ShadCN UI Components\n\nThis demo is used to showcase a full-stack web application using the [SAFE Stack](https://safe-stack.github.io/) enhanced with [ShadCN UI](https://ui.shadcn.com/) components through the Feliz.Shadcn library. You can find a live version on [GitHub pages](https://safe-stack.github.io/safe-shadcn/)\n\n## ShadCN UI Integration\n\nThis template integrates ShadCN UI components with F# through the Feliz.Shadcn library, allowing you to:\n\n- Use beautifully designed, accessible UI components\n- Maintain type-safety with F# bindings\n- Customize components through TailwindCSS\n- Seamlessly work with the Elmish architecture\n\nThe components are located in `src/Client/components/ui/` and can be used in your F# code through the Feliz.Shadcn bindings. This integration provides a modern, responsive UI while maintaining the functional programming paradigm of F#.\n\n### Example Usage with Feliz\n\n```fsharp\n// Import the required namespaces\nopen Feliz\nopen Feliz.Shadcn\n\n// Using ShadCN components in F#\nShadcn.button [\n    button.size.lg\n    prop.className \"mb-10\"\n    prop.children [ Html.text \"Generate User Persona\" ]\n    prop.onClick (fun _ -\u003e dispatch GeneratePersona)\n]\n\n// Using ShadCN card with other components\nShadcn.card [\n    prop.className \"w-full max-w-sm shadow-lg\"\n    prop.children [\n        Shadcn.cardHeader [\n            Shadcn.avatar [\n                Shadcn.avatarImage [ prop.src \"image.jpg\" ]\n                Shadcn.avatarFallback [ prop.text \"User\" ]\n            ]\n        ]\n        Shadcn.cardContent [ ... ]\n    ]\n]\n```\n\n\u003e Note: This example focuses exclusively on the client-side implementation. The server and shared components are included as part of the SAFE stack structure but contain no logic.\n\n## Install pre-requisites\n\nYou'll need to install the following pre-requisites in order to build SAFE applications\n\n* [.NET SDK](https://www.microsoft.com/net/download) 8.0 or higher\n* [Node 18](https://nodejs.org/en/download/) or higher\n* [NPM 9](https://www.npmjs.com/package/npm) or higher\n\n## Starting the application\n\nTo concurrently run the server and the client components in watch mode use the following command:\n\n```bash\ndotnet tool restore;\ndotnet run\n```\n\nThen open `http://localhost:8080` in your browser.\n\nThe build project in root directory contains a couple of different build targets. You can specify them after `--` (target name is case-insensitive).\n\n\u003c!-- Tests have been removed from this example to focus on ShadCN and Feliz integration --\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsafe-stack%2Fsafe-shadcn","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsafe-stack%2Fsafe-shadcn","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsafe-stack%2Fsafe-shadcn/lists"}