Intergalactic is a constantly developing design system of React components, guidelines and UX patterns for building interfaces. You can explore components in our documentation website.

---

Features ✨

• 70+ components for your design (you can also find them in the Figma Community)
• High-quality React components out of the box
• Written in TypeScript with predictable static types
• Whole package of design resources and development tools
• Powerful collection of charts
• Theme customization in every detail (find details in the Design tokens guide)

Browser support

• Google Chrome
• Safari (two last versions)
• Mozilla Firefox
• Microsoft Edge
• Opera

---

Installation

pnpm add @semcore/ui --shamefully-hoist

or

npm install @semcore/ui

After the installation, all components will be available at @semcore/ui/{{component_name}}.

Testing

The project uses a comprehensive testing setup with multiple testing frameworks and tools:

Testing tools

• Vitest - Unit and component tests
• Playwright - Browser automation and E2E tests
• React Testing Library - Component testing utilities
• Axe - Accessibility testing
• @guidepup - Screen reader testing (NVDA)

Running tests

Docker ensures consistent rendering for image snapshot tests across different environments.

# Build Docker image (first time or after dependency changes)
pnpm test:setup

# Run all unit tests
pnpm test

# Run unit tests for a specific component
pnpm test button

# Run browser tests in Docker
pnpm browser-test:docker

# Run browser tests in Docker for a specific component
pnpm browser-test:docker button

# Run accessibility tests
pnpm axe-test

# Run NVDA tests (Windows only, requires setup)
pnpm nvda-test:setup   # first time
pnpm nvda-test

Configuration and setup

Test configurations are located in the project root:

• vitest.config.mts - Vitest configuration for unit tests
• playwright.*.config.ts - Various Playwright configurations for different test types

Testing utilities and shared test helpers are located in ./tools/testing-utils/:

• setupTests.ts - Global test setup with custom matchers and mocks
• vitest.ts - Extended Vitest test runner with Allure integration
• playwright.ts - Extended Playwright test runner with accessibility helpers
• testing-library.ts - Re-exports React Testing Library utilities

Mocks and utilities

The testing setup includes:

• ResizeObserver mock for components using resize detection
• matchMedia mock for responsive components
• SVGElement.getBBox mock for SVG-based components
• Custom matchers from @testing-library/jest-dom: toHaveStyle, toHaveFocus, toHaveAttribute, toBeInTheDocument

Tests are located in __tests__ directories within each component package, for example: semcore/button/__tests__/.

How to contribute to the project

Learn more about contributing ›

Contributors

Thanks to all contributors, you are so awesome! ❤️

• Roman Lysov
• Michael Sereniti
• Julia Mnizhek
• Sheila Sheikh
• Ilia Brauer
• Elena Krasnopolskaia
• Ruslan Gaiazov
• Elena Khaas
• Tatana Iliukhina
• and many others from Semrush team

I found a bug! 🕵️‍

Great job!

You always can open an issue in the repository. We'll be glad to help!

I have a question or feature request! 🙋

You can also open an issue. We will review it soon!