### Install Semcore UI Package

Source: https://github.com/semrush/intergalactic/blob/release/v16/website/docs/get-started-guide/dev-starter-guide/dev-starter-guide.md

Installs the Semcore UI component library using package managers like pnpm or npm. This single package bundles all components, simplifying the setup process for your project.

```sh
pnpm add @semcore/ui
```

```sh
npm install @semcore/ui
```

--------------------------------

### Basic usage of SidePanel

Source: https://github.com/semrush/intergalactic/blob/release/v16/website/docs/components/side-panel/side-panel-code.md

Demonstrates the fundamental usage of the SidePanel component. This example shows the default behavior and setup.

```tsx
export Demo from 'stories/components/side-panel/docs/examples/basic_example.tsx';
```

--------------------------------

### Install @semcore/ui Package

Source: https://github.com/semrush/intergalactic/blob/release/v16/semcore/ui/README.md

Installs the @semcore/ui package using npm. This is the primary command to get started with the Semrush design system.

```sh
npm install @semcore/ui
```

--------------------------------

### Basic DropdownMenu Usage

Source: https://github.com/semrush/intergalactic/blob/release/v16/website/docs/components/dropdown-menu/dropdown-menu-code.md

Demonstrates the fundamental integration of the DropdownMenu component. This example showcases the default setup for displaying a list of options.

```tsx
export { default } from 'stories/components/dropdown-menu/docs/examples/basic.tsx';
```

--------------------------------

### Basic Card Usage Example (TSX)

Source: https://github.com/semrush/intergalactic/blob/release/v16/website/docs/components/card/card-code.md

Demonstrates the fundamental usage of the Card component. This example showcases how to render a simple card with essential content, serving as a starting point for integration.

```tsx
export Demo from 'stories/components/card/docs/examples/basic_example.tsx';
```

--------------------------------

### Clone Repository and Install Dependencies

Source: https://github.com/semrush/intergalactic/blob/release/v16/CONTRIBUTING.md

Clones the intergalactic repository from GitHub and installs all necessary project dependencies using pnpm. This is the initial setup step for development.

```shell
git clone git@github.com:semrush/intergalactic.git && cd intergalactic
pnpm install
```

--------------------------------

### Install @semcore/sticky

Source: https://github.com/semrush/intergalactic/blob/release/v16/semcore/sticky/README.md

Installs the @semcore/sticky package using npm.

```sh
npm install @semcore/sticky
```

--------------------------------

### Install @semcore/stylelint-plugin

Source: https://github.com/semrush/intergalactic/blob/release/v16/semcore/stylelint-plugin/README.md

Installs the @semcore/stylelint-plugin package using npm. This is the first step to integrate the plugin into your project.

```sh
npm install @semcore
```

--------------------------------

### Install @semcore/select

Source: https://github.com/semrush/intergalactic/blob/release/v16/semcore/select/README.md

Installs the @semcore/select component using npm. This is the primary method to add the component to your project.

```sh
npm install @semcore/select
```

--------------------------------

### NoticeGlobal Basic Usage Example

Source: https://github.com/semrush/intergalactic/blob/release/v16/website/docs/components/notice-global/notice-global-code.md

Demonstrates the basic usage of the NoticeGlobal component by importing an example from a separate file.

```tsx
<script lang="tsx">
  export Demo from 'stories/components/notice-global/docs/examples/basic_usage.tsx';
</script>
```

--------------------------------

### Install @semcore/base-trigger

Source: https://github.com/semrush/intergalactic/blob/release/v16/semcore/base-trigger/README.md

Installs the @semcore/base-trigger package using npm.

```sh
npm install @semcore/base-trigger
```

--------------------------------

### Install @semcore/bulk-textarea

Source: https://github.com/semrush/intergalactic/blob/release/v16/semcore/bulk-textarea/README.md

Instructions for installing the @semcore/bulk-textarea package using npm.

```sh
npm install @semcore/bulk-textarea
```

--------------------------------

### Install @semcore/side-panel

Source: https://github.com/semrush/intergalactic/blob/release/v16/semcore/side-panel/README.md

Installs the @semcore/side-panel package using npm. This command fetches and installs the necessary files for the side panel component into your project's node_modules directory.

```sh
npm install @semcore/side-panel
```

--------------------------------

### Install @semcore/button

Source: https://github.com/semrush/intergalactic/blob/release/v16/semcore/button/README.md

