0.3.0 • Published 2 years ago
@cristian.nieto.dev/cs-forms v0.3.0
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-formsUsage
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 (
<html lang="en">
<body>
<NextSSRInjectStyle />
<main>{children}</main>
</body>
</html>); }