installation

installation

install meridian directly from the github repository:

# bun
bun add github:bxrne/meridian

# npm
npm install github:bxrne/meridian

# pnpm
pnpm add github:bxrne/meridian

# yarn
yarn add github:bxrne/meridian

pinning a version

to pin to a specific release tag or commit:

# pin to a release tag
bun add github:bxrne/meridian#v0.1.0

# pin to a specific commit
bun add github:bxrne/meridian#abc1234

setup

add the CSS styles to your application’s entry point:

// main.tsx or App.tsx
import 'meridian/styles.css';

usage

use components directly in your code:

import { Button, Badge, Card, CardHeader, CardTitle, CardContent } from 'meridian';

function App() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>system status</CardTitle>
      </CardHeader>
      <CardContent>
        <Badge variant="success">operational</Badge>
        <Button intent="primary">view details</Button>
      </CardContent>
    </Card>
  );
}

typescript

meridian is written in typescript and exports all prop types:

import type { ButtonProps, ButtonIntent, BadgeVariant } from 'meridian';

// use types for custom wrappers
const MyButton = (props: ButtonProps) => {
  return <Button {...props} />;
};

styling

meridian uses CSS custom properties (variables) for theming. you can override these in your own CSS:

:root {
  /* override the accent color */
  --color-accent: hsl(200, 90%, 50%);

  /* use a different font stack */
  --font-sans: system-ui, sans-serif;
}

the library automatically supports dark mode via prefers-color-scheme media query.

requirements

• react 18+ or 19+
• a bundler that supports ES modules (vite, webpack, esbuild, etc.)