Use npm to install the @semcore/button package.

```shell
npm install @semcore/button
```

--------------------------------

### Install @semcore/pagination

Source: https://github.com/semrush/intergalactic/blob/release/v16/semcore/pagination/README.md

Installs the @semcore/pagination package using npm. This is the primary method to add the pagination component to your project.

```shell
npm install @semcore/pagination
```

--------------------------------

### Install @semcore/inline-input

Source: https://github.com/semrush/intergalactic/blob/release/v16/semcore/inline-input/README.md

Instructions for installing the @semcore/inline-input package using npm. This command adds the component to your project's dependencies.

```sh
npm install @semcore/inline-input
```

--------------------------------

### Basic NoticeBubble Example

Source: https://github.com/semrush/intergalactic/blob/release/v16/website/docs/components/notice-bubble/notice-bubble-code.md

Demonstrates the basic usage of the NoticeBubble component. This example shows how to render a simple notice.

```tsx
<script lang="tsx">
  export Demo from 'stories/components/notice-bubble/docs/examples/basic_notice.tsx';
</script>
```

--------------------------------

### Install @semcore/illustration

Source: https://github.com/semrush/intergalactic/blob/release/v16/semcore/illustration/README.md

Installs the @semcore/illustration package using npm. This is the standard method for adding the package to your project dependencies.

```sh
npm install @semcore/illustration
```

--------------------------------

### Bar Chart Basic Usage

Source: https://github.com/semrush/intergalactic/blob/release/v16/website/docs/data-display/bar-chart/bar-chart-code.md

Demonstrates the fundamental setup for a bar chart component. This example serves as a starting point for creating various bar chart visualizations.

```tsx
export { Demo } from 'stories/components/d3-chart/docs/examples/bar-chart/basic-usage.tsx';
```

--------------------------------

### Chart Legend Integration

Source: https://github.com/semrush/intergalactic/blob/release/v16/website/docs/data-display/d3-chart/d3-chart-code.md

Provides an example for integrating a chart legend, referencing a more detailed guide for comprehensive usage. This snippet likely demonstrates the basic setup for displaying a legend.

```tsx
export Demo from 'stories/components/d3-chart/docs/examples/d3-chart/chart-legend.tsx';
```

--------------------------------

### Importing Box Component

Source: https://github.com/semrush/intergalactic/blob/release/v16/website/docs/get-started-guide/dev-starter-guide/dev-starter-guide.md

Demonstrates how to import the foundational Box component from the '@semcore/base-components' library. This component serves as the base for many other UI elements.

```jsx
import { Box } from '@semcore/base-components';
```

--------------------------------

### Basic usage

Source: https://github.com/semrush/intergalactic/blob/release/v16/website/docs/components/spin/spin-code.md

Demonstrates the basic usage of the Spin component by importing an example from a separate file.

```tsx
export Demo from 'stories/components/spin/docs/examples/basic_example.tsx';
```

--------------------------------

### FeedbackYesNo Basic Usage Example

Source: https://github.com/semrush/intergalactic/blob/release/v16/website/docs/patterns/feedback-yes-no/feedback-yes-no-code.md

Demonstrates the basic usage of the FeedbackYesNo component. This example imports a demo component from a specified path.

```tsx
<script lang="tsx">
  export Demo from 'stories/patterns/ux-patterns/feedback-yes-no/docs/examples/feedback-yes-no-example.tsx';
</script>
```

--------------------------------

### Basic Radar Chart Usage

Source: https://github.com/semrush/intergalactic/blob/release/v16/website/docs/data-display/radar-chart/radar-chart-code.md

Demonstrates the fundamental setup and rendering of a Radar chart. This example shows the core component structure.

```tsx
export Demo from 'stories/components/d3-chart/docs/examples/radar-chart/basic-usage.tsx';
```

--------------------------------

### Tooltip Component Examples

Source: https://github.com/semrush/intergalactic/blob/release/v16/website/docs/components/tooltip/tooltip.md

Demonstrates the usage of Semrush UI Tooltip, Hint, and DescriptionTooltip components. It shows how to configure placement, theme, and content for each component type, allowing users to select different variations via a playground interface.

