CS system design

System design library created with React and Storybook.

It is a design system created by Cristian Nieto. It is used to learn the design system flow using storybook and for using the created components in my additional projects Branch and portfolio

Install

npm install @cristian.nieto.dev/cs-forms

Usage

Fonts

This library trusts in Exo2 google font which is not imported directly in our library to keep the performance.

You can import it in your project using css

<style>
@import url('https://fonts.googleapis.com/css2?family=Exo+2&display=swap');
</style> 

or in the html header

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Exo+2&display=swap" rel="stylesheet"> 

Components

Import the component that you want to use.

import React from 'react'
import { Button } from "@cristian.nieto.dev/cs-forms";

export const Page = () => {
    return (
        <div >
            <Button variant="primary" size="lg">Text</Button>
        </div>
    )
}

Next (SSR)

In Next styles are not load server side which makes our components look unstylized in the First Contentful Paint (FCP). Use NextSSRInjectStyle cs-forms component to solve that.

export default function RootLayout({ children, }) { return ( {children} ); }