@dream-pixels-forge/wooden-ui-kit

Procedurally-generated wood texture React components for unique, organic UIs

🌲 Features

• 4 Authentic Wood Species: Oak, Walnut, Cherry, and Mahogany with procedurally-generated textures
• SVG Filter Technology: Real-time texture generation using feTurbulence, feColorMatrix, and feDiffuseLighting
• Zero Image Assets: All textures generated procedurally, keeping bundle size under 50KB
• 4 Finish Variants: Natural, Matte, Satin, and Gloss for customizable appearance
• 5 Production-Ready Components: WoodPanel, WoodButton, WoodCard, WoodNavigation, WoodSpeciesShowcase
• Custom React Hooks: useWoodTexture, useGrainEffect, useWoodTheme for advanced customization
• Full TypeScript Support: Complete type definitions with strict mode compliance
• WCAG 2.1 AA Compliant: Built-in accessibility with keyboard navigation, ARIA labels, and focus management
• Tree-Shakeable ES Modules: Import only what you need for optimal bundle size
• CSS Custom Properties: Runtime theme customization without re-renders
• Dark Mode Ready: Automatic system detection with manual override support
• React 18+ Compatible: Works with Next.js 14+, Vite, and all modern React frameworks

📦 Installation

npm

npm install @vanguard/wooden-ui-kit

yarn

yarn add @vanguard/wooden-ui-kit

pnpm

pnpm add @vanguard/wooden-ui-kit

Peer Dependencies

Ensure you have React 18+ installed:

npm install react@^18.0.0 react-dom@^18.0.0

🚀 Quick Start

Basic Setup

import React from 'react'
import { WoodPanel, WoodButton, WoodCard } from '@vanguard/wooden-ui-kit'
import '@vanguard/wooden-ui-kit/styles.css'

function App() {
  return (
    <WoodPanel species="walnut" finish="satin" padding="lg">
      <WoodCard species="oak" elevation="medium">
        <h2>Welcome to Vanguard</h2>
        <p>Beautiful, procedurally-generated wood textures for your UI</p>
        <WoodButton variant="primary" species="cherry">
          Get Started
        </WoodButton>
      </WoodCard>
    </WoodPanel>
  )
}

export default App

With Theme Provider

import { ThemeProvider, WoodPanel, WoodButton } from '@vanguard/wooden-ui-kit'

function App() {
  return (
    <ThemeProvider
      defaultSpecies="walnut"
      defaultFinish="gloss"
    >
      <WoodPanel>
        <WoodButton>Themed Button</WoodButton>
      </WoodPanel>
    </ThemeProvider>
  )
}

Individual Component Import (Tree-Shaking)

// Import only what you need
import { WoodButton } from '@vanguard/wooden-ui-kit/components/WoodButton'
import { useWoodTexture } from '@vanguard/wooden-ui-kit/hooks/useWoodTexture'

📚 Component Documentation

WoodPanel

Foundational container component with authentic wood textures.

import { WoodPanel } from '@vanguard/wooden-ui-kit'

<WoodPanel
  species="walnut"           // 'oak' | 'walnut' | 'cherry' | 'mahogany'
  finish="satin"             // 'natural' | 'matte' | 'satin' | 'gloss'
  grainIntensity="medium"    // 'low' | 'medium' | 'high' | number
  padding="lg"               // 'none' | 'sm' | 'md' | 'lg' | 'xl'
  border="gold"              // 'none' | 'gold' | 'inset' | 'outline'
  borderRadius="xl"          // 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'
  animated={true}            // Enable grain animation
  hoverable={true}           // Add hover effects
  className="custom-class"
  cssVars={{ '--custom-var': 'value' }}
>
  <h2>Panel Content</h2>
  <p>Beautiful wood texture</p>
</WoodPanel>

Features:

• Procedural SVG filter-based textures
• Adjustable grain intensity and growth rings
• Optional knot placement
• Responsive padding and border options
• Full CSS custom property support

