/ui

A design system and component library made with React, Typescript, and Tailwind CSS.

Primary LanguageTypeScriptMIT LicenseMIT

@caripizza/ui

A design system and component library made with React, Typescript, and Tailwind CSS.

Storybook-main
📦 npm / yarn

Get started

Install the UI library:

yarn add @caripizza/ui
# and peerDependencies in package.json

Add the stylesheet import to your entry-point file:

import '@caripizza/ui/dist/output.css';

// or via html/CDN:
<link rel="stylesheet" type="text/css" href="https://unpkg.com/@caripizza/ui@latest/dist/output.css"/>

Features

Typography

@caripizza/ui uses the Google Arimo font family, and exposes the following CSS Vars for fonts:

CSS Var Value
--font-sans 'Arimo', ui-sans-serif, system-ui, 'Helvetica Neue', sans-serif
--font-mono 'Menlo', ui-monospace, SFMono-Regular, 'Courier New', monospace
--font-weight-regular 400
--font-weight-medium 500
--font-weight-semibold 600
--font-size-xs 0.75rem (12px)
--font-size-sm 0.875rem (14px)
--font-size-base 1rem (16px)
--font-size-lg 1.125rem (18px)
--font-size-xl 1.25rem (20px)
--font-size-2xl 1.5rem (24px)
--font-size-3xl 1.875rem (30px)
--font-size-4xl 2.25rem (36px)
--font-size-5xl 3rem (48px)
--font-size-6xl 3.75rem (60px)

Colors

The stylesheet also includes CSS Vars for colors:

CSS Var Description
--color-turquoise primary button background colors
--color-gold focus state outline color, secondary button
--color-hot-pink error button color
--black-100 light mode font color and dark mode background color
--white-100 light mode background color and dark mode font color
--text-primary black if light mode, white if dark mode
--backg-primary white if light mode, black if dark mode

Theme colors are also offered as hex codes:

import { colors } from '@caripizza/ui';
// ...
<div
  style={{
    background: `linear-gradient(45deg, ${colors.dark.turquoise[100]}, ${colors.dark.gold[50]})`
  }}
>

Dark mode

All components in the library include dark and light theme styles. To toggle dark mode, append the dark class name to an ancestor in the DOM and components will update their UI's accordingly:

<body class="bg-backg-primary text-primary">
  <h1>I render with dark background if system theme is dark</h1>
  <script type="text/javascript">
    window.onload = () => {
      if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
        document.body.className += " dark";
      }
    }
  </script>
</body>

The library also includes utils for detecting a user's system theme:

import { hasDarkSystemTheme } from '@caripizza/ui';

if (hasDarkSystemTheme()) {
  toggleDarkMode(true); // etc...
}

See the Dark mode stories for detailed examples.

Notes

Support matrix

Browser Version OS
Chrome Latest version Mac OS X 12.6
Safari Latest version Mac OS X 12.6
Firefox Latest version Mac OS X 12.6
Edge Latest version Mac OS X 12.6
Framework Version
React v17, v18
NextJS v12

Contributing

Resources