```tsx
import React from 'react';

import Button from '@semcore/ui/button';
import Tooltip, { Hint, DescriptionTooltip } from '@semcore/ui/tooltip';
import { Box, Flex } from '@semcore/ui/base-components';
import { Text } from '@semcore/ui/typography';
import PlaygroundGeneration from '@components/PlaygroundGeneration';
import Link from '@semcore/ui/link';
import FileExportM from '@semcore/ui/icon/FileExport/m';

const PLACEMENT = [
  'top-start',
  'top',
  'top-end',
  'right-start',
  'right',
  'right-end',
  'bottom-start',
  'bottom',
  'bottom-end',
  'left-start',
  'left',
  'left-end',
];

const EVENT = ['hover', 'click', 'focus'];
const components = [Hint, Tooltip, DescriptionTooltip];

const App = PlaygroundGeneration((createGroupWidgets) => {
  const { radio, select } = createGroupWidgets('Tooltip');

  const component = select({
    key: 'component',
    defaultValue: 'Tooltip',
    label: 'Component',
    options: components.map((component) => ({
      name: component.displayName,
      value: component.displayName,
    })),
  });

  const placement = select({
    key: 'placement',
    defaultValue: 'top',
    label: 'Placement',
    options: PLACEMENT.map((value) => ({
      name: value,
      value,
    })),
  });
  const theme = select({
    key: 'theme',
    defaultValue: 'default',
    label: 'Theme',
    options: [
      {
        name: 'default',
        value: 'default',
      },
      {
        name: 'warning',
        value: 'warning',
      },
      {
        name: 'invert',
        value: 'invert',
      },
    ],
  });

  if (component === 'Hint') {
    return (
      <Hint
        title='Export to PDF'
        placement={placement}
        theme={theme}
      >
        <Button>
          <Button.Addon>
            <FileExportM />
          </Button.Addon>
        </Button>
      </Hint>
    );

  } else if (component === 'DescriptionTooltip') {
    return (
      <DescriptionTooltip
        placement={placement}
        theme={theme}
      >
        <DescriptionTooltip.Trigger>
          <Button>Additional information</Button>
        </DescriptionTooltip.Trigger>
        <DescriptionTooltip.Popper>
          <Text tag='p' mb={1} bold>Additional information</Text>
          <Text tag='p' mb={3}>
            Use this tooltip type when you need to show a lot of additional information.
          </Text>
          <Text tag='p'>It may contain several paragraphs and interactive elements (for example, <Link href='https://semrush.com'>links</Link>).
          </Text>
        </DescriptionTooltip.Popper>
      </DescriptionTooltip>
    );
  } else {
    return (
      <Tooltip
        placement={placement}
        theme={theme}
        title='Default tooltip contains additional information about the feature.'
      >
        <Button>
          Button
        </Button>
      </Tooltip>
    );
  }
});

```

--------------------------------

### ProductHead Example

Source: https://github.com/semrush/intergalactic/blob/release/v16/website/docs/components/product-head/product-head-code.md

Demonstrates the usage of the ProductHead component, likely showcasing its features and integration points. This snippet is sourced from an extended example file.

```tsx
export Demo from 'stories/components/product-head/docs/examples/extended_example.tsx';
```

--------------------------------

### Vitest Docker Test Commands

Source: https://github.com/semrush/intergalactic/blob/release/v16/CONTRIBUTING.md

Commands for managing and running tests using Vitest within a Docker environment. Includes setup, starting the runner, executing tests, and updating snapshots.

```shell
pnpm test:setup
pnpm test:docker
pnpm test:docker run
pnpm test:docker -- -u
pnpm test:docker button
pnpm test:docker button -- -u
```

--------------------------------

### InputPhone: Unknown Country/Number Format Example (TSX)

Source: https://github.com/semrush/intergalactic/blob/release/v16/website/docs/components/input-phone/input-phone-code.md

Demonstrates the InputPhone component when neither the country nor the number format is known beforehand. The input is pre-filled with a '+' symbol, indicating the start of an international number.

```tsx
export Demo from 'stories/components/input-phone/docs/examples/unknown_country_and_number_format.tsx';
```

--------------------------------

### Box Component Example (TSX)

Source: https://github.com/semrush/intergalactic/blob/release/v16/website/docs/layout/box-system/box-system-code.md

Demonstrates the usage of the Box component for setting element size, paddings, and margins. This example showcases its practical application in UI layout.

```tsx
export Demo from 'stories/components/flex-box/docs/examples/box.tsx';
```

--------------------------------

### TimePicker React Playground Example

Source: https://github.com/semrush/intergalactic/blob/release/v16/website/docs/components/time-picker/time-picker.md