WoodButton

Interactive button with tactile wood texture feedback.

import { WoodButton } from '@vanguard/wooden-ui-kit'

<WoodButton
  species="oak"
  variant="primary"          // 'primary' | 'secondary' | 'ghost' | 'danger'
  size="md"                  // 'sm' | 'md' | 'lg'
  isLoading={false}
  leftIcon={<Icon />}
  rightIcon={<ArrowIcon />}
  fullWidth={false}
  onClick={handleClick}
  disabled={false}
>
  Click Me
</WoodButton>

States:

• Default, Hover, Active, Focus, Disabled, Loading
• Accessible focus ring with 3:1 contrast ratio
• Keyboard navigation (Enter/Space activation)
• ARIA busy state for loading

WoodCard

Versatile card with slot-based composition and elevation levels.

import { WoodCard } from '@vanguard/wooden-ui-kit'

<WoodCard
  species="cherry"
  elevation="high"           // 'none' | 'low' | 'medium' | 'high'
  size="lg"                  // 'sm' | 'md' | 'lg' | 'xl'
  hoverable={true}
  clickable={true}
  orientation="vertical"     // 'vertical' | 'horizontal'
  header={<h3>Card Title</h3>}
  footer={<p>Footer content</p>}
  actions={
    <>
      <WoodButton variant="primary">Action</WoodButton>
      <WoodButton variant="ghost">Cancel</WoodButton>
    </>
  }
>
  <p>Main card content goes here</p>
</WoodCard>

// With sub-components
<WoodCard species="walnut">
  <WoodCard.Header>
    <h3>Card Title</h3>
    <p>Subtitle or metadata</p>
  </WoodCard.Header>
  <WoodCard.Media>
    <img src="/image.jpg" alt="Media" />
  </WoodCard.Media>
  <WoodCard.Content>
    <p>Card content</p>
  </WoodCard.Content>
  <WoodCard.Actions>
    <WoodButton>Action</WoodButton>
  </WoodCard.Actions>
</WoodCard>

Sub-components:

• WoodCard.Header - Title and metadata area
• WoodCard.Content - Main content area
• WoodCard.Footer - Supplementary information
• WoodCard.Actions - Button container
• WoodCard.Media - Image/video placement

WoodNavigation

Responsive navigation bar with mobile menu support.

import { WoodNavigation } from '@vanguard/wooden-ui-kit'

const navItems = [
  { id: 'home', label: 'Home', href: '/', icon: <HomeIcon /> },
  { id: 'about', label: 'About', href: '/about' },
  {
    id: 'products',
    label: 'Products',
    children: [
      { id: 'product-1', label: 'Product 1', href: '/p1' },
      { id: 'product-2', label: 'Product 2', href: '/p2' },
    ],
  },
]

<WoodNavigation
  species="mahogany"
  finish="gloss"
  items={navItems}
  logo={<Logo />}
  brand="Vanguard"
  orientation="horizontal"   // 'horizontal' | 'vertical'
  variant="default"          // 'default' | 'sidebar' | 'topbar'
  sticky={true}
  activeItemId="home"
  onNavigate={(item) => console.log('Navigated to', item)}
  actions={
    <>
      <WoodButton size="sm">Sign In</WoodButton>
      <WoodButton variant="primary" size="sm">Get Started</WoodButton>
    </>
  }
/>

Features:

• Horizontal and vertical orientations
• Sticky positioning with scroll detection
• Mobile-responsive with hamburger menu
• Nested submenu support
• Badge notifications
• Full keyboard navigation

WoodSpeciesShowcase

Interactive wood species preview and selector.

import { WoodSpeciesShowcase } from '@vanguard/wooden-ui-kit'

// As a selector
<WoodSpeciesShowcase
  layout="grid"              // 'grid' | 'list' | 'comparison'
  selectedSpecies={selectedSpecies}
  onSpeciesChange={(species) => setSelectedSpecies(species)}
  showDescriptions={true}
  showColorSwatches={true}
  showTechnical={true}
  interactive={true}
