{"id":13532682,"url":"https://atk.github.io/solid-blocks/","last_synced_at":"2025-10-13T12:27:00.420Z","repository":{"id":46057400,"uuid":"383734986","full_name":"atk/solid-blocks","owner":"atk","description":"UI building blocks for SolidJS.","archived":false,"fork":false,"pushed_at":"2023-01-08T22:04:24.000Z","size":1250,"stargazers_count":85,"open_issues_count":7,"forks_count":2,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-09-29T16:06:36.774Z","etag":null,"topics":["components","solidjs"],"latest_commit_sha":null,"homepage":"https://atk.github.io/solid-blocks/","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/atk.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}},"created_at":"2021-07-07T08:55:57.000Z","updated_at":"2025-09-11T05:04:36.000Z","dependencies_parsed_at":"2023-02-08T07:45:14.484Z","dependency_job_id":null,"html_url":"https://github.com/atk/solid-blocks","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/atk/solid-blocks","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atk%2Fsolid-blocks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atk%2Fsolid-blocks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atk%2Fsolid-blocks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atk%2Fsolid-blocks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/atk","download_url":"https://codeload.github.com/atk/solid-blocks/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atk%2Fsolid-blocks/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279015060,"owners_count":26085643,"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","status":"online","status_checked_at":"2025-10-13T02:00:06.723Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["components","solidjs"],"created_at":"2024-08-01T07:01:12.852Z","updated_at":"2025-10-13T12:27:00.364Z","avatar_url":"https://github.com/atk.png","language":"TypeScript","funding_links":[],"categories":["📦 Components \u0026 Libraries"],"sub_categories":["Frameworks \u0026 Component Libraries"],"readme":"# Solid-Blocks\n\n\u003csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"4em\" height=\"4em\" viewBox=\"0 0 110 100\"\u003e\n\u003cdefs\u003e\n  \u003clinearGradient id=\"a\" gradient-transform=\"rotate(-20)\"\u003e\n    \u003cstop stop-color=\"#3771c8\" offset=\"0%\" /\u003e\n    \u003cstop stop-color=\"#87aade\" offset=\"100%\" /\u003e\n  \u003c/linearGradient\u003e\n  \u003clinearGradient id=\"b\" gradient-transform=\"rotate(-20)\"\u003e\n    \u003cstop stop-color=\"#214478\" offset=\"0%\" /\u003e\n    \u003cstop stop-color=\"#3771c8\" offset=\"100%\" /\u003e\n  \u003c/linearGradient\u003e\n\u003c/defs\u003e\n\u003cpath fill=\"url(#a)\" d=\"M 0,4 H 80 L 110,54 H 30 Z\" /\u003e\n\u003cpath fill=\"url(#b)\" d=\"M 0,46 H 80 L 110,96 H 30 Z\" /\u003e\n\u003c/svg\u003e\n\nUI building blocks for [SolidJS](https://solidjs.com)\n\n## Core concepts\n\n### Valuable components instead of components without added value\n\nWrapping elements like headers, text, or images in custom Components is just wasteful. Components will only be provided if they have added value over their native elements. The added value may be\n\n- user experience\n- accessibility\n- developer experience\n- performance\n\nIf none of these advantages can be provided, it is preferable to use native HTML elements or SolidJS' abilities like Portal effectively.\n\n### Components with style instead of styled components\n\nDirectly using CSS is frowned upon nowadays, but not rightfully so. Well crafted CSS will easily outperform styled components. It should do so with\n\n- minimal bleeding (class prefix `sb-[component]`, CSS reset, basic styles, theme variables)\n- semantic class names, i.e. `.primary.sb-button`\n- careful consideration of a11y\n- works as much as possible in non-JS environments (SSR)\n- theme-able, dark mode, inline mode switch possible\n- TODO: responsive layout\n\n### Usage\n\n```shell\nyarn\nyarn dev\n```\n\nTo use the components\n\n```tsx\nimport { Accordion, AccordionHeader } from \"solid-blocks\";\n\nconst MyApp = () =\u003e {\n  return (\n    \u003cAccordion\u003e\n      \u003cAccordionHeader\u003eAccordion\u003c/AccordionHeader\u003e\n      \u003cp\u003eHidden\u003c/p\u003e\n    \u003c/Accordion\u003e\n  );\n};\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/atk.github.io%2Fsolid-blocks%2F","html_url":"https://awesome.ecosyste.ms/projects/atk.github.io%2Fsolid-blocks%2F","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/atk.github.io%2Fsolid-blocks%2F/lists"}