css-app-ui

Shared UI components library for CSS Support Systems applications.

This package provides a complete set of reusable UI components, hooks, utilities, and unified Tailwind CSS configuration built with React, TypeScript, Tailwind CSS, and shadcn/ui.

Features

• 🎨 Unified Design System: Centralized Tailwind configuration and CSS variables
• 📦 Complete Component Library: 40+ React components with consistent styling
• 🎯 TypeScript First: Full type safety and excellent developer experience
• 🌙 Dark Mode Support: Built-in light/dark theme switching
• 📱 Responsive Design: Mobile-first responsive components
• ♿ Accessibility: ARIA-compliant components using Radix UI primitives

Installation

npm install css-app-ui

Usage

Unified Tailwind Configuration

Import the shared Tailwind configuration in your tailwind.config.ts:

import type { Config } from 'tailwindcss';
import { tailwindConfig } from 'css-app-ui/tailwind-config';

export default {
  ...tailwindConfig,
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/css-app-ui/dist/**/*.js",
  ],
} satisfies Config;

CSS Variables and Styling

Import CSS variables in your main CSS file:

@import 'css-app-ui/variables';

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

Components

import { Button, Card, Input, Layout } from 'css-app-ui';

function App() {
  return (
    <Layout sidebar={MySidebar} title="My App">
      <Card>
        <Input placeholder="Enter text..." />
        <Button>Submit</Button>
      </Card>
    </Layout>
  );
}

Hooks

import { useToast, useIsMobile } from 'css-app-ui';

function MyComponent() {
  const { toast } = useToast();
  const isMobile = useIsMobile();
  
  return (
    <div>
      <button onClick={() => toast({ title: "Hello!" })}>
        Show toast
      </button>
      {isMobile && <p>Mobile view</p>}
    </div>
  );
}

Utilities

import { cn } from 'css-app-ui';

function MyComponent({ className }) {
  return (
    <div className={cn("base-styles", className)}>
      Content
    </div>
  );
}

Components Included

• Accordion
• Alert & Alert Dialog
• Avatar
• Badge
• Breadcrumb
• Button
• Calendar
• Card
• Carousel
• Chart
• Checkbox
• Collapsible
• Command
• Context Menu
• Dialog
• Drawer
• Dropdown Menu
• Form
• Hover Card
• Input & Input OTP
• Label
• Layout
• Menubar
• Navigation Menu
• Pagination
• Popover
• Progress
• Radio Group
• Resizable
• Scroll Area
• Select
• Separator
• Sheet
• Sidebar
• Skeleton
• Slider
• Sonner & Toast
• Switch
• Table
• Tabs
• Textarea
• Toggle & Toggle Group
• Tooltip

Hooks Included

• useIsMobile - Detect mobile viewport
• useToast - Toast notification management

Package Exports

The package provides multiple exports for different use cases:

// Components and utilities
import { Button, cn, useToast } from 'css-app-ui';

// Tailwind configuration
import { tailwindConfig } from 'css-app-ui/tailwind-config';

// CSS variables only
// @import 'css-app-ui/variables'

// Complete styles (variables + components)
// @import 'css-app-ui/styles'

PostCSS Configuration

For Tailwind CSS processing, ensure you have a postcss.config.js:

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

Requirements

• React >= 16.8.0
• React DOM >= 16.8.0
• Tailwind CSS >= 3.4.0
• PostCSS (for CSS processing)

Version History

• v1.2.1: Added CSS variables export, fixed styling issues
• v1.2.0: Added unified Tailwind configuration export
• v1.1.x: Component library with basic styling

License

MIT