{"id":13422303,"url":"https://github.com/47ng/chakra-next","last_synced_at":"2025-04-07T11:01:21.622Z","repository":{"id":37433432,"uuid":"252388370","full_name":"47ng/chakra-next","owner":"47ng","description":"Opinionated design system for React, based on Chakra UI + Next.js, written in TypeScript.","archived":false,"fork":false,"pushed_at":"2023-03-14T15:37:59.000Z","size":1713,"stargazers_count":219,"open_issues_count":17,"forks_count":9,"subscribers_count":4,"default_branch":"next","last_synced_at":"2025-03-31T10:01:32.929Z","etag":null,"topics":["chakra-ui","design-system","nextjs","react","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/47ng.png","metadata":{"files":{"readme":"README.md","changelog":null,"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}},"created_at":"2020-04-02T07:43:16.000Z","updated_at":"2025-03-30T00:46:40.000Z","dependencies_parsed_at":"2024-01-16T00:18:53.973Z","dependency_job_id":"fd2e791f-f124-4c62-8e91-67084d7aba86","html_url":"https://github.com/47ng/chakra-next","commit_stats":{"total_commits":280,"total_committers":4,"mean_commits":70.0,"dds":"0.18214285714285716","last_synced_commit":"f5c028d263db100363c1328bc242bff547b1f954"},"previous_names":[],"tags_count":26,"template":false,"template_full_name":"chiffre-io/template-library","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/47ng%2Fchakra-next","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/47ng%2Fchakra-next/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/47ng%2Fchakra-next/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/47ng%2Fchakra-next/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/47ng","download_url":"https://codeload.github.com/47ng/chakra-next/tar.gz/refs/heads/next","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247640459,"owners_count":20971556,"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":["chakra-ui","design-system","nextjs","react","typescript"],"created_at":"2024-07-30T23:00:41.338Z","updated_at":"2025-04-07T11:01:21.564Z","avatar_url":"https://github.com/47ng.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","🛠️ Tools","📦 Legacy \u0026 Inactive Projects"],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\u003ccode\u003e@47ng/chakra-next\u003c/code\u003e\u003c/h1\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n[![NPM](https://img.shields.io/npm/v/@47ng/chakra-next?color=red)](https://www.npmjs.com/package/@47ng/chakra-next)\n[![MIT License](https://img.shields.io/github/license/47ng/chakra-next.svg?color=blue)](https://github.com/47ng/chakra-next/blob/next/LICENSE)\n[![Continuous Integration](https://github.com/47ng/chakra-next/workflows/Continuous%20Integration/badge.svg?branch=next)](https://github.com/47ng/chakra-next/actions)\n[![Coverage Status](https://coveralls.io/repos/github/47ng/chakra-next/badge.svg?branch=next)](https://coveralls.io/github/47ng/chakra-next?branch=next)\n\n\u003c/div\u003e\n\n\u003cp align=\"center\"\u003e\n  Opinionated design system for React, based on \u003ca href=\"https://chakra-ui.com/\"\u003eChakra UI\u003c/a\u003e + \u003ca href=\"https://nextjs.org/\"\u003eNext.js\u003c/a\u003e.\n\u003c/p\u003e\n\n## Features\n\n- Default theme with semantic tokens\n- 100% TypeScript, transpiled to ESM (requires Next.js 12+)\n- Components:\n  - 🔗 [Links](#links)\n  - ◻️ [Cards](#cards)\n  - 🎨 [Svg](#svg)\n  - ➡️ [Redirect](#redirect)\n  - 🚧 [NoSSR](#nossr)\n  - 🧪 _More to come_\n\n## Installation\n\nIn your Next.js app:\n\n```shell\n$ npm install @47ng/chakra-next\n```\n\n## Theme tools\n\nTo resolve theme tokens across color modes, use `useColorModeToken`:\n\n```ts\nimport { useColorModeToken } from '@47ng/chakra-next'\n\nconst fill = useColorModeToken('red.500', 'blue.500')\nconst shadow = useColorModeToken('md', 'dark-lg', 'shadows')\n```\n\nThe following semantic tokens are provided:\n\n- colors:\n  - `body` (follows the html/body/\\_\\_next background color)\n  - `text.dim`\n  - `text.dimmer`\n  - `text.dimmest`\n  - `card.bg`\n- shadows:\n  - `card.shadow` _(make card shadow darker in dark mode to stand out)_\n\n## Components\n\n### Links\n\n```tsx\nimport { RouteLink, OutgoingLink, ButtonRouteLink } from '@47ng/chakra-next'\n\nexport default () =\u003e (\n  \u003c\u003e\n    {/* Integrate Next.js routes with Chakra styles */}\n    \u003cRouteLink to=\"/login\"\u003eLogin\u003c/RouteLink\u003e\n\n    {/* Use `as` for dynamic routes */}\n    \u003cRouteLink to=\"/posts/[slug]\" as=\"/posts/foo\"\u003eLogin\u003c/RouteLink\u003e\n\n    {/* Make external links stand out */}\n    \u003cOutgoingLink href=\"https://github.com\" showExternalIcon\u003e\n      GitHub\n    \u003c/RouteLink\u003e\n\n    {/* For when a button looks better, still outputs an \u003ca\u003e tag */}\n    \u003cButtonRouteLink to=\"/logout\"\u003eLogout\u003c/ButtonRouteLink\u003e\n  \u003c/\u003e\n)\n```\n\n#### NavLinks\n\nUse `NavLink` when you want a link to have special styling depending on\nthe current page.\n\nBy default, NavLinks:\n\n- \u003cspan style=\"text-decoration:underline\"\u003eUnderline\u003c/span\u003e their text when active\n- Are active when the current path starts with the link path\n\nExample:\n\n```tsx\nimport { NavLink } from '@47ng/chakra-next'\n\nexport default () =\u003e (\n  \u003c\u003e\n    \u003cNavLink to=\"/blog\"\u003eBlog\u003c/NavLink\u003e\n  \u003c/\u003e\n)\n```\n\nThe link will be active for the following paths:\n\n| Path        | Active  |\n| ----------- | ------- |\n| `/home`     | `false` |\n| `/blog`     | `true`  |\n| `/blog/`    | `true`  |\n| `/blog/foo` | `true`  |\n\n##### Custom active styles\n\n```tsx\nimport { NavLink } from '@47ng/chakra-next'\n\nexport default () =\u003e (\n  \u003c\u003e\n    \u003cNavLink\n      to=\"/blog\"\n      borderBottomWidth=\"3px\"\n      borderBottomColor=\"transparent\"\n      active={{ color: 'blue.500', borderBottomColor: 'blue.500' }}\n    \u003e\n      Blog\n    \u003c/NavLink\u003e\n  \u003c/\u003e\n)\n```\n\n##### Exact paths\n\nSometimes, you want the NavLink to be active only on exact route\nmatches:\n\n```tsx\nimport { NavLink, navLinkMatch } from '@47ng/chakra-next'\n\nexport default () =\u003e (\n  \u003c\u003e\n    \u003cNavLink to=\"/home\" shouldBeActive={navLinkMatch.exact}\u003e\n      Home\n    \u003c/NavLink\u003e\n  \u003c/\u003e\n)\n```\n\nYou can also have custom logic to determine whether a NavLink should\nbe active:\n\n```tsx\nimport { NavLink, navLinkMatch } from '@47ng/chakra-next'\n\nexport default () =\u003e (\n  \u003c\u003e\n    \u003cNavLink\n      to=\"/blog/[post]\"\n      as=\"/blog/another-blog-post?active=true\"\n      shouldBeActive={({ to, as, router }) =\u003e\n        navLinkMatch.exact({ to, as, router }) \u0026\u0026\n        router?.query.active === 'true'\n      }\n    \u003e\n      Another Blog Post\n    \u003c/NavLink\u003e\n  \u003c/\u003e\n)\n```\n\n### Redirect\n\n`Redirect` will change the current URL to the one given, when mounted.\n\n```tsx\nimport { Redirect } from '@47ng/chakra-next'\n\nexport default ({ loggedIn }) =\u003e (\n  \u003c\u003e{loggedIn ? \u003cText\u003eHello !\u003c/Text\u003e : \u003cRedirect to=\"/login\" /\u003e}\u003c/\u003e\n)\n```\n\nBy default, the redirection will be pushed onto the navigation history stack.\nYou can replace the history stack instead with the `replace` prop:\n\n```tsx\nimport { Redirect } from '@47ng/chakra-next'\n\nexport default () =\u003e (\n  \u003c\u003e\n    \u003cRedirect to=\"/home\" replace /\u003e\n  \u003c/\u003e\n)\n```\n\nNext.js dynamic paths are also supported:\n\n```tsx\nimport { Redirect } from '@47ng/chakra-next'\n\nexport default () =\u003e (\n  \u003c\u003e\n    \u003cRedirect to=\"/blog/[slug]\" as=\"/blog/foo-bar\" /\u003e\n  \u003c/\u003e\n)\n```\n\nIf you want to [redirect to an external link](https://github.com/vercel/next.js/blob/main/errors/invalid-href-passed.md)\n(not an internal route), you will have to set the `external` prop:\n\n```tsx\nimport { Redirect } from '@47ng/chakra-next'\n\nexport default () =\u003e (\n  \u003c\u003e\n    \u003cRedirect to=\"https://example.com\" external /\u003e\n\n    {/* You can also have the history replaced with external URLs: */}\n    \u003cRedirect to=\"https://example.com\" external replace /\u003e\n  \u003c/\u003e\n)\n```\n\nYou can also pass transition options:\n\n```tsx\n\u003cRedirect to=\"/home\" shallow scroll={false} /\u003e\n```\n\n### Cards\n\n```tsx\nimport { Card, cardProps } from '@47ng/chakra-next'\n\nexport default () =\u003e (\n  \u003c\u003e\n    {/* Card as Box */}\n    \u003cCard\u003eI'm in a card\u003c/Card\u003e\n\n    {/* Apply Card styles to a custom component */}\n    \u003cMyChakraComponent {...cardProps} /\u003e\n  \u003c/\u003e\n)\n```\n\n### Svg\n\nExtends `chakra.svg` with with:\n\n- SVG namespace pre-filled\n- `role=\"img\"`\n\n```tsx\nimport { Svg } from '@47ng/chakra-next'\n\nexport default () =\u003e (\n  \u003cSvg\n    aria-labelledby=\"svg-demo-title svg-demo-desc\"\n    viewBox=\"0 0 24 24\"\n    display=\"block\"\n    my={4}\n    mx=\"auto\"\n  \u003e\n    \u003ctitle id=\"svg-demo-title\"\u003eA red circle\u003c/title\u003e\n    \u003cdesc id=\"svg-demo-desc\"\u003e\n      Svg lets you style SVG container tags with Chakra UI style props.\n    \u003c/desc\u003e\n    \u003ccircle fill=\"red\" cx=\"12\" cy=\"12\" r=\"10\"\u003e\n  \u003c/Svg\u003e\n)\n```\n\nNote: to use theme tokens for fills, strokes and other SVG properties, you must\nresolve them first:\n\n```tsx\nimport { useToken } from '@chakra-ui/react'\n\nexport default () =\u003e (\n  \u003cSvg\n    aria-labelledby=\"svg-demo-title svg-demo-desc\"\n    viewBox=\"0 0 24 24\"\n    display=\"block\"\n    my={4}\n    mx=\"auto\"\n    fill={useToken('colors', 'red.500')} // Resolve theme tokens with `useToken`\n  \u003e\n    \u003ctitle id=\"svg-demo-title\"\u003eA red circle\u003c/title\u003e\n    \u003cdesc id=\"svg-demo-desc\"\u003e\n      Svg lets you style SVG container tags with Chakra UI style props.\n    \u003c/desc\u003e\n    \u003ccircle\n      // You can also use the CSS prop names directly:\n      fill=\"var(--chakra-colors-red.500)\"\n      cx=\"12\"\n      cy=\"12\"\n      r=\"10\"\n    \u003e\n  \u003c/Svg\u003e\n)\n```\n\n### NoSSR\n\nSometimes you want to render a component only on the client, and have a skeleton\nor fallback component rendered on the server, whether for SSR or static output.\n\n```tsx\nimport { NoSSR } from '@47ng/chakra-next'\n\nexport default () =\u003e (\n  \u003c\u003e\n    \u003cNoSSR\u003eThis is only rendered on the client\u003c/NoSSR\u003e\n\n    {/* Skeleton is rendered on SSR/SSG, TheRealThing is rendered on the client.*/}\n    \u003cNoSSR fallback={\u003cSkeleton /\u003e}\u003e\n      \u003cTheRealThing /\u003e\n    \u003c/NoSSR\u003e\n  \u003c/\u003e\n)\n```\n\n## Examples\n\nHeader with navigation links:\n\n```tsx\nimport { Box, Stack } from '@chakra-ui/core'\nimport { NavLink } from '@47ng/chakra-next'\n\nexport default () =\u003e (\n  \u003cBox as=\"header\"\u003e\n    \u003cStack as=\"nav\" isInline\u003e\n      \u003cNavLink to=\"/features\"\u003eFeatures\u003c/NavLink\u003e\n      \u003cNavLink to=\"/pricing\"\u003ePricing\u003c/NavLink\u003e\n      \u003cNavLink to=\"/docs\"\u003eDocumentation\u003c/NavLink\u003e\n    \u003c/Stack\u003e\n  \u003c/Box\u003e\n)\n```\n\n## License\n\n[MIT](https://github.com/47ng/chakra-next/blob/next/LICENSE) - Made with ❤️ by [François Best](https://francoisbest.com).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F47ng%2Fchakra-next","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F47ng%2Fchakra-next","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F47ng%2Fchakra-next/lists"}