Ulisse UI

Simple UI Library used for consultant projects built with

• React
• Tailwind
• Radix
• React Aria
• Vite

Some of the components are generated by shadcn-ui/ui

Get started

Install the library with your preferred package manager

pnpm add ulisse-ui

Add colors, animations and keyframes in tailwind.config.ts and reference dist folder for enable tailwind transformation

import { animations, colors, keyframes } from "ulisse-ui";

export default {
  content: ["./node_modules/@ulisse1996/ui/dist/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      colors: {
        ...colors
      },
      keyframes: {
        ...keyframes
      },
      animations: {
        ...animations
      }
    }
  },
  plugins: []
};

Define your colors using CSS variables

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    :root {
        --primary: 38 77 197;
        --primary-foreground: 246 246 246;
        --destructive: 190 49 68;
        --destructive-foreground: 246 246 246;
        --secondary: 207 217 247;
        --secondary-foreground: 30 30 30;
        --warning: 251 191 36;
        --warning-foreground: 7 7 8;
        --success: 34 187 51;
        --success-foreground: 246 246 246;
        --muted: 153 153 153;
        --muted-foreground: 113 113 122;
        --background: 255 255 255;
        --card: 255 255 255;
        --card-foreground: 7 7 8;
        --input: 228 228 231;
        --radix-accordion-content-height: 120px
    }
}

Development

Before start, run

pnpm install --frozen-lockfile

To navigate between components, run

pnpm run storybook

To build the library

pnpm run build