mParticle Aquarium

mParticle Component Library built on top of Ant Design.

Components That Scale

Installation

Requirements

| Dependency | Version | Notes | | ---------- | ----------- | ------------------------ | | React | >=19.0.0 | React 19+ | | React DOM | >=19.0.0 | Must match React version | | Node.js | >=24.12.0 | For development |

Quick Start

yarn add @mparticle/aquarium antd@6 dayjs@1

Or with npm:

npm install @mparticle/aquarium antd@6 dayjs@1

Setup

Add the CSS reset to your app entry point (_app.tsx, layout.tsx, or index.tsx):

import 'antd/dist/reset.css'

Usage

import { Button, Space, Typography } from '@mparticle/aquarium'
import { PaddingSm } from '@mparticle/aquarium/dist/style'

export const MyComponent = () => {
  return (
    <Space direction="vertical">
      <Typography.Title level={3}>Hello Aquarium</Typography.Title>
      <Typography.Text>Successfully installed!</Typography.Text>
      <Space>
        <Button type="primary" style={{ paddingLeft: PaddingSm }}>
          Primary
        </Button>
        <Button>Default</Button>
      </Space>
    </Space>
  )
}

Development

Clone the repository and install dependencies:

git clone [email protected]:mParticle/aquarium.git
cd aquarium
npm install

Run Storybook for local development:

npm run storybook

Run unit tests:

npm run test-storybook

Contributing

See CONTRIBUTING.md.

Please make sure any new or updated components are present, tested and verified within Storybook.

Support

[email protected]

License

mParticle's Aquarium is available under the Apache License, Version 2.0. See the LICENSE file for more info.