@droxic/ui-library

A modern React UI component library built with TypeScript, Vite, and CSS Modules.

Features

• 🎨 Modern Design System - Consistent, accessible components
• ⚡ TypeScript First - Full type safety and IntelliSense support
• 🎯 CSS Modules - Scoped styles with CSS Variables for theming
• 📚 Storybook Integration - Interactive documentation and testing
• 📦 Tree Shakeable - Import only what you need
• ♿ Accessible - Built with accessibility in mind

Installation

npm install @droxic/ui-library

Font Setup (Optional but Recommended)

This library uses Montserrat for headings and Atkinson Hyperlegible Mono for body text. The library will work with system fonts as fallbacks, but for the intended design, add these fonts to your app:

Option 1: Google Fonts CDN (easiest)

Add to your index.html:

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Atkinson+Hyperlegible+Mono:wght@400;500;600;700&display=swap"
  rel="stylesheet"
/>

Option 2: Self-host (better performance)

Download the fonts and host them yourself, then add @font-face rules in your global CSS.

Option 3: Use your own fonts

The library uses CSS variables with fallback stacks, so you can override them:

:root {
  --font-family-head: "YourHeadingFont", sans-serif;
  --font-family-body: "YourBodyFont", monospace;
}

Usage

import { Button } from "@droxic/ui-library";
import "@droxic/ui-library/styles"; // Import styles

function App() {
  return <Button variant="primary">Click me</Button>;
}

Development

# Install dependencies
npm install

# Start Storybook for development
npm run dev

# Build the library
npm run build

# Build Storybook documentation
npm run build-storybook

# Run tests
npm test

# Lint code
npm run lint

Components

• Button - Interactive button component with multiple variants
• More components coming soon...

Storybook

This library includes comprehensive Storybook documentation. To view it locally:

npm run dev

Then open http://localhost:6006 in your browser.

License

MIT