{"id":13810295,"url":"https://github.com/bluzky/salad_ui","last_synced_at":"2025-05-14T04:09:48.153Z","repository":{"id":241682368,"uuid":"805652419","full_name":"bluzky/salad_ui","owner":"bluzky","description":"Phoenix Liveview component library inspired by shadcn UI","archived":false,"fork":false,"pushed_at":"2025-05-07T04:13:50.000Z","size":1369,"stargazers_count":850,"open_issues_count":19,"forks_count":58,"subscribers_count":11,"default_branch":"main","last_synced_at":"2025-05-07T05:22:51.699Z","etag":null,"topics":["elixir","liveview","phoenix","phoenix-liveview","tailwindcss"],"latest_commit_sha":null,"homepage":"https://salad-storybook.fly.dev/welcome","language":"Elixir","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/bluzky.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":"bluzky","tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"lfx_crowdfunding":null,"polar":null,"buy_me_a_coffee":null,"thanks_dev":null,"custom":null}},"created_at":"2024-05-25T04:51:21.000Z","updated_at":"2025-05-07T04:13:54.000Z","dependencies_parsed_at":"2024-06-24T19:48:34.392Z","dependency_job_id":"8efa493f-2ad6-4e1e-97b1-14f94728f21c","html_url":"https://github.com/bluzky/salad_ui","commit_stats":{"total_commits":206,"total_committers":12,"mean_commits":"17.166666666666668","dds":0.3495145631067961,"last_synced_commit":"2364f9fe1cd76db1ca4876a63cd2720a4868ca9a"},"previous_names":["bluzky/salad_ui"],"tags_count":25,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bluzky%2Fsalad_ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bluzky%2Fsalad_ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bluzky%2Fsalad_ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bluzky%2Fsalad_ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bluzky","download_url":"https://codeload.github.com/bluzky/salad_ui/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254070108,"owners_count":22009559,"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":["elixir","liveview","phoenix","phoenix-liveview","tailwindcss"],"created_at":"2024-08-04T02:00:50.022Z","updated_at":"2025-05-14T04:09:43.141Z","avatar_url":"https://github.com/bluzky.png","language":"Elixir","funding_links":["https://ko-fi.com/bluzky","https://ko-fi.com/F1F1CEZ91'"],"categories":["Ports","Elixir"],"sub_categories":["Portfolios"],"readme":"\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://salad-storybook.fly.dev/\" alt=\"SaladUI Logo\"\u003e\n    \u003cimg src=\"https://github.com/bluzky/salad_ui/blob/main/docs/images/SaladUI_logo.png?raw=true\" height=\"120\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\u003ch4 align=\"center\"\u003e\n    A collection of Live View components inspired by shadcn\n\u003c/h4\u003e\n\n\u003cdiv align=\"center\"\u003e\n    \u003ca href=\"https://salad-storybook.fly.dev/\"\u003eDemo\u003c/a\u003e |\n    \u003ca href=\"https://hexdocs.pm/salad_ui/readme.html\"\u003eDocumentation\u003c/a\u003e |\n    \u003ca href=\"https://ko-fi.com/bluzky\"\u003eSupport project\u003c/a\u003e\n\u003c/div\u003e\n\u003cbr\u003e\u003c/br\u003e\n\n\u003cdiv align=\"center\"\u003e\n\u003cimg src=\"https://github.com/bluzky/salad_ui/actions/workflows/tests.yml/badge.svg\" alt=\"Tests\"\u003e\n\u003ca href=\"https://hex.pm/packages/salad_ui\"\u003e\u003cimg src=\"https://img.shields.io/hexpm/v/salad_ui.svg\" alt=\"Module Version\"\u003e\u003c/a\u003e\n\u003ca href=\"https://hexdocs.pm/salad_ui/\"\u003e\u003cimg src=\"https://img.shields.io/badge/hex-docs-lightgreen.svg\" alt=\"Hex Docs\"\u003e\u003c/a\u003e\n\u003ca href=\"https://hex.pm/packages/salad_ui\"\u003e\u003cimg src=\"https://img.shields.io/hexpm/dt/salad_ui.svg\" alt=\"Total Download\"\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/bluzky/salad_ui/commits/main\"\u003e\u003cimg src=\"https://img.shields.io/github/last-commit/bluzky/salad_ui.svg\" alt=\"Last Updated\"\u003e\u003c/a\u003e\n\u003c/div\u003e\n\n## 🚧 V1 is under development, for V0 source code, checkout branch v0\n\n## [Demo storybook v0](https://salad-storybook.fly.dev/)\n\n\u003ca href='https://ko-fi.com/F1F1CEZ91' target='_blank'\u003e\u003cimg height='36' style='border:0px;height:36px;' src='https://storage.ko-fi.com/cdn/kofi2.png?v=6' border='0' alt='Buy Me a Coffee at ko-fi.com' /\u003e\u003c/a\u003e\n\n## Installation\n\n1. Add `salad_ui` to your `mix.exs`\n\n```elixir\ndef deps do\n  [\n    {:salad_ui, \"~\u003e 0.14\"},\n  ]\nend\n```\n\n2. Add `TwMerge.Cache` to `application.ex`\n\n```elixir\nchildren = [\n    ...,\n    TwMerge.Cache\n]\n```\n\n3. Setup `salad_ui`\n\n3.1 **Using `salad_ui` as part of your project:**\n\n\u003e This way you can install only components that you want to use or you want to edit SaladUI's component source code to fit your need.\n\u003e If you just want to use SaladUI's components, see **Using as library** below.\n\n- Init Salad UI in your project\n\n```\n#\u003e cd your_project\n#\u003e mix salad.init\n\n# install some components\n#\u003e mix salad.add label button\n```\n\n3.2 **Using `salad_ui` as a library:**\n\n- Init Salad UI in your project with option `--as-lib`\n\n```\n#\u003e cd your_project\n#\u003e mix salad.init --as-lib\n```\n\n- Using in your project\n\n```elixir\ndefmodule MyModule do\n    # import any component you need\n    import SaladUI.Button\n\n    def render(_) do\n      ~H\"\"\"\n      \u003c.button\u003eClick me\u003c/.button\u003e\n      \"\"\"\n    end\nend\n```\n\n## More configuration\n\n1. Custom error translate function\n\n```elixir\nconfig :salad_ui, :error_translator_function, {MyAppWeb.CoreComponents, :translate_error}\n```\n\n## 🛠️ Development\n\nHere is how to start develop SaladUI on local machine.\n\n1. Clone this repo\n2. Clone `https://github.com/bluzky/salad_storybook` in the same directory with **Salad UI**\n3. Start storybook\n\n```\ncd salad_storybook\nmix phx.server\n```\n\n## Unit Testing\n\nIn your project folder make sure the dependencies are installed by running `mix deps.get`, then once completed you can run:\n\n- `mix test` to run tests once or,\n- `mix test.watch` to watch file and run tests on file changes.\n\nTo run the failing tests only, just run `mix test.watch --stale`.\n\nIt's also important to note that you must format your code with `mix format` before sending a pull request, otherwise the build in github will fail.\n\n## List of components\n\n| Component      | v0   | v1   |\n|----------------|------|------|\n| Accordion      | ✅    | ✅    |\n| Alert          | ✅    | ✅     |\n| Alert Dialog   | ✅    |      |\n| Avatar         | ✅    | ✅     |\n| Badge          | ✅    | ✅     |\n| Breadcrumb     | ✅    | ✅     |\n| Button         | ✅    | ✅     |\n| Card           | ✅    | ✅     |\n| Carousel       | ❌    |      |\n| Checkbox       | ✅    | ✅     |\n| Collapsible    | ✅    | ✅    |\n| Combobox       | ❌    |      |\n| Command        | ❌    |      |\n| Context Menu   | ❌    |      |\n| Dialog         | ✅    | ✅     |\n| Drawer         | ❌    |      |\n| Dropdown Menu  | ✅    |      |\n| Form           | ✅    | ✅     |\n| Hover Card     | ✅    | ✅      |\n| Input          | ✅    | ✅     |\n| Input OTP      | ❌    |      |\n| Label          | ✅    | ✅      |\n| Pagination     | ✅    | ✅     |\n| Popover        | ✅    | ✅     |\n| Progress       | ✅    |      |\n| Radio Group    | ✅    | ✅     |\n| Scroll Area    | ✅    | ✅    |\n| Select         | ✅    | ✅     |\n| Separator      | ✅    | ✅     |\n| Sheet          | ✅    |      |\n| Skeleton       | ✅    | ✅     |\n| Slider         | ✅    |      |\n| Switch         | ✅    |      |\n| Table          | ✅    | ✅    |\n| Tabs           | ✅    | ✅     |\n| Textarea       | ✅    | ✅     |\n| Tooltip        | ✅    | ✅    |\n\n## 🌟 Contributors\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://github.com/bluzky/salad_ui/graphs/contributors\"\u003e\n        \u003cimg src=\"https://contrib.rocks/image?repo=bluzky/salad_ui\u0026max=300\u0026columns=14\" width=\"600\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n## 😘 Credits\n\nThis project could not be available without these awesome works:\n\n- `tailwind css` an awesome css utility project\n- `turboprop` I borrow code from here for merging tailwinds classes\n- `shadcn/ui` which this project is inspired from\n- `Phoenix Framework` of course\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbluzky%2Fsalad_ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbluzky%2Fsalad_ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbluzky%2Fsalad_ui/lists"}