/>

// As a display (non-interactive)
<WoodSpeciesShowcase
  layout="comparison"
  interactive={false}
  showTechnical
/>

Features:

• Grid, list, and comparison layouts
• Color palette swatches for each species
• Technical specifications (grain pattern, density, warmth)
• Recommended use cases
• Interactive selection with controlled/uncontrolled modes

🎨 Theme Customization

CSS Custom Properties

All components expose CSS custom properties for runtime customization:

/* Global theme overrides */
:root {
  --wood-species: walnut;
  --wood-finish: satin;
  --wood-grain-intensity: 0.5;
  --wood-elevation-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  --wood-focus-ring-color: #d4a574;
  --wood-focus-ring-width: 3px;
  --wood-focus-ring-offset: 2px;
}

/* Species-specific overrides */
.wood-panel--oak {
  --wood-color-dark: #8b5a2b;
  --wood-color-medium: #a0785a;
  --wood-color-light: #c8a882;
  --wood-color-gold: #d4a574;
}

useWoodTheme Hook

Programmatic theme control:

import { useWoodTheme } from '@vanguard/wooden-ui-kit'

function ThemeSwitcher() {
  const { species, finish, setSpecies, setFinish } = useWoodTheme()

  return (
    <div>
      <select value={species} onChange={(e) => setSpecies(e.target.value)}>
        <option value="oak">Oak</option>
        <option value="walnut">Walnut</option>
        <option value="cherry">Cherry</option>
        <option value="mahogany">Mahogany</option>
      </select>
      <select value={finish} onChange={(e) => setFinish(e.target.value)}>
        <option value="natural">Natural</option>
        <option value="matte">Matte</option>
        <option value="satin">Satin</option>
        <option value="gloss">Gloss</option>
      </select>
    </div>
  )
}

Wood Species Configuration

Each wood species has unique characteristics:

| Species | Color Palette | Grain Pattern | Best For | |---------|---------------|---------------|----------| | Oak | Warm golden browns | Prominent, straight grain | Buttons, accents, highlights | | Walnut | Rich dark browns | Subtle, wavy grain | Panels, cards, backgrounds | | Cherry | Reddish warm tones | Fine, closed grain | Premium elements, CTAs | | Mahogany | Deep red-browns | Interlocked grain | Navigation, headers, footers |

🎯 TypeScript Support

Full TypeScript support with strict mode compliance:

import type {
  WoodSpecies,
  WoodFinish,
  GrainIntensity,
  WoodPanelProps,
  WoodButtonProps,
  WoodCardProps,
  UseWoodTextureReturn,
  WoodThemeContext,
} from '@vanguard/wooden-ui-kit'

// Type-safe component usage
const MyComponent: React.FC = () => {
  const species: WoodSpecies = 'walnut'
  const finish: WoodFinish = 'satin'
  const intensity: GrainIntensity = 'medium'

  return <WoodPanel species={species} finish={finish} />
}

♿ Accessibility

Vanguard Wooden UI Kit is WCAG 2.1 AA compliant:

Features

• Color Contrast: All text meets 4.5:1 minimum contrast ratio
• Focus Indicators: Visible focus rings with 3:1 contrast
• Keyboard Navigation: Full keyboard support (Tab, Enter, Space, Escape)
• ARIA Labels: Semantic HTML with appropriate ARIA attributes
• Screen Reader Support: Tested with NVDA, VoiceOver, and TalkBack
• Reduced Motion: Respects prefers-reduced-motion media query
• Touch Targets: Minimum 44x44px for interactive elements

Testing

# Run accessibility tests
npm run test:a11y

# Run axe-core automated tests
npm run test:axe

🌐 Browser Support

