### Untitled No description -------------------------------- ### Untitled No description -------------------------------- ### Install Specific Semrush UI Packages Source: https://developer.semrush.com/intergalactic/get-started-guide/dev-starter-guide/dev-starter-guide Installs only the necessary Semrush UI packages, such as core, base components, and data table, to reduce project size. This is an alternative to installing the entire UI library. ```shell pnpm add @semcore/core @semcore/base-components @semcore/data-table ``` ```shell npm install @semcore/core @semcore/base-components @semcore/data-table ``` -------------------------------- ### Install Semrush UI Package Source: https://developer.semrush.com/intergalactic/get-started-guide/dev-starter-guide/dev-starter-guide Installs the complete Semrush UI component library using either pnpm or npm package managers. After installation, components can be imported from `@semcore/ui/{component_name}`. ```shell pnpm add @semcore/ui ``` ```shell npm install @semcore/ui ``` -------------------------------- ### Install Semcore UI and Babel Plugin Source: https://developer.semrush.com/intergalactic/style/css-injection/css-injection-local Installs the necessary Semcore UI component library and the babel plugin for style transpilation using npm. ```bash npm i @semcore/ui @semcore/babel-plugin-styles ``` -------------------------------- ### Untitled No description -------------------------------- ### Untitled No description -------------------------------- ### Untitled No description -------------------------------- ### Untitled No description -------------------------------- ### Untitled No description -------------------------------- ### Untitled No description -------------------------------- ### Untitled No description -------------------------------- ### Untitled No description -------------------------------- ### Untitled No description -------------------------------- ### Untitled No description -------------------------------- ### Untitled No description -------------------------------- ### Untitled No description -------------------------------- ### Untitled No description -------------------------------- ### Untitled No description -------------------------------- ### Get Illustration Path (JS) Source: https://developer.semrush.com/intergalactic/style/illustration/illustration-api Provides an example of using the `getIllustrationPath` function to retrieve the URL for an illustration. This function constructs a URL to fetch SVG assets from a CDN, requiring the illustration version and name as parameters. ```javascript function getIllustrationPath(version, name) { return `https://static.semrush.com/ui-kit/illustration/${version}/${name}.svg`; } ``` -------------------------------- ### Untitled No description -------------------------------- ### Untitled No description -------------------------------- ### Untitled No description -------------------------------- ### Importing and Using the Box Component Source: https://developer.semrush.com/intergalactic/get-started-guide/dev-starter-guide/dev-starter-guide Demonstrates how to import the foundational Box component from Semcore UI and utilize its basic features for styling and size adjustments directly within JSX. ```jsx import { Box } from '@semcore/ui/base-components'; ``` -------------------------------- ### Untitled No description -------------------------------- ### Button Component as a Box Wrapper Source: https://developer.semrush.com/intergalactic/get-started-guide/dev-starter-guide/dev-starter-guide Shows an example of how the Button component, built upon Box, can inherit and utilize Box's properties, such as setting a custom tag and dimensions. ```jsx import Button from '@semcore/ui/button'; ``` -------------------------------- ### Untitled No description -------------------------------- ### Untitled No description -------------------------------- ### Untitled No description