Quartz UI Component Library

A professional, high-end React component library with a modern "Quartz" design system, featuring radial gradients, smooth transitions, and a refined color palette.

🚀 Features

• QButton: Multi-variant buttons (base, primary, success, cancel) with smooth hover/active states.
• QCard: Versatile container with radial gradient background and optional hover effects.
• QInput: Modern text inputs with label and error state support.
• QCheckbox: Custom-styled checkboxes with smooth animations.
• QSelect: Styled dropdown components with custom chevron icons.
• QSwitch: Toggle switches for boolean states with fluid transitions.
• Theming: Integrated with Tailwind CSS v4 and CSS variables for easy customization.
• TypeScript: Full type safety and declaration files included.
• Accessibility: Built with accessibility in mind, supporting standard HTML attributes and forwardRef.

📦 Installation

To use the library in your project, install it via npm or yarn:

npm install quartz-lib-ui

🛠 Usage

1. Import the CSS: Add the styles to your main entry file (e.g., main.tsx or App.tsx).

import 'quartz-ui/style.css';

2. Import and use components:

import { QButton, QCard, QInput } from 'quartz-ui';

function MyComponent() {
  return (
    <QCard>
      <QInput label="Email" placeholder="Enter your email" />
      <QButton variant="primary">Submit</QButton>
    </QCard>
  );
}

🎨 Customization

You can override the default design tokens by redefining the CSS variables in your global CSS:

:root {
  --quartz-font-family: 'Inter', sans-serif;
  --color-quartz-lilac: #6366f1; /* Custom primary color */
}

📄 License

MIT