| Browser | Version | Support | Notes | |---------|---------|---------|-------| | Chrome | 90+ | ✅ Full | Primary test target | | Firefox | 88+ | ✅ Full | SVG filters tested | | Safari | 14.1+ | ✅ Full | macOS + iOS | | Edge | 90+ | ✅ Full | Chromium-based | | Opera | 76+ | ✅ Full | Chromium-based | | Samsung Internet | 14+ | ✅ Full | Mobile tested | | iOS Safari | 14.5+ | ✅ Full | iPhone + iPad | | Chrome Android | 90+ | ✅ Full | Mobile tested |

Not Supported:

• Internet Explorer 11
• Legacy Edge (pre-Chromium)
• Safari <14.1 (requires backdrop-filter)

Feature Detection:

import { detectWoodSupport } from '@vanguard/wooden-ui-kit/utils'

const { hasSvgFilters, hasBackdropFilter, isSupported } = detectWoodSupport()

if (!isSupported) {
  // Fallback to solid colors
  console.warn('Using fallback styling')
}

📊 Performance

Bundle Size

| Metric | Size | Budget | |--------|------|--------| | Core (gzipped) | ~35KB | <50KB ✅ | | Full Library | ~48KB | <50KB ✅ | | Single Component | ~8KB | <10KB ✅ | | CSS | ~12KB | <15KB ✅ | | Type Definitions | ~15KB | <20KB ✅ |

Performance Best Practices

• Tree-shaking: Import only needed components
• Code splitting: Lazy load heavy components
• Memoization: Components use React.memo for optimal re-renders
• CSS Variables: Theme changes don't trigger re-renders
• SVG Filters: Hardware-accelerated texture generation

// ✅ Good: Tree-shakeable import
import { WoodButton } from '@vanguard/wooden-ui-kit'

// ❌ Avoid: Importing entire library if not needed
import * as WoodUI from '@vanguard/wooden-ui-kit'

🛠 Development

Prerequisites

• Node.js 18+
• npm 9+ or yarn 1.22+
• React 18+

Setup

# Clone repository
git clone https://github.com/Dream-Pixels-Forge/vanguard-wooden-ui-kit.git
cd vanguard-wooden-ui-kit

# Install dependencies
npm install

# Start development server
npm run dev

# Run tests
npm run test

# Build library
npm run build

Available Scripts

# Development
npm run dev              # Start Vite dev server
npm run storybook        # Start Storybook

# Build
npm run build            # Build library
npm run build-storybook  # Build Storybook

# Testing
npm run test             # Run Vitest tests
npm run test:coverage    # Run with coverage
npm run test:watch       # Watch mode

# Quality
npm run lint             # ESLint check
npm run lint:fix         # Auto-fix issues
npm run format           # Prettier format
npm run format:check     # Prettier check
npm run typecheck        # TypeScript check

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

Quick Start

1. Fork the repository
2. Create a feature branch: git checkout -b feat/amazing-feature
3. Commit changes: git commit -m 'feat: add amazing feature'
4. Push to branch: git push origin feat/amazing-feature
5. Open a Pull Request

Development Guidelines

• Follow existing code style (Prettier + ESLint)
• Write tests for new components (minimum 80% coverage)
• Document all public APIs with JSDoc comments
• Ensure accessibility compliance (WCAG 2.1 AA)
• Update Storybook stories for visual components
• No breaking changes without major version bump

Issue Reporting

• Use GitHub Issues for bug reports and feature requests
• Include reproduction steps and code examples
• Specify browser and React version
• Attach screenshots for visual issues

📄 License

MIT License - see LICENSE file for details.

Copyright (c) 2026 Vanguard

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

🙏 Acknowledgments

• Inspired by traditional woodworking techniques and organic design patterns
• Built with modern web standards: SVG filters, CSS custom properties, React hooks
• Tested with industry-leading tools: Vitest, Testing Library, axe-core, Storybook

📞 Support

• Documentation: https://vanguard.github.io/wooden-ui-kit
• GitHub Issues: Report a bug
• Discussions: Community forum
• Twitter: @VanguardUI

Made with 🌲 by the Vanguard Team