@orchestr-sh/motif

Component Library & Design System

A production-ready component library built with React, TypeScript, and Tailwind CSS. Consistent, accessible, and beautifully designed.

GitHubnpm Package
$ npm install @orchestr-sh/motif

Modular. Lightweight. Flexible.

Import only what you need, customize everything.

Core

Foundation files including design tokens, reset styles, and typography

Components

Pre-built UI elements like buttons, cards, badges, and form inputs

Utilities

Layout, spacing, and color utility classes for flexibility

Zero Cross-Dependencies

All files depend only on tokens.css. There are no cross-component dependencies, enabling selective importing—developers can load the entire library via index.css or cherry-pick specific modules based on project needs.

Get started in seconds

Install and start building beautiful interfaces.

1

Install

npm install @orchestr-sh/motif
2

Import components

/* Required */
@import '@orchestr-sh/core/tokens.css';
@import '@orchestr-sh/core/reset.css';   /* optional but recommended */

/* Pick what you need */
@import '@orchestr-sh/components/button.css';
@import '@orchestr-sh/components/card.css';
@import '@orchestr-sh/utilities/layout.css';
@import '@orchestr-sh/utilities/spacing.css';
3

Customize with CSS variables

:root {
  --color-primary: #8b5cf6;
  --color-secondary: #6366f1;
  --spacing-unit: 0.5rem;
  --font-family-base: 'Inter', sans-serif;
}

Override tokens in your own :root block after importing tokens.css to customize colors, spacing, typography, and more.

Start building beautiful UIs

Use Motif to accelerate your development and maintain design consistency.

View on GitHubnpm Package