@adhese/ui NPM

Intro

🚧 WIP 🚧

This is the design system for Adhese. It is a collection of components that can be used in any project. The components are built with React, TailwindCSS and TypeScript.

Storybook instance

Installing

Next.js (from scratch)

npx create-next-app@latest --typescript --tailwind --eslint
Install the component library pnpm i @adhese/ui

Now you need to make some changes to your tailwind config

Typescript

// import the default config from the adhese library
import config from '@adhese/ui/tailwind';

export default {
  presets: [config],
  content: [
    './node_modules/@adhese/ui/dist/**/*.{cjs,js,ts,jsx,tsx,mdx}',
    './src/**/*.{cjs,js,ts,jsx,tsx,mdx}',
  ],
};

JavaScript

// import the default config from the adhese library
const config = require('@adhese/ui/tailwind');

module.exports = {
  presets: [config],
  content: [
    './node_modules/@adhese/ui/dist/**/*.{cjs,js,ts,jsx,tsx,mdx}',
    './src/**/*.{cjs,js,ts,jsx,tsx,mdx}',
  ],
};

Open up your globals.css or whatever you called it and make it look something like this:
```
@import '@adhese/ui/style';
@tailwind base;
@tailwind components;
@tailwind utilities;
```

Now you can start using the components in your project

import { Button } from '@adhese/ui/button';
import { Calendar } from '@adhese/ui/calendar';

export default function Example() {
  return (
    <div>
      <Button>Make some 🥓🥞</Button>
      <Calendar />
    </div>
  );
}

(optional) Customisation

@layer base {
  :root {
    --primary: 222.2 100% 56.17%;
    --primary-foreground: 210 40% 98%;
    --accent: 222.2 100% 56.17%;
  }

  /* just add className="dark" to the body or html tag or wherever */
  .dark {
    --background: 0 0% 19.36%;
  }
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
}

Available variables

The format we use for colors is HSL (Hue, Saturation, Lightness).

HSL is a color model that represents colors through Hue (angle on the color wheel), Saturation (color intensity), and Lightness (brightness), providing a human-friendly way to specify colors in systems like CSS.

To quickly view the components you can visit the storybook instance.

/*
Default background color of <body />...etc
*/
--background: 0 0% 100%;
--foreground: 222.2 47.4% 11.2%;
/*
Muted backgrounds such as <TabsList />, <Skeleton /> and <Switch />
*/
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
/*
Background color for <Card />
*/
--card: 0 0% 100%;
--card-foreground: 222.2 47.4% 11.2%;
/*
Background color for popovers such as <DropdownMenu />, <HoverCard />, <Popover />
*/
--popover: 0 0% 100%;
--popover-foreground: 222.2 47.4% 11.2%;
/*
Default border color
*/
--border: 214.3 31.8% 91.4%;
/*
Border color for inputs such as <Input />, <Select />, <Textarea />
*/
--input: 214.3 31.8% 91.4%;
/*
Primary colors for <Button />
*/
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
/*
Secondary colors for <Button />
*/
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
/*
Used for accents such as hover effects on <DropdownMenuItem>, <SelectItem>...etc
*/
--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;
/*
Used for destructive actions such as <Button variant="destructive">
*/
--destructive: 0 100% 50%;
--destructive-foreground: 210 40% 98%;
/*
Used for focus ring
*/
--ring: 215 20.2% 65.1%;
/*
Border radius for card, input and buttons
*/
--radius: 0.5rem;