@adhese/ui
v0.20.2
Published
π§ WIP π§
Downloads
1,483
Readme
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.
Installing
Next.js (from scratch)
npx create-next-app@latest --typescript --tailwind --eslintInstall the component library
pnpm i @adhese/uiNow 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;