{"id":13630443,"url":"https://github.com/shelldandy/styled-transitions-example","last_synced_at":"2025-06-13T19:04:35.365Z","repository":{"id":113162041,"uuid":"174288524","full_name":"shelldandy/styled-transitions-example","owner":"shelldandy","description":"Making react-transition-group play nice with styled-components","archived":false,"fork":false,"pushed_at":"2019-03-07T07:14:55.000Z","size":82,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-05-14T02:42:30.963Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://styled-transitions.now.sh/","language":"JavaScript","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/shelldandy.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}},"created_at":"2019-03-07T06:51:22.000Z","updated_at":"2019-03-07T18:36:07.000Z","dependencies_parsed_at":null,"dependency_job_id":"41cd129a-951c-4870-9d24-ad135a3053a7","html_url":"https://github.com/shelldandy/styled-transitions-example","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/shelldandy/styled-transitions-example","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shelldandy%2Fstyled-transitions-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shelldandy%2Fstyled-transitions-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shelldandy%2Fstyled-transitions-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shelldandy%2Fstyled-transitions-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shelldandy","download_url":"https://codeload.github.com/shelldandy/styled-transitions-example/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shelldandy%2Fstyled-transitions-example/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259704298,"owners_count":22898855,"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":"2024-08-01T22:01:43.030Z","updated_at":"2025-06-13T19:04:35.317Z","avatar_url":"https://github.com/shelldandy.png","language":"JavaScript","readme":"[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-styled-components)\n\n# Example app with styled-components\n\n## How to use\n\n### Using `create-next-app`\n\nExecute [`create-next-app`](https://github.com/segmentio/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example:\n\n```bash\nnpx create-next-app --example with-styled-components with-styled-components-app\n# or\nyarn create next-app --example with-styled-components with-styled-components-app\n```\n\n### Download manually\n\nDownload the example:\n\n```bash\ncurl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-styled-components\ncd with-styled-components\n```\n\nInstall it and run:\n\n```bash\nnpm install\nnpm run dev\n# or\nyarn\nyarn dev\n```\n\nDeploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))\n\n```bash\nnow\n```\n\n### Try it on CodeSandbox\n\n[Open this example on CodeSandbox](https://codesandbox.io/s/github/zeit/next.js/tree/canary/examples/with-styled-components)\n\n## The idea behind the example\n\nThis example features how you use a different styling solution than [styled-jsx](https://github.com/zeit/styled-jsx) that also supports universal styles. That means we can serve the required styles for the first render within the HTML and then load the rest in the client. In this case we are using [styled-components](https://github.com/styled-components/styled-components).\n\nFor this purpose we are extending the `\u003cDocument /\u003e` and injecting the server side rendered styles into the `\u003chead\u003e`, and also adding the `babel-plugin-styled-components`. (which is required for server side rendering)\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshelldandy%2Fstyled-transitions-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshelldandy%2Fstyled-transitions-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshelldandy%2Fstyled-transitions-example/lists"}