Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/47ng/chakra-next

Opinionated design system for React, based on Chakra UI + Next.js, written in TypeScript.
https://github.com/47ng/chakra-next

chakra-ui design-system nextjs react typescript

Last synced: 3 days ago
JSON representation

Opinionated design system for React, based on Chakra UI + Next.js, written in TypeScript.

Lists

README 

        
@47ng/chakra-next






[![NPM](https://img.shields.io/npm/v/@47ng/chakra-next?color=red)](https://www.npmjs.com/package/@47ng/chakra-next)

[![MIT License](https://img.shields.io/github/license/47ng/chakra-next.svg?color=blue)](https://github.com/47ng/chakra-next/blob/next/LICENSE)

[![Continuous Integration](https://github.com/47ng/chakra-next/workflows/Continuous%20Integration/badge.svg?branch=next)](https://github.com/47ng/chakra-next/actions)

[![Coverage Status](https://coveralls.io/repos/github/47ng/chakra-next/badge.svg?branch=next)](https://coveralls.io/github/47ng/chakra-next?branch=next)








  Opinionated design system for React, based on Chakra UI + Next.js.




## Features



- Default theme with semantic tokens

- 100% TypeScript, transpiled to ESM (requires Next.js 12+)

- Components:

  - 🔗 [Links](#links)

  - ◻️ [Cards](#cards)

  - 🎨 [Svg](#svg)

  - ➡️ [Redirect](#redirect)

  - 🚧 [NoSSR](#nossr)

  - 🧪 _More to come_



## Installation



In your Next.js app:



```shell

$ npm install @47ng/chakra-next

```



## Theme tools



To resolve theme tokens across color modes, use `useColorModeToken`:



```ts

import { useColorModeToken } from '@47ng/chakra-next'



const fill = useColorModeToken('red.500', 'blue.500')

const shadow = useColorModeToken('md', 'dark-lg', 'shadows')

```



The following semantic tokens are provided:



- colors:

  - `body` (follows the html/body/\_\_next background color)

  - `text.dim`

  - `text.dimmer`

  - `text.dimmest`

  - `card.bg`

- shadows:

  - `card.shadow` _(make card shadow darker in dark mode to stand out)_



## Components



### Links



```tsx

import { RouteLink, OutgoingLink, ButtonRouteLink } from '@47ng/chakra-next'



export default () => (

  <>

    {/* Integrate Next.js routes with Chakra styles */}

    Login



    {/* Use `as` for dynamic routes */}

    Login



    {/* Make external links stand out */}

    

      GitHub

    



    {/* For when a button looks better, still outputs an  tag */}

    Logout

  >

)

```



#### NavLinks



Use `NavLink` when you want a link to have special styling depending on

the current page.



By default, NavLinks:



- Underline their text when active

- Are active when the current path starts with the link path



Example:



```tsx

import { NavLink } from '@47ng/chakra-next'



export default () => (

  <>

    Blog

  >

)

```



The link will be active for the following paths:



| Path        | Active  |

| ----------- | ------- |

| `/home`     | `false` |

| `/blog`     | `true`  |

| `/blog/`    | `true`  |

| `/blog/foo` | `true`  |



##### Custom active styles



```tsx

import { NavLink } from '@47ng/chakra-next'



export default () => (

  <>

    

      Blog

    

  >

)

```



##### Exact paths



Sometimes, you want the NavLink to be active only on exact route

matches:



```tsx

import { NavLink, navLinkMatch } from '@47ng/chakra-next'



export default () => (

  <>

    

      Home

    

  >

)

```



You can also have custom logic to determine whether a NavLink should

be active:



```tsx

import { NavLink, navLinkMatch } from '@47ng/chakra-next'



export default () => (

  <>

    

        navLinkMatch.exact({ to, as, router }) &&

        router?.query.active === 'true'

      }

    >

      Another Blog Post

    

  >

)

```



### Redirect



`Redirect` will change the current URL to the one given, when mounted.



```tsx

import { Redirect } from '@47ng/chakra-next'



export default ({ loggedIn }) => (

  <>{loggedIn ? Hello ! : }>

)

```



By default, the redirection will be pushed onto the navigation history stack.

You can replace the history stack instead with the `replace` prop:



```tsx

import { Redirect } from '@47ng/chakra-next'



export default () => (

  <>

    

  >

)

```



Next.js dynamic paths are also supported:



```tsx

import { Redirect } from '@47ng/chakra-next'



export default () => (

  <>

    

  >

)

```



If you want to [redirect to an external link](https://github.com/vercel/next.js/blob/main/errors/invalid-href-passed.md)

(not an internal route), you will have to set the `external` prop:



```tsx

import { Redirect } from '@47ng/chakra-next'



export default () => (

  <>

    



    {/* You can also have the history replaced with external URLs: */}

    

  >

)

```



You can also pass transition options:



```tsx



```



### Cards



```tsx

import { Card, cardProps } from '@47ng/chakra-next'



export default () => (

  <>

    {/* Card as Box */}

    I'm in a card



    {/* Apply Card styles to a custom component */}

    

  >

)

```



### Svg



Extends `chakra.svg` with with:



- SVG namespace pre-filled

- `role="img"`



```tsx

import { Svg } from '@47ng/chakra-next'



export default () => (

  

    A red circle

    

      Svg lets you style SVG container tags with Chakra UI style props.

    

    

  

)

```



Note: to use theme tokens for fills, strokes and other SVG properties, you must

resolve them first:



```tsx

import { useToken } from '@chakra-ui/react'



export default () => (

  

    A red circle

    

      Svg lets you style SVG container tags with Chakra UI style props.

    

    

  

)

```



### NoSSR



Sometimes you want to render a component only on the client, and have a skeleton

or fallback component rendered on the server, whether for SSR or static output.



```tsx

import { NoSSR } from '@47ng/chakra-next'



export default () => (

  <>

    This is only rendered on the client



    {/* Skeleton is rendered on SSR/SSG, TheRealThing is rendered on the client.*/}

    }>

      

    

  >

)

```



## Examples



Header with navigation links:



```tsx

import { Box, Stack } from '@chakra-ui/core'

import { NavLink } from '@47ng/chakra-next'



export default () => (

  

    

      Features

      Pricing

      Documentation

    

  

)

```



## License



[MIT](https://github.com/47ng/chakra-next/blob/next/LICENSE) - Made with ❤️ by [François Best](https://francoisbest.com).