Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ulisse1996/ulisse-ui
A simple UI Library built on top of Tailwind and React
https://github.com/ulisse1996/ulisse-ui
Last synced: about 2 months ago
JSON representation
A simple UI Library built on top of Tailwind and React
- Host: GitHub
- URL: https://github.com/ulisse1996/ulisse-ui
- Owner: ulisse1996
- Created: 2023-12-02T17:39:54.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-01-23T09:31:02.000Z (12 months ago)
- Last Synced: 2024-10-13T15:48:43.074Z (3 months ago)
- Language: TypeScript
- Size: 8.95 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](https://github.com/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
```typescript
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
```css
@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`