https://github.com/fellipeutaka/ui

🎨 A Design System with accessible and customizable components powered by shadcn/ui
https://github.com/fellipeutaka/ui

components radix-ui react shadcn-ui tailwindcss ui

Last synced: 2 months ago
JSON representation

🎨 A Design System with accessible and customizable components powered by shadcn/ui

• Host: GitHub
• URL: https://github.com/fellipeutaka/ui
• Owner: fellipeutaka
• License: mit
• Created: 2023-10-17T04:42:48.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-02-13T04:18:13.000Z (11 months ago)
• Last Synced: 2024-10-15T03:52:37.180Z (3 months ago)
• Topics: components, radix-ui, react, shadcn-ui, tailwindcss, ui
• Language: TypeScript
• Homepage: https://fellipeutaka-ui.vercel.app
• Size: 1.28 MB
• Stars: 15
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# fellipeutaka/ui

## Installation

```bash

pnpm i @fellipeutaka/ui @fellipeutaka/styles lucide-react

```

## Initial configuration

Extend the Design System theme on `tailwind.config.js`.

```js

import { defineTailwindConfig } from "@fellipeutaka/styles";

export default defineTailwindConfig({

  content: ["./src/{app,screens,components}/**/*.{ts,tsx}"],

});

```

Or in CJS

```cjs

const { defineTailwindConfig } = require("@fellipeutaka/styles");

module.exports = defineTailwindConfig({

  content: ["./src/{app,screens,components}/**/*.{ts,tsx}"],

});

```

Import `theme.css` file at your `globals.css`.

```css

/* default theme */

@import "@fellipeutaka/styles/theme.css";

@tailwind base;

@tailwind components;

@tailwind utilities;

```

Great! Everything is ready to use it.

```jsx

import { Button } from "@fellipeutaka/ui/button";

export function App() {

  return Hello World!;

}

```

## Customization

Customizing is as simple as changing CSS variables values.

```css

@tailwind base;

@tailwind components;

@tailwind utilities;

@layer theme {

  :root {

    --background: 0 0% 100%;

    --foreground: 222.2 47.4% 11.2%;

    --muted: 210 40% 96.1%;

    --muted-foreground: 215.4 16.3% 46.9%;

    --popover: 0 0% 100%;

    --popover-foreground: 222.2 47.4% 11.2%;

    --border: 214.3 31.8% 91.4%;

    --input: 214.3 31.8% 91.4%;

    --card: 0 0% 100%;

    --card-foreground: 222.2 47.4% 11.2%;

    --primary: 222.2 47.4% 11.2%;

    --primary-foreground: 210 40% 98%;

    --secondary: 210 40% 96.1%;

    --secondary-foreground: 222.2 47.4% 11.2%;

    --accent: 210 40% 96.1%;

    --accent-foreground: 222.2 47.4% 11.2%;

    --destructive: 0 100% 50%;

    --destructive-foreground: 210 40% 98%;

    --ring: 215 20.2% 65.1%;

    --radius: 0.5rem;

  }

  .dark:root {

    --background: 224 71% 4%;

    --foreground: 213 31% 91%;

    --muted: 223 47% 11%;

    --muted-foreground: 215.4 16.3% 56.9%;

    --accent: 216 34% 17%;

    --accent-foreground: 210 40% 98%;

    --popover: 224 71% 4%;

    --popover-foreground: 215 20.2% 65.1%;

    --border: 216 34% 17%;

    --input: 216 34% 17%;

    --card: 224 71% 4%;

    --card-foreground: 213 31% 91%;

    --primary: 210 40% 98%;

    --primary-foreground: 222.2 47.4% 1.2%;

    --secondary: 222.2 47.4% 11.2%;

    --secondary-foreground: 210 40% 98%;

    --destructive: 0 63% 31%;

    --destructive-foreground: 210 40% 98%;

    --ring: 216 34% 17%;

    --radius: 0.5rem;

  }

  body {

    @apply bg-background text-foreground antialiased;

    font-feature-settings:

      "rlig" 1,

      "calt" 1;

  }

  ::-webkit-scrollbar {

    @apply h-1.5 w-1.5;

  }

  ::-webkit-scrollbar-thumb {

    @apply bg-foreground/40 rounded-lg transition-colors;

  }

  ::-webkit-scdrollbar-thumb:hover,

  ::-webkit-scrollbar-thumb:active {

    @apply bg-foreground/60;

  }

  :autofill {

    background: none;

  }

  ::-webkit-color-swatch-wrapper {

    padding: 0;

  }

  ::-webkit-color-swatch {

    border: 0;

    border-radius: 0;

  }

  ::-moz-color-swatch,

  ::-moz-focus-inner {

    border: 0;

  }

  ::-moz-focus-inner {

    padding: 0;

  }

}

```