@vashu96/ui

Crystal Flat Design System — A collection of high-quality, glassmorphism-inspired React components. Built with React, TypeScript, and modern CSS.

Features

• Glassmorphism: Beautiful, translucent UI elements.
• Dynamic Theming: Built-in support for light/dark modes and custom color schemes.
• Accessible: Follows WAI-ARIA patterns.
• Type-Safe: Written in TypeScript with full type definitions.

Requirements

This library requires the following peer dependencies to be installed in your project:

• React: ^19.2.0
• React DOM: ^19.2.0
• TanStack Table: ^8.0.0 (Required for DataTable component)

Installation

npm install @vashu96/ui @tanstack/react-table

Check our package.json for all dependencies.

Setup

1. Import Styles

Import the global styles in your main entry point (e.g., main.tsx or App.tsx):

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

2. Wrap with ThemeProvider

To enable dynamic theming and utilizing the color system, wrap your application with the ThemeProvider:

import { ThemeProvider } from "@vashu96/ui";

function App() {
  return (
    <ThemeProvider defaultMode="system" storageKey="vashu-ui-theme">
      <YourApp />
    </ThemeProvider>
  );
}

Usage

import { Button, Card, SpotlightCard } from "@vashu96/ui";

function MyComponent() {
  return (
    <Card variant="glass">
      <SpotlightCard>
        <h2>Hello World</h2>
        <Button variant="primary">Click Me</Button>
      </SpotlightCard>
    </Card>
  );
}

Components

The library provides a comprehensive set of components:

Layout

• Card - Versatile container with glass variants.
• SpotlightCard - Card with mouse-tracking spotlight effect.
• Separator - Visual divider.
• Sheet - Slide-out modal/drawer.
• Sidebar - Application sidebar navigation.
• TOC - Table of Contents for document navigation.

Forms

• Button - Interactive button with multiple variants.
• Input - Text input field.
• Textarea - Multi-line text input.
• Checkbox - Selection control.
• Switch - Toggle switch.
• Slider - Range slider.
• Select - Dropdown selection.
• FormField - Wrapper for form controls with labels and error states.
• Label - Text label for form elements.

Feedback

• Badge - Status indicator.
• Alert - Urgent information banner.
• Toast - Temporary notification.
• Progress - Progress bar.
• Spinner - Loading indicator.
• Skeleton - Loading placeholder.
• EmptyState - Placeholder for empty data sets.

Overlay

• Dialog - Modal dialog window.
• ConfirmDialog - Pre-configured confirmation modal.
• Tooltip - Information popup on hover.
• Dropdown - Menu for actions or selection.
• Command - Command palette/menu.
• SearchCommand - Specialized search command interface.

Navigation

• Tabs - Tabbed interface.
• Breadcrumb - Path navigation.
• Pagination - Page navigation for lists.
• Tag - Categorization tag.

Data Display

• Table - Simple data table.
• DataTable - Advanced table with sorting, filtering, and pagination.
• Avatar - User profile image/initials.

Theming System

The library includes a powerful dynamic theming system accessible via useThemeContext.

ThemeProvider Props

| Prop | Type | Default | Description | | -------------- | ------------------------------- | ---------------- | ---------------------------------------- | | defaultMode | 'light' \| 'dark' \| 'system' | 'system' | Initial color mode. | | defaultColor | ColorSchemeInput | PRESETS.indigo | Initial primary color. | | storageKey | string | 'theme' | Key to use for localStorage persistence. |

Using the Context

You can control the theme programmatically using the useThemeContext hook:

import { useThemeContext, PRESETS } from "@vashu96/ui";

function ThemeSwitcher() {
  const { mode, setMode, setColors } = useThemeContext();

  return (
    <div>
      <button onClick={() => setMode(mode === "dark" ? "light" : "dark")}>
        Toggle Mode
      </button>
      <button onClick={() => setColors(PRESETS.rose)}>Set Rose Theme</button>
    </div>
  );
}

Color Presets

Available presets via PRESETS: indigo, emerald, rose, amber, cyan, violet, sky, fuchsia, orange, teal.

Publishing

To publish a new version of the library to NPM, use the following commands:

• Patch release: npm run release or npm run release:patch (e.g., v0.0.1 -> v0.0.2)
• Minor release: npm run release:minor (e.g., v0.0.2 -> v0.1.0)
• Major release: npm run release:major (e.g., v0.1.0 -> v1.0.0)

These scripts will automatically:

1. Build the production bundle.
2. Increment the version in package.json.
3. Create a git tag for the new version.
4. Publish the package to NPM with public access.

[!IMPORTANT]
Ensure you are logged into NPM (npm login) and have a clean git working directory before running these commands.

License

MIT