Package Exports

@codefast/ui
@codefast/ui/accordion
@codefast/ui/alert
@codefast/ui/alert-dialog
@codefast/ui/aspect-ratio
@codefast/ui/avatar
@codefast/ui/badge
@codefast/ui/blockquote
@codefast/ui/box
@codefast/ui/breadcrumb
@codefast/ui/button
@codefast/ui/calendar
@codefast/ui/card
@codefast/ui/carousel
@codefast/ui/chart
@codefast/ui/checkbox
@codefast/ui/checkbox-cards
@codefast/ui/checkbox-group
@codefast/ui/code
@codefast/ui/collapsible
@codefast/ui/command
@codefast/ui/container
@codefast/ui/context-menu
@codefast/ui/dialog
@codefast/ui/drawer
@codefast/ui/dropdown-menu
@codefast/ui/em
@codefast/ui/form
@codefast/ui/heading
@codefast/ui/hover-card
@codefast/ui/inline
@codefast/ui/input
@codefast/ui/input-number
@codefast/ui/input-otp
@codefast/ui/input-password
@codefast/ui/input-search
@codefast/ui/kbd
@codefast/ui/label
@codefast/ui/lib/logger
@codefast/ui/lib/utils
@codefast/ui/menubar
@codefast/ui/navigation-menu
@codefast/ui/pagination
@codefast/ui/popover
@codefast/ui/pre
@codefast/ui/progress
@codefast/ui/progress-circle
@codefast/ui/quote
@codefast/ui/radio
@codefast/ui/radio-cards
@codefast/ui/radio-group
@codefast/ui/resizable
@codefast/ui/scroll-area
@codefast/ui/section
@codefast/ui/select
@codefast/ui/separator
@codefast/ui/sheet
@codefast/ui/sidebar
@codefast/ui/skeleton
@codefast/ui/slider
@codefast/ui/sonner
@codefast/ui/spinner
@codefast/ui/strong
@codefast/ui/styles.css
@codefast/ui/switch
@codefast/ui/table
@codefast/ui/tabs
@codefast/ui/text
@codefast/ui/textarea
@codefast/ui/toggle
@codefast/ui/toggle-group
@codefast/ui/tooltip

Readme

@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.