https://github.com/Liinkiing/klee

A personnal UI library made as an excuse to have a published UI package
https://github.com/Liinkiing/klee

chromatic emotion framer-motion genshin-impact library package react storybook styled-system ui ui-kit

Last synced: 3 months ago
JSON representation

A personnal UI library made as an excuse to have a published UI package

• Host: GitHub
• URL: https://github.com/Liinkiing/klee
• Owner: Liinkiing
• License: mit
• Created: 2021-01-29T01:21:27.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2024-04-22T10:24:34.000Z (7 months ago)
• Last Synced: 2024-04-22T11:36:43.724Z (7 months ago)
• Topics: chromatic, emotion, framer-motion, genshin-impact, library, package, react, storybook, styled-system, ui, ui-kit
• Language: TypeScript
• Homepage: https://master--601420e5b1a157002157352a.chromatic.com
• Size: 1.44 MB
• Stars: 21
• Watchers: 3
• Forks: 1
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Klee UI™



    



A library UI made as an excuse to test the workflow of building a packaged UI kit with **styled-system**, **emotion**

, **framer-motion**

and **TypeScript**. Also made to try out Storybook v6 with **Chromatic**. Not made to be as huge (and great) as

Chakra-UI (which is a great inspiration), but may be used to do some livestream... And to put **KLEE** EVERYWHERE

[View the storybook](https://master--601420e5b1a157002157352a.chromatic.com/)

- [View the chromatic page](https://www.chromatic.com/library?appId=601420e5b1a157002157352a)

## Install

**WARNING** Early early version available, not made to be usable for now (and will maybe never be), but yeah

```bash

# using yarn

$ yarn add @liinkiing/klee @emotion/react@^11 @emotion/styled@^11 framer-motion@^5 react-icons@^4 @styled-system/css@^5 react-hook-form@^7 @hookform/resolvers@^2 zod@^3

# using npm

$ npm i @liinkiing/klee @emotion/react@^11 @emotion/styled@^11 framer-motion@^5 react-icons@^4 @styled-system/css@^5 react-hook-form@^7 @hookform/resolvers@^2 zod@^3

```

## Usage

The package uses **styled-system** underneath, so all the UI component extends the base `Box` component and so you can

use all of the styled system props and responsive styles!

You can see all the theme values (typography, colors, spacing etc) in the [theme file](src/styles/theme/index.ts). The

color palette used is from **Tailwind 2.0**, which is a great color palette!

```tsx

import { extendTheme, klee, KleeProvider, Flex, Button, Text, Icon, Box } from '@liinkiing/klee'

import { FiAirplay } from 'react-icons/fi'

const appTheme = extendTheme({ colors: { brand: { 100: '#6e9c49', 200: '#567a3a' } } })

const App = () => {

  return (

    

      

        Hello world

        Hello world

        

        

          Ehe te nandayo

        

        {/* You can also use the klee factory, it accept all the Box props  */}

        

          

            Hello

          

          

            

              

              

              

            

          

        

      

    

  )

}

```

You also get for free a **great DX** thanks to TypeScript and the typings work that has been made in this repository.

All the related color props, border radiuses, z indices etc... have full support for autocomplete and suggest by default

the ones available on the theme. You can also use the exported enums if you

prefer (`KleeRadius | KleeFontFamily | KleeZIndex` etc...)







## Dark mode

Klee has a support for dark mode. Currently, it is a bit limited, as it does not support fancy saves user preferences in

local storage / cookies nor @media (prefers-color-scheme dark), but has some great way to customize some internal

elements, see more informations here: https://github.com/Liinkiing/klee/pull/22