Demonstrates the usage of the TimePicker component in a React application. It showcases how to configure various properties like size, state (normal, invalid, valid), 12-hour format, and disabled state using a playground setup.

```tsx
import React from 'react';

import Timepicker from '@semcore/time-picker';
import PlaygroundGeneration from '@components/PlaygroundGeneration';

const SIZES = ['m', 'l'];
const STATES = ['normal', 'invalid', 'valid'];

const d = new Date();

const App = PlaygroundGeneration(
  (createGroupWidgets) => {
    const { empty, bool, radio, select, onChange } = createGroupWidgets('Timepicker');

    const value = empty({
      key: 'value',
      defaultValue: `${d.getHours()}:${d.getMinutes()}`,
    });
    const size = radio({
      key: 'size',
      defaultValue: 'm',
      label: 'Size',
      options: SIZES,
    });

    const state = select({
      key: 'state',
      defaultValue: 'normal',
      label: 'State',
      options: STATES.map((value) => ({
        name: value,
        value,
      })),
    });

    const is12Hour = bool({
      key: 'is12Hour',
      defaultValue: false,
      label: '12-hour format',
    });

    const disabled = bool({
      key: 'disabled',
      defaultValue: false,
      label: 'Disabled',
    });

    return (
      <Timepicker
        aria-label='TimePicker example'
        size={size}
        state={state}
        disabled={disabled}
        is12Hour={is12Hour}
        value={value}
        onChange={(value) => onChange('value', value)}
      />
    );
  },
  {
    filterProps: ['onChange', 'value'],
  },
);

export default App;
```

--------------------------------

### Run Storybook for Component Playground

Source: https://github.com/semrush/intergalactic/blob/release/v16/CONTRIBUTING.md

Starts the Storybook development server, providing an interactive playground for developing and viewing components. The playground is accessible at http://localhost:6006.

```shell
pnpm storybook
```

--------------------------------

### Basic Usage of Compact Horizontal Bar Chart (TSX)

Source: https://github.com/semrush/intergalactic/blob/release/v16/website/docs/data-display/bar-horizontal-compact/bar-horizontal-compact-code.md

Illustrates the fundamental implementation of the compact horizontal bar chart. This example serves as a starting point for integrating the chart into your application, showcasing its core functionality.

```tsx
export Demo from 'stories/components/d3-chart/docs/examples/bar-horizontal-compact/basic_usage.tsx';
```

--------------------------------

### Example: Using aria-live="off" with role="timer"

Source: https://github.com/semrush/intergalactic/blob/release/v16/website/docs/core-principles/a11y/a11y-general.md

Demonstrates the correct implementation for a timer element. Using `role="timer"` with `aria-live="off"` is recommended for full compatibility, ensuring timers are handled correctly by assistive technologies.

```html
<div role="timer" aria-live="off">
  Time remaining: 00:30
</div>
```

--------------------------------

### Basic Usage of Area Chart (TSX)

Source: https://github.com/semrush/intergalactic/blob/release/v16/website/docs/data-display/area-chart/area-chart-code.md

Demonstrates the fundamental usage of the Area chart component. This example sets up a standard area chart, showcasing its default rendering capabilities. It serves as a starting point for implementing area charts in your application.

```tsx
export Demo from 'stories/components/d3-chart/docs/examples/area-chart/basic-usage.tsx';
```

--------------------------------

### Install Semcore Grid Package

Source: https://github.com/semrush/intergalactic/blob/release/v16/semcore/grid/README.md

Installs the @semcore/grid package using npm. This package is deprecated and users should migrate to @semcore/base-components.

```shell
npm install @semcore/grid
```

--------------------------------

### React Scatterplot Chart Example

Source: https://github.com/semrush/intergalactic/blob/release/v16/website/docs/data-display/scatterplot-chart/scatterplot-chart.md

This snippet demonstrates how to use the ScatterPlot component from '@semcore/d3-chart' in a React application. It includes setup for data generation, chart configuration via props like direction, axes visibility, tooltip, and legend, and integrates with a playground generation utility.

