{"id":26779574,"url":"https://github.com/chrisgreg/bloom","last_synced_at":"2025-05-15T06:06:18.658Z","repository":{"id":236856718,"uuid":"793290066","full_name":"chrisgreg/bloom","owner":"chrisgreg","description":"The opinionated extension to Phoenix core_components","archived":false,"fork":false,"pushed_at":"2025-01-02T14:42:17.000Z","size":4539,"stargazers_count":391,"open_issues_count":6,"forks_count":18,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-04-12T11:55:28.732Z","etag":null,"topics":["component-generator","component-library","phoenix","phoenix-liveview","tailwindcss"],"latest_commit_sha":null,"homepage":"https://bloom-ui.fly.dev","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/chrisgreg.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG","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-04-28T23:30:16.000Z","updated_at":"2025-04-04T18:15:35.000Z","dependencies_parsed_at":"2024-09-11T15:00:52.539Z","dependency_job_id":"ac1f133b-d21d-4747-ab10-b93773ae92ca","html_url":"https://github.com/chrisgreg/bloom","commit_stats":null,"previous_names":["chrisgreg/bloom"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisgreg%2Fbloom","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisgreg%2Fbloom/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisgreg%2Fbloom/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisgreg%2Fbloom/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chrisgreg","download_url":"https://codeload.github.com/chrisgreg/bloom/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254283339,"owners_count":22045140,"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":["component-generator","component-library","phoenix","phoenix-liveview","tailwindcss"],"created_at":"2025-03-29T06:17:53.072Z","updated_at":"2025-05-15T06:06:13.647Z","avatar_url":"https://github.com/chrisgreg.png","language":"Elixir","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/chrisgreg/bloom/raw/main/priv/images/bloom.png\" width=\"256\" alt=\"Bloom Logo\" /\u003e\n\n  \u003ch1 align=\"center\"\u003eBloom\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://img.shields.io/hexpm/dt/bloom\" alt=\"Hex.pm Downloads\" /\u003e\n  \u003cimg src=\"https://img.shields.io/hexpm/v/bloom\" alt=\"Hex.pm Version\" /\u003e\n  \u003cimg src=\"https://img.shields.io/hexpm/l/bloom\" alt=\"Hex.pm License\" /\u003e\n\u003c/p\u003e\n\nThe opinionated extension to Phoenix core_components, inspired by [shadcn](https://ui.shadcn.com).\n\nA set of HEEX components that can be independently installed and edited to your hearts content.\n\nWorking both with Live and dead controller views, written in HEEX using TailwindCSS and designed to be bolted onto applications using Phoenix Core Components.\n\n\u003c/p\u003e\n\n## Demo\n\nVisit [the demo](https://bloom-ui.fly.dev/) site to see a Phoenix Storybook of Bloom components.\n\n## Installation\n\nCan be installed by adding `bloom` to your list of dependencies in `mix.exs`:\n\n```elixir\ndef deps do\n  [\n    {:bloom, \"~\u003e 0.0.8\"}\n  ]\nend\n```\n\nRelies on Phoenix being installed.\n\n## Installing components\n\n#### All components can be installed by running the following mix command in your project root\n\n```\nmix bloom.install \u003ccomponent_name\u003e\n```\n\nSome components require Tailwind Config changes - refer to the component doc for more information.\n\n#### View all components by running:\n\n```\nmix bloom.install help\n```\n\n#### Install Ecto-backed waitlist \u0026 landing page by running:\n\n```\nmix bloom.landing_page\n```\n\nYou will need to run `mix ecto.gen.migration` to create the migration and copy and migrate the contents from waitlist.ex to complete.\n\nYou will also need to add the generated LiveView to your router.\n\n## Frequently Asked Questions\n\n### Why are the components manually installed?\n\nSo you can customise them to your hearts content and make them your own easily. The source code of the components will live in your project so you can tweak them as you see fit.\n\n### The colours aren't showing up!\n\nTailwind treeshakes colours that aren't in use at compile time - this means dynamic ones set by Phoenix Components won't show if the colours aren't already part of the page. You can circumvent this by safelisting colours in your `tailwind.config.js` or ensuring the colours are already in use (not recommended).\n\nSee the [Tailwind website](https://tailwindcss.com/docs/content-configuration) for more information.\n\nYou can safelist by Regex or manually.\n\nRecommended safelist:\n\n```\n  safelist: [\n    {\n      pattern: /bg-+/,\n      variants: [\"focus\", \"hover\", \"group-hover\", \"active\"],\n    },\n    {\n      pattern: /text-+/,\n      variants: [\"focus\", \"hover\", \"group-hover\", \"active\"],\n    },\n    {\n      pattern: /from-+/,\n      variants: [\"focus\", \"hover\", \"group-hover\", \"active\"],\n    },\n    {\n      pattern: /to-+/,\n      variants: [\"focus\", \"hover\", \"group-hover\", \"active\"],\n    },\n    {\n      pattern: /inset-+/,\n      variants: [\"focus\", \"hover\", \"group-hover\", \"active\"],\n    },\n    {\n      pattern: /opacity-+/,\n      variants: [\"focus\", \"hover\", \"group-hover\", \"active\"],\n    },\n    {\n      pattern: /transition-+/,\n      variants: [\"focus\", \"hover\", \"group-hover\", \"active\"],\n    },\n  ],\n```\n\n### There aren't many components\n\nI'm gonna be adding components slowly but this repo welcomes contributions for beautiful, useful components not already covered by the excellent core_components that ship with Phoenix.\n\n### How do I preview these components?\n\nI'm going to be adding a Storybook and website soon.\n\n## What needs work?\n\nEverything!\n\nThis isn't a complete package yet - hence the version.\n\n- Plenty of work to be done around the developer experience extracting the docs and making the installation of components even easier.\n- Ways of collocating JS in an easy way until LiveView 1.0.\n- Making the components better, mobile friendly, dark/light themes, standardising props\n- Adding loads more components\n- Reporting which Tailwind classes to safelist after publishing\n- Turning this and the demo site into an umbrella application with git subdirectories\n\n## Contribution\n\n- Create your component in lib/bloom/components\n- Adhere to Phoenix component standards\n- Ensure any Tailwind config changes are documented in the @moduledoc\n- Run `mix bloom.generate_templates` when ready to submit\n- Increase semantic versioning for new publish\n- Raise pull request\n- Add Storybook story to [the bloom-ui site](https://github.com/chrisgreg/bloom/bloom_site) to demo component\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchrisgreg%2Fbloom","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchrisgreg%2Fbloom","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchrisgreg%2Fbloom/lists"}