0.3.4 • Published 5 months ago

@codefast/ui v0.3.4

Weekly downloads
-
License
MIT
Repository
github
Last release
5 months ago

@codefast/ui – A Modern and Scalable UI Component Library

@codefast/ui is a high-performance, customizable UI library built with TailwindCSS, designed to streamline the development of modern web applications. It provides a consistent design system, seamless dark mode support, and a robust component architecture for enhanced scalability and maintainability.

Installation

Install @codefast/ui via pnpm:

pnpm add @codefast/ui

Or using npm:

npm install @codefast/ui

Configuration

Global CSS configuration

To enable @codefast/ui, import the required styles into your global CSS file (e.g., /app/globals.css):

@import "tailwindcss";

@import "@codefast/ui/styles.css";

@source '../../node_modules/@codefast/ui';

@custom-variant dark (&:where(.dark, .dark *));

@layer base {
  :root {
    --input: var(--color-neutral-200);
    --border: var(--color-neutral-200);

    --ring: var(--color-neutral-400);

    --background: var(--color-white);
    --foreground: var(--color-neutral-950);

    --primary: var(--color-sky-500);
    --primary-foreground: var(--color-neutral-50);

    --secondary: var(--color-neutral-100);
    --secondary-foreground: var(--color-neutral-900);

    --destructive: var(--color-red-600);

    --accent: var(--color-neutral-100);
    --accent-foreground: var(--color-neutral-900);

    --muted: var(--color-neutral-100);
    --muted-foreground: var(--color-neutral-500);

    --popover: var(--color-white);
    --popover-foreground: var(--color-neutral-950);
    --popover-overlay: --alpha(var(--color-neutral-900) / 20%);

    --card: var(--color-white);
    --card-foreground: var(--color-neutral-950);

    --sidebar: var(--color-neutral-50);
    --sidebar-foreground: var(--color-neutral-950);

    --sidebar-primary: var(--color-sky-500);
    --sidebar-primary-foreground: var(--color-neutral-50);

    --sidebar-accent: var(--color-neutral-100);
    --sidebar-accent-foreground: var(--color-neutral-900);

    --sidebar-border: var(--color-neutral-200);
    --sidebar-ring: var(--color-neutral-400);

    --chart-1: var(--color-orange-600);
    --chart-2: var(--color-teal-600);
    --chart-3: var(--color-cyan-600);
    --chart-4: var(--color-amber-600);
    --chart-5: var(--color-amber-500);
  }

  @variant dark {
    --input: var(--color-neutral-700);
    --border: --alpha(var(--color-neutral-700) / 50%);

    --ring: var(--color-neutral-500);

    --background: var(--color-neutral-950);
    --foreground: var(--color-neutral-50);

    --primary: var(--color-sky-700);
    --primary-foreground: var(--color-neutral-50);

    --secondary: var(--color-neutral-800);
    --secondary-foreground: var(--color-neutral-50);

    --destructive: var(--color-red-400);

    --accent: var(--color-neutral-700);
    --accent-foreground: var(--color-neutral-50);

    --muted: var(--color-neutral-800);
    --muted-foreground: var(--color-neutral-400);

    --popover: var(--color-neutral-800);
    --popover-foreground: var(--color-neutral-50);
    --popover-overlay: --alpha(var(--color-neutral-900) / 80%);

    --card: var(--color-neutral-900);
    --card-foreground: var(--color-neutral-50);

    --sidebar: var(--color-neutral-900);
    --sidebar-foreground: var(--color-neutral-50);

    --sidebar-primary: var(--color-sky-700);
    --sidebar-primary-foreground: var(--color-neutral-50);

    --sidebar-accent: var(--color-neutral-800);
    --sidebar-accent-foreground: var(--color-neutral-50);

    --sidebar-border: var(--color-neutral-800);
    --sidebar-ring: var(--color-neutral-600);

    --chart-1: var(--color-blue-700);
    --chart-2: var(--color-emerald-500);
    --chart-3: var(--color-amber-500);
    --chart-4: var(--color-purple-500);
    --chart-5: var(--color-rose-500);
  }
}