```tsx
import React from 'react';
import PlaygroundGeneration from '@components/PlaygroundGeneration';
import { chartPlayground } from '@components/ChartPlayground';
import { Chart, ScatterPlotChartProps } from '@semcore/d3-chart';

const data = [...Array(25).keys()].map((d, i) => ({
  x: i,
  category1: Math.random() * 10,
  category2: Math.random() * 10,
  value: Math.round(Math.random() * 10),
}));

const App = PlaygroundGeneration((preview) => {
  const { select, radio, label, bool } = preview('Chart.ScatterPlot');

  const {
    direction,
    alignItems,
    showXAxis,
    showYAxis,
    showTooltip,
    showLegend,
    legendProps,
    patterns,
  } = chartPlayground({ select, radio, label, bool }, { direction: 'column' });

  const chartProps: ScatterPlotChartProps = {
    data,
    groupKey: 'x',
    plotWidth: 300,
    plotHeight: 300,
    direction,
    showTooltip,
    showXAxis,
    showYAxis,
    alignItems,
    patterns,
  };

  if (showLegend) {
    chartProps.legendProps = legendProps;
    chartProps.showLegend = true;
  } else {
    chartProps.showLegend = false;
  }

  return <Chart.ScatterPlot {...chartProps} valueKey={'value'} xTicksCount={10} yTicksCount={6} />;
}, {filterProps: ['data']});

```

--------------------------------

### Compact Horizontal Bar Chart with Links (TSX)

Source: https://github.com/semrush/intergalactic/blob/release/v16/website/docs/data-display/bar-horizontal-compact/bar-horizontal-compact-code.md

Shows how to incorporate interactive links within the bars of the compact horizontal bar chart. This example is useful for creating data visualizations that guide users to related content or detailed information.

```tsx
export Demo from 'stories/components/d3-chart/docs/examples/bar-horizontal-compact/links.tsx';
```

--------------------------------

### Example: Using aria-live="assertive" with role="alert"

Source: https://github.com/semrush/intergalactic/blob/release/v16/website/docs/core-principles/a11y/a11y-general.md

Demonstrates how to mark an area with dynamic content that requires immediate attention, such as an error message. Using `role="alert"` with `aria-live="assertive"` ensures screen readers announce the content change promptly.

```html
<div role="alert" aria-live="assertive">
  Your form submission failed. Please check your input.
</div>
```

--------------------------------

### Install @semcore/dot using npm

Source: https://github.com/semrush/intergalactic/blob/release/v16/semcore/dot/README.md

This command installs the @semcore/dot component, which is part of the Intergalactic Design System, into your project using npm. Ensure you have Node.js and npm installed.

```sh
npm install @semcore/dot
```

--------------------------------

### Install @semcore/feedback-form

Source: https://github.com/semrush/intergalactic/blob/release/v16/semcore/feedback-form/README.md

Installs the @semcore/feedback-form package using npm. This component is part of the Intergalactic Design System.

```sh
npm install @semcore/feedback-form
```

--------------------------------

### Grid: Responsive Layout Example (TSX)

Source: https://github.com/semrush/intergalactic/blob/release/v16/website/docs/layout/grid-system/grid-system-code.md

Explains and demonstrates the grid's functionality for responsive layouts, allowing column widths and offsets to be adjusted based on screen size. The system is desktop-first.

```tsx
export Demo from 'stories/components/grid/docs/examples/responsive.tsx';
```

--------------------------------

### Grid: Shorthand Responsive Props Example (TSX)

Source: https://github.com/semrush/intergalactic/blob/release/v16/website/docs/layout/grid-system/grid-system-code.md

Presents an alternative, more concise API for implementing responsive grids. This shorthand approach simplifies the process of defining responsive column behavior.

```tsx
export Demo from 'stories/components/grid/docs/examples/responsive-alternative-api.tsx';
```

--------------------------------

### Install @semcore/add-filter

Source: https://github.com/semrush/intergalactic/blob/release/v16/semcore/add-filter/README.md

Installs the @semcore/add-filter package using npm. This command is essential for integrating the component into your project.

```sh
npm install @semcore/add-filter
```

--------------------------------

### React Button Component with Customization

Source: https://github.com/semrush/intergalactic/blob/release/v16/website/docs/get-started-guide/dev-starter-guide/dev-starter-guide.md

Demonstrates the flexible structure of Semcore React components, allowing customization of internal elements like icons and text. This example shows how to compose a Button with addons and text content.

```jsx
import Button from '@semcore/button';
import Icon from '@semcore/icon'; // Assuming Icon is imported from a Semcore package

<Button>
  <Button.Addon>
    <Icon />
  </Button.Addon>
  <Button.Text>Button with icons</Button.Text>
  <Button.Addon>Whatever you want</Button.Addon>
</Button>
```

