DOCSEARCHbyAlgolia
Submit Docs

Intergalactic Design System

repository·release/v18·Indexed 41 days ago

https://github.com/semrush/intergalactic

A comprehensive React design system built with TypeScript, featuring over 70 components, guidelines, and UX patterns. It provides deep theme customization via design tokens and a robust set of development tools. Components are available as individual packages under the @semcore scope, such as @semcore/ui, @semcore/button, and @semcore/data-table.

Tokens
249.4K
Snippets
805
Records
1.7K
Agent score
51%

What's inside Intergalactic

  1. Overview of DatePicker types

    release/v18

    The DatePicker component is used to input or select specific dates or date ranges. It supports four primary modes of operation:

    • Date picker: Selects a single day. The dropdown closes automatically upon selection.
    • Date range picker: Selects a range of days or weeks. Typically displays two month blocks and requires an "Apply" button to confirm the selection.
    • Month picker: Selects a single month. The dropdown closes automatically upon selection.
    • Month range picker: Selects a range of months. Typically displays two month blocks and requires an "Apply" button to confirm the selection.

  2. Overview of Intergalactic features and support

    release/v18

    Intergalactic is a React-based design system providing 70+ components, TypeScript support, and deep theme customization via design tokens.

    Browser Support:

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

  3. Overview of Intergalactic Design System

    release/v18

    Intergalactic is a constantly developing design system consisting of UI components, guidelines, and UX patterns. It provides a comprehensive set of tools for building interfaces, including:

    • Components: Over 56 React components available out of the box.
    • Charts: 14+ chart types built with d3.js and a focus on accessibility.
    • Tables: Table components designed for data visualization using CSS Flexbox.
    • Icons: A library of over 250 icons.
    • Filter Patterns: Design patterns specifically for data filtering.
    • UX Patterns: A collection of Semrush UX patterns to optimize user journeys.
    • Design Tokens & Themization: Tools to equip components with custom themes.
    • Content: Principles and recommendations for writing interface copy.

  4. Use the Slider component

    release/v18

    The Slider component is used for selecting values within a specified range. It is ideal for scenarios where users need to choose an approximate value rather than a precise one, such as adjusting volume or color brightness.

    When to use a Slider

    • To visualize a range for approximate value selection.
    • To visualize the maximum range of an InputNumber.
    • When the user needs to specify a value that doesn't require exact precision (e.g., brightness, volume).

    Component Composition

    A Slider is composed of:

    • Slider.Knob: The interactive handle used to move through the range.
    • Slider.Bar: The visual track representing the range.
    • Value: The current selected value.
    • Slider.Options (Optional): A container for Slider.Item elements to provide discrete markers or options along the track.

  5. Understand the Semrush Design System License and Terms of Use

    release/v18

    The Semrush Design System (including Software, documentation, Figma libraries, and guidelines) is provided under a revocable, free of charge, non-exclusive license.

    Software License

    Software components provided in public repositories are licensed under the MIT License. This allows you to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the software, provided that the original copyright notice and permission notice are included in all copies or substantial portions of the software.

    Key Terms

    • Semrush Design System: The set of software, documentation, Figma libraries, and guidelines.
    • Software: The part of the Design System made available in public repositories as open source.
    • Application: Your software/materials that contain or use parts of the Semrush Design System.

    Limitations and Ownership

    • No Warranty: The system is provided "AS IS" without any warranties of merchantability, fitness for a particular purpose, or non-infringement. Semrush does not guarantee reliability, accuracy, or error-free use.
    • Intellectual Property: Semrush retains all legal rights, titles, and interests in the Semrush Design System and its associated Intellectual Property Rights.
    • Indemnification: You are solely responsible for your Applications and must indemnify Semrush against claims arising from your use of the Design System or your breach of these terms.
    THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.

  6. Use the InlineInput component

    release/v18

    InlineInput is a single-line text field designed for switching between view-only and text editing modes without reloading the page. It is ideal for editing titles, descriptions, or tags in compact interfaces where space is limited.

    When to use:

    • To switch between view-only and editing modes seamlessly.
    • When data is placed tightly in the UI and you need to save space.
    • For non-primary data entry, such as adding notes or additional information in cards.

    When NOT to use:

    • Do not use InlineInput inside a standard form alongside regular inputs for primary data submission. Use regular inputs for main system data transfers.

  7. Use FilterTrigger for active filter states

    release/v18

    FilterTrigger is a specialized type of BaseTrigger designed to represent the active state of a filter. It is typically placed before the data it filters to help users understand which filters are currently applied, reset them, or change them.

    Key Capabilities

    • Visual Feedback: Quickly shows whether filters are selected or inactive.
    • Filter Management: Allows users to reset or modify filter selections.
    • Counter Support: Can display a counter to indicate the number of additional filters applied (recommended for Advanced filters).

  8. Use FeaturePopover to draw user attention

    release/v18

    The FeaturePopover component is used to highlight specific interface parts, suggest next steps, or promote new features. It is designed for brief, promotional, or onboarding information rather than detailed instructions.

    When to use:

    • To draw attention to a specific interface control.
    • To guide a user toward their next logical step in a workflow.

    Key Composition Elements:

    • FeaturePopover.Trigger: The element that triggers the popover.
    • FeaturePopover.Spot: An animated dot located at the corner of the target element.
    • FeaturePopover.Popper: The container for the content.
    • FeaturePopover.StepCounter: An optional component to show progress in a walkthrough.
    • closeIcon: A property for FeaturePopover.Popper to handle closing.
    • Content: The title, description, and buttons.