@redis-ui/components 44.0.2 → 46.1.2

package/skills/redis-ui-components/references/Select.md

@@ -4,7 +4,7 @@ A single-select dropdown component built on Radix UI primitives. Supports search
 
 ## Import
 ```tsx
-import { Select } from '@redislabsdev/redis-ui-components';
+import { Select } from '@redis-ui/components';
 ```
 
 ## Props
@@ -93,7 +93,7 @@ The component also extends Radix UI `SelectTriggerProps` (excluding `children`,
 
 ### Playground
 ```tsx
-import { Select } from '@redislabsdev/redis-ui-components';
+import { Select } from '@redis-ui/components';
 
 <Select
   options={options}
@@ -110,7 +110,7 @@ import { Select } from '@redislabsdev/redis-ui-components';
 > otherwise label will be auto connected to the select with generated id.
 > Note: custom id must start with a letter to work correctly.
 ```tsx
-import { Select, FormField } from '@redislabsdev/redis-ui-components';
+import { Select, FormField } from '@redis-ui/components';
 
 <FormField label="FormField Label with custom id" additionalText="Additional text">
   <Select
@@ -128,7 +128,7 @@ import { Select, FormField } from '@redislabsdev/redis-ui-components';
 > Adding some text to the `error` prop of `Select` enables error state. Hover error indicator to see specified text in tooltip.
 > Note: error status overrides valid status.
 ```tsx
-import { Select } from '@redislabsdev/redis-ui-components';
+import { Select } from '@redis-ui/components';
 
 <>
   Valid status
@@ -141,7 +141,7 @@ import { Select } from '@redislabsdev/redis-ui-components';
 ### ResetButton
 > Single Select allows user to clean selected value. Set `allowReset` prop to show Reset button.
 ```tsx
-import { Select } from '@redislabsdev/redis-ui-components';
+import { Select } from '@redis-ui/components';
 
 <Select
   options={options}
@@ -154,7 +154,7 @@ import { Select } from '@redislabsdev/redis-ui-components';
 ### Loading
 > Adding `loading` prop enables loading indicator. It can be used together with other indicators and states.
 ```tsx
-import { Select } from '@redislabsdev/redis-ui-components';
+import { Select } from '@redis-ui/components';
 
 <>
   Loading indicator
@@ -173,7 +173,7 @@ import { Select } from '@redislabsdev/redis-ui-components';
 
 ### Disabled
 ```tsx
-import { Select } from '@redislabsdev/redis-ui-components';
+import { Select } from '@redis-ui/components';
 
 <>
   Default
@@ -198,7 +198,7 @@ import { Select } from '@redislabsdev/redis-ui-components';
 > Event handler receives current `option`, `isSelected` flag and `isOptionValue` flag if rendering option in dropdown list.
 > Note: if valueRender handler returns `undefined` or `null`, then default rendering will be applied.
 ```tsx
-import { Select, SelectValueRender } from '@redislabsdev/redis-ui-components';
+import { Select, SelectValueRender } from '@redis-ui/components';
 
 const customValueRender: SelectValueRender = ({ option, isSelected, isOptionValue }) => {
   const color = !isOptionValue ? 'green' : (isSelected && 'blueviolet') || 'orange';
@@ -227,7 +227,7 @@ const customValueRender: SelectValueRender = ({ option, isSelected, isOptionValu
 > The handler should return true if the search string is found in the option search fields.
 > Note: if a custom search should include a default search by label, then label needs to be added to the custom search implementation, since custom search completely replaces the default search.
 ```tsx
-import { Select, SelectCompareHandler, SelectOption, SelectValueRender } from '@redislabsdev/redis-ui-components';
+import { Select, SelectCompareHandler, SelectOption, SelectValueRender } from '@redis-ui/components';
 
 const customCompare: SelectCompareHandler<SelectOption> = (option, searchValue) => {
   const fieldsForSearch = [option.label, option.state as string];
@@ -256,7 +256,7 @@ const valueRender: SelectValueRender = ({ option }) => {
 ### VirtualList
 > List of options can be virtualized by adding `virtualized` prop. It allows to have very long list of items without performance drop.
 ```tsx
-import { Select, FormField } from '@redislabsdev/redis-ui-components';
+import { Select, FormField } from '@redis-ui/components';
 
 <FormField label="Countries">
   <Select
@@ -277,7 +277,7 @@ import { Select, FormField } from '@redislabsdev/redis-ui-components';
 
 ### Content Playground
 ```tsx
-import { Select } from '@redislabsdev/redis-ui-components';
+import { Select } from '@redis-ui/components';
 
 <Select.Compose options={options} onChange={(value) => console.log(value)}>
   <Select.Trigger />
@@ -290,7 +290,7 @@ import { Select } from '@redislabsdev/redis-ui-components';
 > Option value rendering can be customized by specifying `optionValueRender` prop of `Select.Content`.
 > Event handler receives current `option`, `isSelected` flag and truthy `isOptionValue` flag for rendering option value.
 ```tsx
-import { Select } from '@redislabsdev/redis-ui-components';
+import { Select } from '@redis-ui/components';
 
 <Select.Compose
   options={options}
@@ -325,7 +325,7 @@ import { Select } from '@redislabsdev/redis-ui-components';
 > Option component receives default or custom rendered value as `content` prop.
 > Note: custom option component must use `Select.Option.Compose` as root element to work correctly.
 ```tsx
-import { Select, SelectOptionComponent } from '@redislabsdev/redis-ui-components';
+import { Select, SelectOptionComponent } from '@redis-ui/components';
 
 const CustomOption: SelectOptionComponent = ({ option, content, ...restProps }) => (
   <Select.Option.Compose option={option} {...restProps}>
@@ -347,14 +347,14 @@ const CustomOption: SelectOptionComponent = ({ option, content, ...restProps })
 ### CustomCheckIndicator
 > Shows how, using composition, to replace the icon of the check indicator.
 ```tsx
-import { Select, SelectOptionComponent } from '@redislabsdev/redis-ui-components';
-import { PocIcon } from '@redislabsdev/redis-ui-icons';
+import { Select, SelectOptionComponent } from '@redis-ui/components';
+import { PocIcon } from '@redis-ui/icons';
 
 const CustomOption: SelectOptionComponent = ({ option, content, ...restProps }) => (
   <Select.Option.Compose option={option} {...restProps}>
     <Select.Option.Content>{content}</Select.Option.Content>
     <Select.Option.Indicator>
-      <PocIcon color="danger500" size="XL" />
+      <PocIcon variant="danger" size="XL" />
     </Select.Option.Indicator>
   </Select.Option.Compose>
 );
@@ -372,7 +372,7 @@ const CustomOption: SelectOptionComponent = ({ option, content, ...restProps })
 ### ContentComposition
 > Composition example includes all parts of `Select.Content` and shows usage of static elements.
 ```tsx
-import { Select } from '@redislabsdev/redis-ui-components';
+import { Select } from '@redis-ui/components';
 
 <Select.Compose
   options={options}
@@ -395,7 +395,7 @@ import { Select } from '@redislabsdev/redis-ui-components';
 ### ContentListComposition
 > By adding extra list container, some static elements can be scrolled along with other options.
 ```tsx
-import { Select } from '@redislabsdev/redis-ui-components';
+import { Select } from '@redis-ui/components';
 
 <Select.Compose
   options={options}
@@ -419,7 +419,7 @@ import { Select } from '@redislabsdev/redis-ui-components';
 
 ### Trigger Playground
 ```tsx
-import { Select } from '@redislabsdev/redis-ui-components';
+import { Select } from '@redis-ui/components';
 
 <Select.Compose options={options} onChange={(value) => console.log(value)}>
   <Select.Trigger placeholder="Select fruit..." allowReset={false} />
@@ -432,7 +432,7 @@ import { Select } from '@redislabsdev/redis-ui-components';
 > Trigger value rendering can be customized by specifying `valueRender` prop of `Select.Trigger`.
 > Event handler receives current `option` prop.
 ```tsx
-import { Select } from '@redislabsdev/redis-ui-components';
+import { Select } from '@redis-ui/components';
 
 const valueRender = ({ option }) => {
   return (
@@ -458,7 +458,7 @@ const valueRender = ({ option }) => {
 > Note: custom container may have its own style and behavior and therefore can have name conflicts with attributes added by `Select.Trigger`. In this case custom container can be wrapped in a `span` or `div`, which will take over all attributes from the trigger.
 ```tsx
 import { useState } from 'react';
-import { Select, ToggleButton } from '@redislabsdev/redis-ui-components';
+import { Select, ToggleButton } from '@redis-ui/components';
 
 const [open, setOpen] = useState(false);
 
@@ -484,7 +484,7 @@ const [open, setOpen] = useState(false);
 ### TriggerComposition
 > Default composition example includes all parts of `Trigger`.
 ```tsx
-import { Select } from '@redislabsdev/redis-ui-components';
+import { Select } from '@redis-ui/components';
 
 <Select.Compose
   options={options}

package/skills/redis-ui-components/references/SideBar.md

@@ -5,7 +5,7 @@ Collapsible sidebar navigation with a header toggle, grouped items, scrollable m
 ## Import
 
 ```tsx
-import { SideBar } from '@redislabsdev/redis-ui-components';
+import { SideBar } from '@redis-ui/components';
 ```
 
 ## Props
@@ -136,9 +136,9 @@ This slot inherits `TypographyBodyProps` except `children` and renders a small b
 ### Playground
 
 ```tsx
-import { SideBar } from '@redislabsdev/redis-ui-components';
-import { ShardIcon } from '@redislabsdev/redis-ui-icons';
-import { RedisIcon } from '@redislabsdev/redis-ui-icons/multicolor';
+import { SideBar } from '@redis-ui/components';
+import { ShardIcon } from '@redis-ui/icons';
+import { RedisIcon } from '@redis-ui/icons/multicolor';
 import { useArgState } from '../../helpers/useArgState';
 
 const [expanded, onToggle] = useArgState({ arg: true, getNewState: (arg) => !arg });
@@ -164,10 +164,10 @@ const [expanded, onToggle] = useArgState({ arg: true, getNewState: (arg) => !arg
 > For details on the use of parts, please refer to the relevant documents.
 
 ```tsx
-import { SideBar } from '@redislabsdev/redis-ui-components';
-import { PlusIcon } from '@redislabsdev/redis-ui-icons';
+import { SideBar } from '@redis-ui/components';
+import { PlusIcon } from '@redis-ui/icons';
 import { useState } from 'react';
-import { RedisIcon } from '@redislabsdev/redis-ui-icons/multicolor';
+import { RedisIcon } from '@redis-ui/icons/multicolor';
 import { items } from './SideBar.data';
 
 const [expanded, setExpanded] = useState(true);
@@ -258,9 +258,9 @@ const [activeLink, setActiveLink] = useState(items.top[0].content);
 > with optional `Footer.Link` and `Footer.Text` inside. Metadata is hidden in collapsed state.
 
 ```tsx
-import { SideBar } from '@redislabsdev/redis-ui-components';
+import { SideBar } from '@redis-ui/components';
 import { useState } from 'react';
-import { RedisIcon } from '@redislabsdev/redis-ui-icons/multicolor';
+import { RedisIcon } from '@redis-ui/icons/multicolor';
 import { StoryHList } from '../../helpers/Story.style';
 
 const [expanded, setExpanded] = useState(true);
@@ -295,7 +295,7 @@ const content = (
 > It worth to use only one `ScrollContainer` in the bar.
 
 ```tsx
-import { SideBar } from '@redislabsdev/redis-ui-components';
+import { SideBar } from '@redis-ui/components';
 import { StoryHList } from '../../helpers/Story.style';
 import { items } from './SideBar.data';
 
@@ -331,7 +331,7 @@ const simpleItemRender = (item, i) => (
 > `ItemsContainer` simplifies grouping items and other elements.
 
 ```tsx
-import { SideBar } from '@redislabsdev/redis-ui-components';
+import { SideBar } from '@redis-ui/components';
 import { StoryHList } from '../../helpers/Story.style';
 import { items } from './SideBar.data';
 
@@ -371,8 +371,8 @@ const simpleItemRender = (item, i) => (
 > Collapsible `Button` can be used instead of `Item`
 
 ```tsx
-import { SideBar } from '@redislabsdev/redis-ui-components';
-import { ShardIcon } from '@redislabsdev/redis-ui-icons';
+import { SideBar } from '@redis-ui/components';
+import { ShardIcon } from '@redis-ui/icons';
 import { StoryHList } from '../../helpers/Story.style';
 
 const button = (
@@ -402,7 +402,7 @@ const button = (
 > Collapsible `Divider` can have vertical margins and take full width
 
 ```tsx
-import { SideBar } from '@redislabsdev/redis-ui-components';
+import { SideBar } from '@redis-ui/components';
 import { StoryHList } from '../../helpers/Story.style';
 
 const content = (
@@ -435,8 +435,8 @@ const content = (
 ### Item Playground
 
 ```tsx
-import { SideBar } from '@redislabsdev/redis-ui-components';
-import { PlusIcon, ShardIcon } from '@redislabsdev/redis-ui-icons';
+import { SideBar } from '@redis-ui/components';
+import { PlusIcon, ShardIcon } from '@redis-ui/icons';
 import { useState } from 'react';
 
 const [expanded, setExpanded] = useState(true);

package/skills/redis-ui-components/references/Slider.md

@@ -5,12 +5,12 @@ Composable range slider with a default wrapper, track, thumb, marks, and labels.
 ## Import
 
 ```tsx
-import { Slider } from '@redislabsdev/redis-ui-components';
+import { Slider } from '@redis-ui/components';
 ```
 
-> Examples also use icons from `@redislabsdev/redis-ui-icons`:
+> Examples also use icons from `@redis-ui/icons`:
 > ```tsx
-> import { PlusIcon, MinusIcon, InfoIcon } from '@redislabsdev/redis-ui-icons';
+> import { PlusIcon, MinusIcon, InfoIcon } from '@redis-ui/icons';
 > ```
 
 ## Props
@@ -47,7 +47,7 @@ The top-level `Slider` also inherits standard compose element props through `Com
 ### Playground
 
 ```tsx
-import { Slider } from '@redislabsdev/redis-ui-components';
+import { Slider } from '@redis-ui/components';
 
 <Slider defaultValue={[0]} max={9} aria-label="slider" />;
 ```
@@ -57,7 +57,7 @@ import { Slider } from '@redislabsdev/redis-ui-components';
 > The slider can be used in uncontrolled mode with `defaultValue`.
 
 ```tsx
-import { Slider } from '@redislabsdev/redis-ui-components';
+import { Slider } from '@redis-ui/components';
 
 <Slider max={9} defaultValue={[3]} aria-label="Slider" />;
 ```
@@ -69,8 +69,8 @@ import { Slider } from '@redislabsdev/redis-ui-components';
 
 ```tsx
 import { useState } from 'react';
-import { Slider, ActionIconButton } from '@redislabsdev/redis-ui-components';
-import { PlusIcon, MinusIcon } from '@redislabsdev/redis-ui-icons';
+import { Slider, ActionIconButton } from '@redis-ui/components';
+import { PlusIcon, MinusIcon } from '@redis-ui/icons';
 
 function ControlledSliderExample() {
   const [stepIndex, setStepIndex] = useState(1);
@@ -115,7 +115,7 @@ function ControlledSliderExample() {
 > Set `disabled` prop to disable the slider.
 
 ```tsx
-import { Slider } from '@redislabsdev/redis-ui-components';
+import { Slider } from '@redis-ui/components';
 
 <Slider max={9} defaultValue={[3]} aria-label="Slider" disabled />;
 ```
@@ -125,7 +125,7 @@ import { Slider } from '@redislabsdev/redis-ui-components';
 > The slider works with any number of steps.
 
 ```tsx
-import { Slider } from '@redislabsdev/redis-ui-components';
+import { Slider } from '@redis-ui/components';
 
 <>
   <Slider max={2} defaultValue={[1]} aria-label="Slider" />
@@ -136,7 +136,7 @@ import { Slider } from '@redislabsdev/redis-ui-components';
 ### PartialLabelsAndMarks
 
 ```tsx
-import { Slider } from '@redislabsdev/redis-ui-components';
+import { Slider } from '@redis-ui/components';
 
 <Slider
   max={6}
@@ -161,7 +161,7 @@ import { Slider } from '@redislabsdev/redis-ui-components';
 
 ```tsx
 import { useState } from 'react';
-import { Slider } from '@redislabsdev/redis-ui-components';
+import { Slider } from '@redis-ui/components';
 
 function MinAndStepExample() {
   const [value, setValue] = useState([30]);
@@ -199,7 +199,7 @@ function MinAndStepExample() {
 > Marks are visual indicators positioned at specific values on the slider.
 
 ```tsx
-import { Slider } from '@redislabsdev/redis-ui-components';
+import { Slider } from '@redis-ui/components';
 
 const marks = [
   { value: 0, mark: true },
@@ -238,8 +238,8 @@ const marks = [
 > This example shows custom styling with badges, icons, and conditional formatting.
 
 ```tsx
-import { FlexGroup, Badge, Typography, Slider } from '@redislabsdev/redis-ui-components';
-import { InfoIcon } from '@redislabsdev/redis-ui-icons';
+import { FlexGroup, Badge, Typography, Slider } from '@redis-ui/components';
+import { InfoIcon } from '@redis-ui/icons';
 import { MOCK_MARKS } from './SliderStory.data';
 import * as S from './SliderStory.style';
 
@@ -274,7 +274,7 @@ const CustomMark = () => <S.Mark />;
 > Labels show text at specific positions on the slider.
 
 ```tsx
-import { Slider } from '@redislabsdev/redis-ui-components';
+import { Slider } from '@redis-ui/components';
 
 <Slider.Compose max={10} defaultValue={[5]} aria-label="Slider">
   <Slider.Track.Compose>
@@ -297,7 +297,7 @@ import { Slider } from '@redislabsdev/redis-ui-components';
 > Each mark can have an optional label to describe its value.
 
 ```tsx
-import { Slider } from '@redislabsdev/redis-ui-components';
+import { Slider } from '@redis-ui/components';
 
 <Slider.Compose max={9} defaultValue={[5]}>
   <Slider.Track.Compose>
@@ -322,7 +322,7 @@ import { Slider } from '@redislabsdev/redis-ui-components';
 > This gives you full control over positioning and styling.
 
 ```tsx
-import { Slider } from '@redislabsdev/redis-ui-components';
+import { Slider } from '@redis-ui/components';
 
 <Slider.Compose max={9} defaultValue={[5]}>
   <Slider.Track.Compose>
@@ -350,7 +350,7 @@ import { Slider } from '@redislabsdev/redis-ui-components';
 
 ```tsx
 import { Fragment, useState } from 'react';
-import { Slider } from '@redislabsdev/redis-ui-components';
+import { Slider } from '@redis-ui/components';
 import { PLANS_MOCK_MARKS } from './SliderStory.data';
 import * as S from './SliderStory.style';
 

package/skills/redis-ui-components/references/Stepper.md

@@ -5,7 +5,7 @@ Composable stepper for ordered workflows with a data-driven root API, controlled
 ## Import
 
 ```tsx
-import { Stepper } from '@redislabsdev/redis-ui-components';
+import { Stepper } from '@redis-ui/components';
 ```
 
 If you want to style against step state, also import `StepperStepState` from the same package.
@@ -91,7 +91,7 @@ Hook that returns the current step `state` and `index` for custom step rendering
 ### Playground
 
 ```tsx
-import { Stepper } from '@redislabsdev/redis-ui-components';
+import { Stepper } from '@redis-ui/components';
 
 const storySteps = [
   { label: 'Create a subscription' },
@@ -107,7 +107,7 @@ const storySteps = [
 > The same stepper with different `currentStep` prop.
 
 ```tsx
-import { Stepper } from '@redislabsdev/redis-ui-components';
+import { Stepper } from '@redis-ui/components';
 
 const storySteps = [
   { label: 'Create a subscription' },
@@ -131,7 +131,7 @@ const storySteps = [
 
 ```tsx
 import { useState } from 'react';
-import { Stepper } from '@redislabsdev/redis-ui-components';
+import { Stepper } from '@redis-ui/components';
 
 const storySteps = [
   { label: 'Create a subscription' },
@@ -152,7 +152,7 @@ function Example() {
 
 ```tsx
 import { useState } from 'react';
-import { Stepper } from '@redislabsdev/redis-ui-components';
+import { Stepper } from '@redis-ui/components';
 import * as S from './StepperStory.style';
 
 const storySteps = [
@@ -182,8 +182,8 @@ function Example() {
 
 ```tsx
 import { useState } from 'react';
-import { DatabaseIcon, LinkIcon, SubscriptionsIcon } from '@redislabsdev/redis-ui-icons';
-import { Stepper } from '@redislabsdev/redis-ui-components';
+import { DatabaseIcon, LinkIcon, SubscriptionsIcon } from '@redis-ui/icons';
+import { Stepper } from '@redis-ui/components';
 
 const storySteps = [
   { label: 'Create a subscription' },
@@ -212,7 +212,7 @@ function Example() {
           return (
             <Stepper.Step.Compose key={stepLabel}>
               <Stepper.Step.Icon>
-                <StepIcon customColor="currentColor" size="M" />
+                <StepIcon size="M" />
               </Stepper.Step.Icon>
               <Stepper.Step.Label>{stepLabel}</Stepper.Step.Label>
             </Stepper.Step.Compose>
@@ -229,7 +229,7 @@ function Example() {
           },
           {
             label: storySteps[1].label,
-            icon: <DatabaseIcon customColor="currentColor" size="M" />
+            icon: <DatabaseIcon size="M" />
           },
           {
             label: storySteps[2].label,
@@ -251,7 +251,7 @@ function Example() {
 
 ```tsx
 import { useState } from 'react';
-import { Stepper } from '@redislabsdev/redis-ui-components';
+import { Stepper } from '@redis-ui/components';
 import * as S from './StepperStory.style';
 
 function Example() {

package/skills/redis-ui-components/references/Switch.md

@@ -5,7 +5,7 @@ A boolean switch component with controlled and uncontrolled state, disabled/read
 ## Import
 
 ```tsx
-import { Switch } from '@redislabsdev/redis-ui-components';
+import { Switch } from '@redis-ui/components';
 ```
 
 ## Props
@@ -70,7 +70,7 @@ The component also accepts the rest of `HTMLAttributes<HTMLButtonElement>`, whic
 ### Playground
 
 ```tsx
-import { Switch } from '@redislabsdev/redis-ui-components';
+import { Switch } from '@redis-ui/components';
 
 <Switch {...args} checked={checked} onCheckedChange={handleClickSwitch} />
 ```
@@ -78,7 +78,7 @@ import { Switch } from '@redislabsdev/redis-ui-components';
 ### Disabled
 
 ```tsx
-import { Switch } from '@redislabsdev/redis-ui-components';
+import { Switch } from '@redis-ui/components';
 
 <>
   {[false, true].map((checked) => (
@@ -96,7 +96,7 @@ import { Switch } from '@redislabsdev/redis-ui-components';
 ### Readonly
 
 ```tsx
-import { Switch } from '@redislabsdev/redis-ui-components';
+import { Switch } from '@redis-ui/components';
 
 <>
   {[false, true].map((checked) => (
@@ -114,7 +114,7 @@ import { Switch } from '@redislabsdev/redis-ui-components';
 ### WithinFormField
 
 ```tsx
-import { FormField, Switch } from '@redislabsdev/redis-ui-components';
+import { FormField, Switch } from '@redis-ui/components';
 
 <>
   <FormField label="Normal" additionalText="Switch in FormField">
@@ -144,7 +144,7 @@ import { FormField, Switch } from '@redislabsdev/redis-ui-components';
 ### BasicComposition
 
 ```tsx
-import { Switch } from '@redislabsdev/redis-ui-components';
+import { Switch } from '@redis-ui/components';
 
 <Switch.Compose checked={state} onCheckedChange={setState}>
   <Switch.Switcher />
@@ -155,7 +155,7 @@ import { Switch } from '@redislabsdev/redis-ui-components';
 ### BothSideText
 
 ```tsx
-import { Switch } from '@redislabsdev/redis-ui-components';
+import { Switch } from '@redis-ui/components';
 
 <Switch.Compose checked={state} onCheckedChange={setState}>
   <Switch.Title titleOn="On" titleOff="Off" />
@@ -170,7 +170,7 @@ import { Switch } from '@redislabsdev/redis-ui-components';
 > Styles can be state-consistent.
 
 ```tsx
-import { FormField, Switch } from '@redislabsdev/redis-ui-components';
+import { FormField, Switch } from '@redis-ui/components';
 import * as S from './SwitchStory.style';
 
 <FormField label={<S.CustomTitle checked={state}>Fancy Switch</S.CustomTitle>}>

package/skills/redis-ui-components/references/Tabs.md

@@ -5,7 +5,7 @@ Tabs renders a tab bar and matching content panes from a shared tab list. It sup
 ## Import
 
 ```tsx
-import { Tabs } from '@redislabsdev/redis-ui-components';
+import { Tabs } from '@redis-ui/components';
 ```
 
 ## Props
@@ -135,7 +135,7 @@ Tabs.ContentPane.Content also accepts native content compose props.
 > Playground story
 
 ```tsx
-import { Tabs } from '@redislabsdev/redis-ui-components';
+import { Tabs } from '@redis-ui/components';
 
 const tabs = [
   { value: 'tab1', label: 'First Tab', content: 'First Tab Content' },
@@ -152,7 +152,7 @@ const tabs = [
 
 ```tsx
 import { useState } from 'react';
-import { Tabs } from '@redislabsdev/redis-ui-components';
+import { Tabs } from '@redis-ui/components';
 
 const tabs = [
   { value: 'tab1', label: 'First Tab', content: 'First Tab Content' },
@@ -172,7 +172,7 @@ function Example() {
 > 2 variants are supported, `default` and `sub`. Use `variant` prop to set it.
 
 ```tsx
-import { Tabs } from '@redislabsdev/redis-ui-components';
+import { Tabs } from '@redis-ui/components';
 
 const tabs = [
   { value: 'tab1', label: 'First Tab', content: 'First Tab Content' },
@@ -192,7 +192,7 @@ const tabs = [
 > To change this behavior, set the `activateOnFocus` prop to true, and the tab will be activated by the arrow keys.
 
 ```tsx
-import { Tabs } from '@redislabsdev/redis-ui-components';
+import { Tabs } from '@redis-ui/components';
 
 const tabs = [
   { value: 'tab1', label: 'First Tab', content: 'First Tab Content' },
@@ -217,9 +217,9 @@ const tabs = [
 > All parts can have custom styling
 
 ```tsx
-import { Tabs } from '@redislabsdev/redis-ui-components';
+import { Tabs } from '@redis-ui/components';
 import styled from 'styled-components';
-import { useTheme } from '@redislabsdev/redis-ui-styles';
+import { useTheme } from '@redis-ui/styles';
 
 const tabs = [
   { value: 'tab1', label: 'First Tab', content: 'First Tab Content' },
@@ -250,7 +250,7 @@ function Example() {
 
 ```tsx
 import { useState } from 'react';
-import { Tabs } from '@redislabsdev/redis-ui-components';
+import { Tabs } from '@redis-ui/components';
 
 const tabs = [
   { value: 'tab1', label: 'First Tab', content: 'First Tab Content' },
@@ -276,9 +276,9 @@ function Example() {
 > Styled components should be defined outside the render function.
 
 ```tsx
-import { Tabs } from '@redislabsdev/redis-ui-components';
+import { Tabs } from '@redis-ui/components';
 import styled from 'styled-components';
-import { useTheme } from '@redislabsdev/redis-ui-styles';
+import { useTheme } from '@redis-ui/styles';
 
 const tabs = [
   { value: 'tab1', label: 'First Tab', content: 'First Tab Content' },
@@ -337,9 +337,9 @@ function Example() {
 > The `Tabs.ContentPane` can be composed and customized using a container for each tab (`Tabs.ContentPane.Content`) and a main container (`Tabs.ContentPane.Compose`).
 
 ```tsx
-import { Tabs } from '@redislabsdev/redis-ui-components';
+import { Tabs } from '@redis-ui/components';
 import styled from 'styled-components';
-import { useTheme } from '@redislabsdev/redis-ui-styles';
+import { useTheme } from '@redis-ui/styles';
 
 const tabs = [
   { value: 'tab1', label: 'First Tab', content: 'First Tab Content' },