Optic UI

A modern, accessible UI component library built with React, TypeScript, and Tailwind CSS.

Features

• 🎨 Modern and clean design with opticmorphism theme
• ♿ Full accessibility support (WCAG 2.1)
• 🔍 SEO-optimized components and metadata
• 🤖 LLM-friendly semantic structure
• 🎯 TypeScript support
• 🎭 Customizable theming with CSS variables
• 📱 Responsive components
• 🧪 Comprehensive test coverage
• ✨ Smooth, accessible animations
• 🌙 Dark mode support

Component Layers

The library is organized into several layers, each focusing on specific aspects of UI development:

Layout Layer

Our layout components are specifically designed to be both SEO-friendly and LLM-readable, providing clear semantic structure and content hierarchy:

• Page: A structural component for page-level layout with built-in SEO and accessibility features

  • Dynamic meta tags management
  • Semantic HTML structure
  • SEO optimization
  • Accessibility attributes

• Section: Semantic content organization with clear hierarchy

  • Proper heading structure for SEO
  • ARIA landmarks for accessibility
  • Clear content boundaries for LLMs
  • Descriptive titles and descriptions

• Container: Content width management with responsive behavior

  • Consistent layout constraints
  • Clear content boundaries
  • Improved readability for both users and LLMs
  • Responsive breakpoints

• Grid: Structured content layout system

  • Semantic content relationships
  • Responsive grid patterns
  • Clear content organization
  • LLM-friendly content structure

• Stack: Vertical content organization

  • Clear content hierarchy
  • Consistent spacing
  • Improved readability
  • Semantic content flow

Interactive Layer

• Button: Accessible button with various styles and states
• Dialog: Modal dialog with focus management
• Dropdown: Accessible dropdown menu
• Modal: Full-screen modal with focus trap
• Popover: Contextual popover with keyboard navigation
• Tooltip: Accessible tooltip with ARIA attributes

Display Layer

• Avatar: User avatar with fallback
• Badge: Status and notification badges
• Card: Content container with header and body
• Image: Accessible image with loading states

Form Layer

• Input: Text input with validation
• Checkbox: Accessible checkbox with label
• Select: Custom select dropdown
• Progress: Progress indicator

Live Layer

• Alert: Status messages
• Toast: Temporary notifications
• Progress: Progress indicators

Navigation Layer

• Menu: Navigation menu
• Tabs: Tabbed interface
• Breadcrumb: Navigation breadcrumbs

Accessibility Features

All components include:

• ARIA attributes
• Keyboard navigation
• Focus management
• Screen reader support
• Color contrast compliance
• Semantic HTML
• Reduced motion support
• Skip links
• Focus visible styles
• Dark mode support

Animation System

Our animation system is built with accessibility in mind:

Motion Preferences

• Respects prefers-reduced-motion
• Customizable durations
• Smooth easing functions
• Performance optimized

Animation Tokens

--duration-fast: 150ms;
--duration-normal: 200ms;
--duration-slow: 300ms;
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-in: cubic-bezier(0.4, 0, 1, 1);

Available Animations

• Fade in/out
• Slide in/out
• Scale in/out
• Spin
• Bounce
• Custom transitions

Theme System

Our opticmorphism theme provides:

Design Tokens

• Color system
• Typography
• Spacing
• Border radius
• Shadows
• Blur effects
• Animations

Dark Mode

• Automatic dark mode detection
• Customizable dark theme
• Smooth transitions
• High contrast support

LLM and SEO Optimization

Our layout components are specifically designed to be both LLM-friendly and SEO-optimized:

LLM-Friendly Features

• Clear semantic structure
• Consistent content hierarchy
• Descriptive headings and labels
• Logical content flow
• Clear content boundaries
• Meaningful component relationships

SEO Benefits

• Semantic HTML5 elements
• Proper heading hierarchy
• Meta tag management
• Structured content
• Clear content relationships
• Accessible landmarks

Getting Started

npm install optic-ui

Basic Usage

import { Button, Card, Page, Section, Container, Grid } from 'optic-ui';

const MyPage = () => (
	<Page
		title="My Page"
		description="A detailed description of the page"
		keywords={['keyword1', 'keyword2']}
	>
		<Section
			id="main-content"
			title="Welcome"
			description="Explore our amazing features"
		>
			<Container>
				<Grid columns={3}>
					<Card title="Feature 1">
						<Button>Learn More</Button>
					</Card>
					{/* More cards */}
				</Grid>
			</Container>
		</Section>
	</Page>
);

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Run tests
npm test

# Build library
npm run build

Contributing

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

License

MIT © [Your Name]