Next.js configuration

To optimize importing packages, you need to update the next.config.ts file in your project. Add the following configuration:

experimental: {
  optimizePackageImports: ['@codefast/ui'],
},

Ví dụ:

Below is an example of a complete next.config.ts file:

// next.config.ts
const nextConfig = {
  reactStrictMode: true,
  experimental: {
    optimizePackageImports: ["@codefast/ui"],
  },
};

module.exports = nextConfig;

This configuration improves performance by optimizing the import process of libraries from @codefast/ui.

Usage

@codefast/ui provides a range of prebuilt components that integrate seamlessly into your application.

Example usage of the Button component:

import type { JSX } from 'react';

import { Button } from '@codefast/ui';

export default function Home(): JSX.Element {
  return <Button variant="primary">Get Started</Button>;
}

Key Features

  • Fully Customizable – Easily configure themes, colors, and component properties.
  • Dark Mode Support – Built-in support for seamless dark mode transitions.
  • Optimized Performance – Lightweight and designed for high-performance UI rendering.
  • Seamless Integration – Works out-of-the-box with TailwindCSS and modern React applications.

License

@codefast/ui is licensed under the MIT License, allowing free use in both personal and commercial projects.


Enhance Your Development Workflow with @codefast/ui

For documentation, examples, and contributions, visit the repository.

0.2.45-canary.0

6 months ago

0.3.3-canary.0

6 months ago

0.3.1-canary.9

6 months ago

0.2.46-canary.5

6 months ago

0.2.46-canary.6

6 months ago

0.3.1-canary.3

6 months ago

0.3.1-canary.4

6 months ago

0.3.1-canary.1

6 months ago

0.3.1-canary.2

6 months ago

0.3.1-canary.8

6 months ago

0.3.1-canary.5

6 months ago

0.3.1-canary.6

6 months ago

0.3.1-canary.12

6 months ago

0.3.1-canary.13

6 months ago

0.3.1-canary.10

6 months ago

0.3.1-canary.11

6 months ago

0.3.1-canary.0

6 months ago

0.3.1-canary.14

6 months ago

0.3.1-canary.15

6 months ago

0.2.46-canary.0

6 months ago

0.2.46-canary.3

6 months ago

0.2.46-canary.4

6 months ago

0.2.46-canary.1

6 months ago

0.2.46-canary.2

6 months ago

0.1.52

11 months ago

0.1.53

11 months ago

0.1.54

11 months ago

0.1.55

11 months ago

0.1.56

11 months ago

0.1.57

11 months ago

0.1.58

11 months ago

0.1.59

11 months ago

0.2.27

8 months ago

0.2.26

8 months ago

0.2.25

8 months ago

0.2.24

8 months ago

0.2.23

8 months ago

0.2.22

8 months ago

0.2.21

8 months ago

0.1.50

11 months ago

0.2.20

9 months ago

0.1.51

11 months ago

0.2.19

9 months ago

0.2.18

9 months ago

0.2.17

9 months ago

0.1.49

11 months ago

0.1.48

12 months ago

0.2.16

9 months ago

0.2.15

9 months ago

0.2.14

9 months ago

0.2.13

9 months ago

0.2.12

9 months ago

0.2.11

10 months ago

0.2.10

10 months ago

0.3.0

6 months ago

0.3.2

6 months ago

0.3.1

6 months ago

0.3.4

5 months ago

0.3.3

6 months ago

0.3.2-canary.0

6 months ago

0.2.44-canary.0

6 months ago

0.2.44-canary.1

6 months ago

0.2.41

7 months ago

0.2.40

7 months ago

0.2.45

6 months ago

0.2.44

6 months ago

0.2.43

6 months ago

0.2.42

7 months ago

0.2.39

7 months ago

0.2.30

7 months ago

0.2.38

7 months ago

0.2.37

7 months ago

0.2.36

7 months ago

0.2.35

7 months ago

0.2.34

7 months ago

0.2.33

7 months ago

0.1.60