--------------------------------

### Install @semcore/outside-click

Source: https://github.com/semrush/intergalactic/blob/release/v16/semcore/outside-click/README.md

Provides instructions on how to install the @semcore/outside-click package using npm. This package is deprecated.

```sh
npm install @semcore/outside-click
```

--------------------------------

### Install @semcore/input

Source: https://github.com/semrush/intergalactic/blob/release/v16/semcore/input/README.md

Installs the @semcore/input package using npm. This is the primary method to add the component to your project.

```sh
npm install @semcore/input
```

--------------------------------

### Install @semcore/table Package

Source: https://github.com/semrush/intergalactic/blob/release/v16/semcore/table/README.md

Command to install the @semcore/table package using npm. This is the primary step to integrate the table component into your project.

```sh
npm install @semcore/table
```

--------------------------------

### Install @semcore/pills

Source: https://github.com/semrush/intergalactic/blob/release/v16/semcore/pills/README.md

Installs the @semcore/pills component using npm. This command adds the package to your project's dependencies, allowing you to use the component.

```sh
npm install @semcore/pills
```

--------------------------------

### Install Intergalactic UI Package

Source: https://github.com/semrush/intergalactic/blob/release/v16/README.md

Installs the Intergalactic UI package using either pnpm or npm. The `--shamefully-hoist` flag is recommended for pnpm to ensure proper dependency resolution.

```sh
pnpm add @semcore/ui --shamefully-hoist
or
npm install @semcore/ui
```

--------------------------------

### Switch Component Basic Usage

Source: https://github.com/semrush/intergalactic/blob/release/v16/website/docs/components/switch/switch-api.md

Demonstrates the basic import and usage of the main Switch component. It requires importing the component from the '@semcore/switch' package.

```jsx
import Switch from '@semcore/switch';
<Switch />;
```

--------------------------------

### Install @semcore/carousel Package

Source: https://github.com/semrush/intergalactic/blob/release/v16/semcore/carousel/README.md

This snippet shows the command to install the @semcore/carousel package using npm. It's a standard dependency installation for Node.js projects.

```sh
npm install @semcore/carousel
```

--------------------------------

### DatePicker and TimePicker Example (React/TSX)

Source: https://github.com/semrush/intergalactic/blob/release/v16/website/docs/patterns/form/form-code.md

Shows how to incorporate DatePicker and TimePicker components into a form using react-hook-form. This example focuses on managing date and time inputs.

```tsx
export Demo from 'stories/patterns/ux-patterns/form/docs/examples/datepicker-and-timepicker.tsx';
```

--------------------------------

### Example: Using aria-live="off" with role="marquee"

Source: https://github.com/semrush/intergalactic/blob/release/v16/website/docs/core-principles/a11y/a11y-general.md

Provides an example for rapidly changing content where the order of updates is not critical, such as stock tickers or news headlines. `aria-live="off"` is used here as per recommendations, though `polite` might also be considered depending on the exact use case and desired announcement behavior.

```html
<div role="marquee" aria-live="off">
  <!-- Rapidly changing content like stock prices -->
  <span>AAPL: $170.50</span>
</div>
```

--------------------------------

### InputTags and Select Example (React/TSX)

Source: https://github.com/semrush/intergalactic/blob/release/v16/website/docs/patterns/form/form-code.md

Illustrates the integration of InputTags and Select components within a form managed by react-hook-form. This example highlights custom component handling.

```tsx
export Demo from 'stories/patterns/ux-patterns/form/docs/examples/inputtags-and-select.tsx';
```

--------------------------------

### Install @semcore/time-picker using npm

Source: https://github.com/semrush/intergalactic/blob/release/v16/semcore/time-picker/README.md

This snippet shows how to install the @semcore/time-picker component using npm. This is the primary method to add the time picker functionality to your project.

```sh
npm install @semcore/time-picker
```

--------------------------------

### FullscreenModal Basic Usage Example

Source: https://github.com/semrush/intergalactic/blob/release/v16/website/docs/components/fullscreen-modal/fullscreen-modal-code.md

Demonstrates the fundamental usage of the FullscreenModal component. This example imports a specific TSX file for its implementation.

```tsx
export Demo from 'stories/components/fullscreen-modal/docs/examples/basic_fullscreen.headers_use.tsx';
```