Mournshire

A modern React component library built with atomic design principles, featuring advanced theming and configuration via .mourn files.

Features

- 🧩 Atomic Design: 15+ atomic components, molecular components
- 🎨 Advanced Theming: 6 built-in themes, CSS variables
- ⚙️ Configuration System: .mourn files for customization
- 🎭 Provider Architecture: RoundTable provider system
- 📦 Tree-Shakeable: Only include what you need
- 💪 TypeScript: Full type safety
- ♿ Accessible: WCAG AA compliant

Installation

``bash
npm install mournshire react react-dom iconoir-react


or

yarn add mournshire react react-dom iconoir-react

or

pnpm add mournshire react react-dom iconoir-react
`

Quick Start

$3

Create src/mourn.config.ts:

`typescript
import { setGlobalMournConfig } from 'mournshire/environment';

setGlobalMournConfig({
providers: {
theme: {
enabled: true,
defaultTheme: 'dark'
}
}
});
`

$3

`tsx
import './mourn.config';
import { RoundTable } from 'mournshire/providers';

function App() {
return (



);
}
`

$3

`tsx
import { Button, Card, Icon } from 'mournshire';

function MyComponent() {
return (

variant="solid"
color="primary"
icon={}
>
Click Me


);
}
``

Documentation

- Component Library
- .mourn Configuration
- Design Standards
- CSS Variables

Components

$3

Button, Card, Icon, CheckBox, Input, TextArea, Badge, ProgressIndicator, Slider, Toggle, Dropdown, CodeBlock, Scrollbar, SegmentedControl, Divider, RadioButton, FilePicker, Notification, Search, FallingLeaves

$3

Navigation, CollapsibleMenu, InteractiveComponentDisplay, ReadmeDisplay

$3

- ThemeProvider - Theme management
- AuthProvider - Authentication
- ToastProvider - Notifications
- LoadingProvider - Loading states
- ModalProvider - Modal dialogs
- SettingsProvider - User preferences
- EnvironmentProvider - Configuration management

License

MIT © dcorm