essentism

A comprehensive, accessible React component library with zero-runtime CSS.

Features

• 🎨 Zero-runtime CSS — vanilla-extract at build time
• ♿ Accessible — Radix UI primitives with keyboard & ARIA support
• 🌙 Theming — Light/dark themes with CSS variables
• 📦 Tree-shakeable — Import only what you use
• 🔧 TypeScript — Full type safety

Installation

npm install essentism

Peer Dependencies

npm install react react-dom

Quick Start

import { Button, Input, Modal, lightTheme } from 'essentism';

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

Components (27+)

Form Controls

| Component | Description | |-----------|-------------| | Button | Primary, secondary, ghost variants with loading state | | Input | Text input with label, error, helper text | | Checkbox | Single checkbox with label | | Radio | Radio group with Radio.Group and Radio.Item | | Switch | Toggle switch | | Select | Dropdown with Select.Root, Trigger, Content, Item | | Textarea | Multi-line input with auto-grow | | Slider | Range slider |

Display

| Component | Description | |-----------|-------------| | Typography | h1-h6, body, caption, code variants | | Avatar | Image with initials fallback | | Badge | Status badges (success, warning, error) | | Card | Card with Header, Title, Content, Footer | | Separator | Horizontal/vertical divider | | Skeleton | Loading placeholder with shimmer | | Spinner | Loading spinner |

Feedback

| Component | Description | |-----------|-------------| | Alert | Info, success, warning, error alerts | | Progress | Progress bar with label | | Tooltip | Hover/focus tooltip |

Layout

| Component | Description | |-----------|-------------| | Box | Spacing utility | | Stack | Flexbox container | | Grid | CSS Grid container | | Container | Max-width container | | Spacer | Flex spacer |

Overlay

| Component | Description | |-----------|-------------| | Modal | Dialog with focus trap | | Popover | Positioned popover | | DropdownMenu | Dropdown menu |

Navigation

| Component | Description | |-----------|-------------| | Tabs | Tab navigation | | Accordion | Collapsible sections |

Utilities

| Component | Description | |-----------|-------------| | VisuallyHidden | Screen reader only content |

Theming

import { lightTheme, darkTheme } from 'essentism';

// Apply theme class to root element
<div className={lightTheme}>...</div>
<div className={darkTheme}>...</div>

Custom Themes

import { createTheme } from '@vanilla-extract/css';
import { tokens } from 'essentism';

export const customTheme = createTheme(tokens, {
  color: {
    primary: '#8b5cf6',
    // ... other tokens
  },
});

Development

npm install          # Install dependencies
npm run storybook    # Start Storybook
npm run build        # Build library
npm run typecheck    # Type check

License

MIT