{"id":49084529,"url":"https://github.com/dirnbauer/shadcn2fluid-templates","last_synced_at":"2026-04-20T14:15:51.743Z","repository":{"id":349163355,"uuid":"1185242539","full_name":"dirnbauer/shadcn2fluid-templates","owner":"dirnbauer","description":"ShadCN/UI design patterns converted to pure Fluid templates for TYPO3 Content Blocks","archived":false,"fork":false,"pushed_at":"2026-04-17T05:49:31.000Z","size":1488,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-04-17T07:33:32.519Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","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/dirnbauer.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-03-18T11:35:40.000Z","updated_at":"2026-04-17T05:49:35.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/dirnbauer/shadcn2fluid-templates","commit_stats":null,"previous_names":["dirnbauer/shadcn2fluid-templates"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/dirnbauer/shadcn2fluid-templates","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dirnbauer%2Fshadcn2fluid-templates","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dirnbauer%2Fshadcn2fluid-templates/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dirnbauer%2Fshadcn2fluid-templates/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dirnbauer%2Fshadcn2fluid-templates/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dirnbauer","download_url":"https://codeload.github.com/dirnbauer/shadcn2fluid-templates/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dirnbauer%2Fshadcn2fluid-templates/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32050577,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-20T11:35:06.609Z","status":"ssl_error","status_checked_at":"2026-04-20T11:34:48.899Z","response_time":94,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":[],"created_at":"2026-04-20T14:15:50.935Z","updated_at":"2026-04-20T14:15:51.729Z","avatar_url":"https://github.com/dirnbauer.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# shadcn2fluid Templates\n\nshadcn/ui-inspired Fluid 5 component library and content elements for TYPO3 14, implemented as native Fluid 5 Components (atomic design) and Content Blocks.\n\n## Status\n\n- Extension key: `shadcn2fluid_templates`\n- Extension version: `3.0.0`\n- TYPO3 target: `^14.2`\n- Content Blocks target: `^2.1`\n- PHP: `^8.2`\n\n## Architecture\n\nThree-layer system following shadcn/ui principles:\n\n1. **Fluid 5 Components** (`\u003cs2f:atom.*\u003e`, `\u003cs2f:molecule.*\u003e`, `\u003cs2f:layout.*\u003e`) — typed primitives with `\u003cf:argument\u003e` and `\u003cf:slot\u003e`\n2. **Content Blocks** — 250 content elements composing Fluid 5 Components\n3. **Theme extension** — page templates and styling are provided by a separate theme, e.g. [Desiderio](https://github.com/dirnbauer/desiderio)\n\n## Included content elements (250)\n\nOrganized in 10 wizard categories (25 each):\n\n| Category | Examples |\n|---|---|\n| Navigation \u0026 Headers | Navbar, Mega Menu, Breadcrumb, Sticky Navbar, ... |\n| Hero \u0026 Landing | Hero, Hero Video, Hero Stats, Hero Fullscreen, ... |\n| Features \u0026 Benefits | Feature Cards, Feature Bento, Feature Tabs, ... |\n| Content \u0026 Editorial | Textmedia, Accordion, Tabs, FAQ, Gallery, ... |\n| Social Proof \u0026 Trust | Testimonial, Stats, Logo Cloud, Awards, ... |\n| Pricing \u0026 Commerce | Pricing, Pricing Toggle, Product Card, ... |\n| Team \u0026 About | Team, About Us, Career Listing, Company Values, ... |\n| Contact \u0026 Conversion | Contact, CTA, Newsletter, Demo Request, ... |\n| Data \u0026 Display | Card, Chart, KPI Cards, Data Table, ... |\n| Footer \u0026 Legal | Footer, Cookie Banner, Imprint, GDPR Banner, ... |\n\n## Page Templates\n\nPage templates and styling are **not included** in this extension. Use a theme extension like [Desiderio](https://github.com/dirnbauer/desiderio) which provides:\n\n- Backend layouts with visual-editor content areas (PAGEVIEW)\n- 5 page templates (Startpage, Contentpage, Sidebar, Styleguide, Default)\n- 5 swappable design styles (SaaS, Corporate, Portfolio, Blog, Dashboard)\n- Dark mode toggle\n- Auto-generated styleguide page\n\n## Fluid 5 Components\n\n37 components using `\u003cf:argument\u003e` typed parameters and `\u003cf:slot\u003e` for child content:\n\n**Atoms (16):** Button, Badge, Input, Textarea, Label, Select, Separator, Avatar, Icon, Image, Link, Typography, Progress, Skeleton, AspectRatio, ScrollArea\n\n**Molecules (17):** Card, CardHeader, CardContent, CardFooter, Alert, AlertTitle, AlertDescription, Accordion, AccordionItem, Tabs, TabsList, TabsTrigger, TabsContent, Table, TableHeader, TableRow, TableCell\n\n**Layout (4):** Section, Container, Grid, Stack\n\n## Installation\n\nRequires TYPO3 14.2+ with PHP 8.2+:\n\n```bash\ncomposer require webconsulting/shadcn2fluid-templates\nvendor/bin/typo3 extension:setup\nvendor/bin/typo3 cache:flush\n```\n\nThen enable the site set:\n\n1. Open `Site Management \u003e Sites`\n2. Edit the target site\n3. Add the `shadcn2fluid Templates` set\n4. Save and flush caches\n\nFor page templates, also install [Desiderio](https://github.com/dirnbauer/desiderio):\n\n```bash\ncomposer require webconsulting/desiderio\n```\n\n## Configuration\n\nThe site set loads:\n\n- `shadcn-theme.css` — OKLch design tokens (generate at [ui.shadcn.com/create](https://ui.shadcn.com/create))\n- `components.css` — BEM component styles for all Fluid 5 Components\n- `s2f.js` — Shared vanilla JS (accordion, tabs, dark mode, counters)\n\nCustom theme override via site set settings:\n\n```yaml\nsettings:\n  'shadcn2fluid.themeCss': 'EXT:site_package/Resources/Public/Css/shadcn-theme.css'\n  'shadcn2fluid.themeSourceUrl': 'https://ui.shadcn.com/create?preset=b2D0wqNxT'\n```\n\n### Creating a custom theme\n\n1. Go to [ui.shadcn.com/create](https://ui.shadcn.com/create)\n2. Customize colors, radius, fonts, shadows\n3. Copy the generated CSS (`:root` and `.dark` blocks)\n4. Save it in your site package, e.g. `EXT:site_package/Resources/Public/Css/shadcn-theme.css`\n5. Set `shadcn2fluid.themeCss` in your site configuration\n\n## Quality gates\n\n```bash\ncomposer validate --strict\nvendor/bin/phpstan analyse --configuration=phpstan.neon.dist\nvendor/bin/phpunit --configuration=phpunit.xml.dist\n```\n\n## Documentation\n\n- [Documentation index](Documentation/Index.md)\n- [Installation](Documentation/Installation/Index.md)\n- [Configuration](Documentation/Configuration/Index.md)\n- [Theming](Documentation/Theming/Index.md)\n- [Troubleshooting](Documentation/KnownProblems/Index.md)\n\n## Notes\n\n- TYPO3 14 requires PHP's `ext-intl`.\n- This extension is not affiliated with shadcn/ui.\n- Theme CSS uses OKLch color space — customize at [ui.shadcn.com/create](https://ui.shadcn.com/create).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdirnbauer%2Fshadcn2fluid-templates","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdirnbauer%2Fshadcn2fluid-templates","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdirnbauer%2Fshadcn2fluid-templates/lists"}