11 months ago

0.1.61

11 months ago

0.2.31

7 months ago

0.1.62

11 months ago

0.2.1

11 months ago

0.2.0

11 months ago

0.2.29

7 months ago

0.2.28

7 months ago

0.2.7

10 months ago

0.2.6

10 months ago

0.2.9

10 months ago

0.2.8

10 months ago

0.2.3

10 months ago

0.2.2

11 months ago

0.2.5

10 months ago

0.2.4

10 months ago

0.1.47

12 months ago

0.1.46

12 months ago

0.1.42

1 year ago

0.1.43

1 year ago

0.1.44

1 year ago

0.1.45

1 year ago

0.1.41

1 year ago

0.1.40

1 year ago

0.1.38

1 year ago

0.1.39

1 year ago

0.1.30

1 year ago

0.1.32

1 year ago

0.1.33

1 year ago

0.1.34

1 year ago

0.1.35

1 year ago

0.1.36

1 year ago

0.1.37

1 year ago

0.1.27

1 year ago

0.1.28

1 year ago

0.1.29

1 year ago

0.1.20

1 year ago

0.1.21

1 year ago

0.1.22

1 year ago

0.1.23

1 year ago

0.1.24

1 year ago

0.1.25

1 year ago

0.1.26

1 year ago

0.1.16

1 year ago

0.1.17

1 year ago

0.1.18

1 year ago

0.1.19

1 year ago

0.1.15

1 year ago

0.1.14

1 year ago

0.1.10

1 year ago

0.1.11

1 year ago

0.1.12

1 year ago

0.1.13

1 year ago

0.1.8

1 year ago

0.1.7

1 year ago

0.1.9

1 year ago

0.1.6

1 year ago

0.0.70

1 year ago

0.0.71

1 year ago

0.0.72

1 year ago

0.1.0

1 year ago

0.1.2

1 year ago

0.1.1

1 year ago

0.1.4

1 year ago

0.1.3

1 year ago

0.1.5

1 year ago

0.0.62

1 year ago

0.0.63

1 year ago

0.0.64

1 year ago

0.0.65

1 year ago

0.0.66

1 year ago

0.0.67

1 year ago

0.0.68

1 year ago

0.0.69

1 year ago

0.0.60

1 year ago

0.0.61

1 year ago

0.0.59

1 year ago

0.0.52

1 year ago

0.0.53

1 year ago

0.0.54

1 year ago

0.0.55

1 year ago

0.0.56

1 year ago

0.0.57

1 year ago

0.0.58

1 year ago

0.0.50

1 year ago

0.0.48

1 year ago

0.0.49

1 year ago

0.0.46

1 year ago

0.0.47

1 year ago

0.0.45

1 year ago

0.0.42

1 year ago

0.0.43

1 year ago

0.0.44

1 year ago

0.0.41

1 year ago

0.0.40

1 year ago

0.0.39

1 year ago

0.0.38

1 year ago

0.0.37

1 year ago

0.0.34

2 years ago

0.0.35

1 year ago

0.0.36

1 year ago

0.0.30

2 years ago

0.0.31

2 years ago

0.0.32

2 years ago

0.0.33

2 years ago

0.0.29

2 years ago

0.0.23

2 years ago

0.0.24

2 years ago

0.0.25

2 years ago

0.0.26

2 years ago

0.0.27

2 years ago

0.0.28

2 years ago

0.0.20

2 years ago

0.0.21

2 years ago

0.0.22

2 years ago

0.0.19

2 years ago

0.0.18

2 years ago

0.0.17

2 years ago

0.0.14

2 years ago

0.0.15

2 years ago

0.0.16

2 years ago

0.0.11

2 years ago

0.0.12

2 years ago

0.0.13

2 years ago

0.0.10

2 years ago

0.0.9

2 years ago

0.0.8

2 years ago

0.0.7

2 years ago

0.0.6

2 years ago

0.0.5

2 years ago

0.0.4

2 years ago

0.0.3

2 years ago

0.0.2

2 years ago

0.0.1

2 years ago