diff --git a/crates/leptos/src/chip.rs b/crates/leptos/src/chip.rs
index 1e38387..ed87320 100644
--- a/crates/leptos/src/chip.rs
+++ b/crates/leptos/src/chip.rs
@@ -8,6 +8,7 @@ use crate::icons::{Location, StarBold};
 pub enum Variant {
     #[default]
     Featured,
+    Official,
     Numeric,
     Description,
     Location,
diff --git a/crates/leptos/src/input.rs b/crates/leptos/src/input.rs
index aa7054e..9c1408e 100644
--- a/crates/leptos/src/input.rs
+++ b/crates/leptos/src/input.rs
@@ -12,7 +12,11 @@ pub fn Input(
     #[prop(into)] disabled: ReadSignal<bool>,
     #[prop(into, optional)] class: String,
     #[prop(into, optional)] error_message: String,
-    #[prop(into)] icon: Option<Children>,
+    #[prop(into, optional)] placeholder: String,
+    #[prop(into, optional, default = "text".to_string())] r#type: String,
+    #[prop(into, optional)] name: String,
+    #[prop(into, optional)] value: String,
+    #[prop(into, optional)] icon: Option<Children>,
 ) -> impl IntoView {
     let input_class = crate::tw!(
         concat!(BASE_CLASS, "-input"),
@@ -29,6 +33,10 @@ pub fn Input(
                 <input
                     class={concat!(BASE_CLASS, "-input__inner")}
                     disabled=disabled.get()
+                    placeholder=placeholder
+                    name=name
+                    r#type=r#type
+                    value=value
                 />
             </div>
             {has_error.get().then_some(
diff --git a/js/react/lib/components/chip/chip.const.ts b/js/react/lib/components/chip/chip.const.ts
index 33aaaee..90e465e 100644
--- a/js/react/lib/components/chip/chip.const.ts
+++ b/js/react/lib/components/chip/chip.const.ts
@@ -2,6 +2,7 @@ import { Location, StarBold } from "@/icons";
 
 export const variants = {
   featured: "rustlanges-chip--featured",
+  official: "rustlanges-chip--official",
   numeric: "rustlanges-chip--numeric",
   description: "rustlanges-chip--description",
   location: "rustlanges-chip--location",
@@ -12,6 +13,7 @@ export type ChipVariants = keyof typeof variants;
 
 export const icons = {
   featured: StarBold,
+  official: null,
   numeric: null,
   description: null,
   location: Location,
diff --git a/js/react/lib/components/chip/chip.showcase.tsx b/js/react/lib/components/chip/chip.showcase.tsx
index 0ab44af..6ae3cd8 100644
--- a/js/react/lib/components/chip/chip.showcase.tsx
+++ b/js/react/lib/components/chip/chip.showcase.tsx
@@ -6,7 +6,14 @@ registerCase("Chip", {
     variant: {
       kind: "string",
       default: "featured",
-      options: ["featured", "numeric", "description", "location", "small"],
+      options: [
+        "featured",
+        "official",
+        "numeric",
+        "description",
+        "location",
+        "small",
+      ],
     },
     label: {
       kind: "string",
diff --git a/js/react/lib/components/input-search/input-search.component.tsx b/js/react/lib/components/input-search/input-search.component.tsx
index 5423313..803fff9 100644
--- a/js/react/lib/components/input-search/input-search.component.tsx
+++ b/js/react/lib/components/input-search/input-search.component.tsx
@@ -4,94 +4,97 @@ import { Search } from "@/icons/search";
 import { cn } from "@/utils/tw-merge";
 import { Fragment } from "react/jsx-runtime";
 import { Tag } from "../tag";
-import { InputHTMLAttributes } from "react";
+import { forwardRef, InputHTMLAttributes } from "react";
 
-type Option = { label: string; value: string };
-type InputSearchProps = {
-  filters?: Array<Option>;
-  activeFilters?: Array<Option>;
-  onChangeFilter?: (option: Array<Option>) => void;
+export type InputSearchOption = { label: string; value: string };
+export type InputSearchProps = {
+  filters?: Array<InputSearchOption>;
+  activeFilters?: Array<InputSearchOption>;
+  onChangeFilter?: (option: Array<InputSearchOption>) => void;
 } & InputHTMLAttributes<HTMLInputElement>;
 
-export const InputSearch = ({
-  className,
-  filters,
-  activeFilters = [],
-  onChangeFilter,
-  ...props
-}: InputSearchProps) => {
-  const filterModal = useBoolean();
+export const InputSearch = forwardRef<HTMLInputElement, InputSearchProps>(
+  function InputSearch(
+    { className, filters, activeFilters = [], onChangeFilter, ...props },
+    ref
+  ) {
+    const filterModal = useBoolean();
 
-  const hasFilter = filters?.length;
+    const hasFilter = filters?.length;
 
-  const handleSelectFilter = (filter: Option, isSelected: boolean) => {
-    if (!isSelected) return onChangeFilter?.([...activeFilters, filter]);
-    onChangeFilter?.(
-      activeFilters.filter(({ value }) => value !== filter.value)
-    );
-  };
+    const handleSelectFilter = (
+      filter: InputSearchOption,
+      isSelected: boolean
+    ) => {
+      if (!isSelected) return onChangeFilter?.([...activeFilters, filter]);
+      onChangeFilter?.(
+        activeFilters.filter(({ value }) => value !== filter.value)
+      );
+    };
 
-  const handleCloseOnClickInput = () => hasFilter && filterModal.setFalse();
+    const handleCloseOnClickInput = () => hasFilter && filterModal.setFalse();
 
-  return (
-    <div className={cn(["rustlanges-input-search-container", className])}>
-      <label
-        className={cn([
-          "rustlanges-input-search",
-          hasFilter && "rustlanges-input-search--filter",
-        ])}
-      >
-        <Search className="" width={24} height={24} />
-        <input
-          type="text"
-          placeholder="Buscar"
-          onClick={handleCloseOnClickInput}
-          className="text-caption"
-          {...props}
-        />
-      </label>
-      <div className="rustlanges-input-search__filter">
-        {hasFilter ? (
-          <Fragment>
-            <button onClick={filterModal.toggle} tabIndex={0}>
-              <Filter width={24} height={24} />
-            </button>
-          </Fragment>
-        ) : null}
-        <div
+    return (
+      <div className={cn(["rustlanges-input-search-container", className])}>
+        <label
           className={cn([
-            "rustlanges-input-search-backdrop__content",
-            filterModal.value
-              ? "rustlanges-input-search-backdrop__content--open"
-              : "rustlanges-input-search-backdrop__content--closed",
+            "rustlanges-input-search",
+            hasFilter && "rustlanges-input-search--filter",
           ])}
         >
-          {filterModal.value && (
+          <Search className="" width={24} height={24} />
+          <input
+            ref={ref}
+            type="text"
+            placeholder="Buscar"
+            onClick={handleCloseOnClickInput}
+            className="text-caption"
+            {...props}
+          />
+        </label>
+        <div className="rustlanges-input-search__filter">
+          {hasFilter ? (
             <Fragment>
-              <ul className="rustlanges-input-search-backdrop__list">
-                {filters?.map(filter => {
-                  const isSelected = activeFilters?.some(
-                    ({ value }) => value === filter.value
-                  );
-                  return (
-                    <li
-                      key={filter.value}
-                      onClick={() => handleSelectFilter(filter, isSelected)}
-                    >
-                      <Tag
-                        as="button"
-                        tabIndex={0}
-                        selected={isSelected}
-                        label={filter.label}
-                      />
-                    </li>
-                  );
-                })}
-              </ul>
+              <button onClick={filterModal.toggle} tabIndex={0}>
+                <Filter width={24} height={24} />
+              </button>
             </Fragment>
-          )}
+          ) : null}
+          <div
+            className={cn([
+              "rustlanges-input-search-backdrop__content",
+              filterModal.value
+                ? "rustlanges-input-search-backdrop__content--open"
+                : "rustlanges-input-search-backdrop__content--closed",
+            ])}
+          >
+            {filterModal.value && (
+              <Fragment>
+                <ul className="rustlanges-input-search-backdrop__list">
+                  {filters?.map(filter => {
+                    const isSelected = activeFilters?.some(
+                      ({ value }) => value === filter.value
+                    );
+                    return (
+                      <li
+                        key={filter.value}
+                        onClick={() => handleSelectFilter(filter, isSelected)}
+                      >
+                        <Tag
+                          as="button"
+                          tabIndex={0}
+                          selected={isSelected}
+                          label={filter.label}
+                        />
+                      </li>
+                    );
+                  })}
+                </ul>
+              </Fragment>
+            )}
+          </div>
         </div>
       </div>
-    </div>
-  );
-};
+    );
+  }
+);
diff --git a/js/react/lib/components/input/input.tsx b/js/react/lib/components/input/input.tsx
index 2a701d4..b50993e 100644
--- a/js/react/lib/components/input/input.tsx
+++ b/js/react/lib/components/input/input.tsx
@@ -1,33 +1,41 @@
 import clsx from "clsx";
+import { forwardRef } from "react";
 import { InputFieldProps } from "./input.types";
 
-export function Input({
-  errorMessage,
-  hasError = !!errorMessage,
-  icon,
-  disabled,
-  className,
-  ...props
-}: InputFieldProps) {
-  return (
-    <div className="rustlanges-input__container">
-      <div
-        className={clsx(
-          "rustlanges-input",
-          hasError && "rustlanges-input--error",
-          className
+export const Input = forwardRef<HTMLInputElement, InputFieldProps>(
+  function Input(
+    {
+      errorMessage,
+      hasError = !!errorMessage,
+      icon,
+      disabled,
+      className,
+      containerClassName,
+      ...props
+    },
+    ref
+  ) {
+    return (
+      <div className={clsx("rustlanges-input__container", containerClassName)}>
+        <div
+          className={clsx(
+            "rustlanges-input",
+            hasError && "rustlanges-input--error",
+            className
+          )}
+        >
+          {icon && <span className="rustlanges-input__icon">{icon}</span>}
+          <input
+            ref={ref}
+            disabled={disabled}
+            className="rustlanges-input__inner"
+            {...props}
+          />
+        </div>
+        {hasError && errorMessage && (
+          <span className="rustlanges-input__error">{errorMessage}</span>
         )}
-      >
-        {icon && <span className="rustlanges-input__icon">{icon}</span>}
-        <input
-          disabled={disabled}
-          className="rustlanges-input__inner"
-          {...props}
-        />
       </div>
-      {hasError && errorMessage && (
-        <span className="rustlanges-input__error">{errorMessage}</span>
-      )}
-    </div>
-  );
-}
+    );
+  }
+);
diff --git a/js/react/lib/components/input/input.types.ts b/js/react/lib/components/input/input.types.ts
index a747e26..3200547 100644
--- a/js/react/lib/components/input/input.types.ts
+++ b/js/react/lib/components/input/input.types.ts
@@ -4,4 +4,9 @@ export interface InputFieldProps extends InputHTMLAttributes<HTMLInputElement> {
   hasError?: boolean;
   errorMessage?: string;
   icon?: ReactNode;
+  /**
+   * Class applied to the outer container that wraps the input + error message.
+   * Use `className` to style the input wrapper itself.
+   */
+  containerClassName?: string;
 }
diff --git a/js/react/tsconfig.lib.json b/js/react/tsconfig.lib.json
index e9316f8..150f0e8 100644
--- a/js/react/tsconfig.lib.json
+++ b/js/react/tsconfig.lib.json
@@ -24,5 +24,9 @@
     "noFallthroughCasesInSwitch": true
   },
   "include": ["lib"],
-  "exclude": ["lib/**/*.showcase.tsx", "lib/**/*.showcase.ts", "lib/showcases.ts"]
+  "exclude": [
+    "lib/**/*.showcase.tsx",
+    "lib/**/*.showcase.ts",
+    "lib/showcases.ts"
+  ]
 }
diff --git a/js/react/vite.config.ts b/js/react/vite.config.ts
index 2ea3f49..265deea 100644
--- a/js/react/vite.config.ts
+++ b/js/react/vite.config.ts
@@ -42,7 +42,11 @@ export default defineConfig({
             // https://rollupjs.org/configuration-options/#input
             glob
               .sync("lib/**/*.{ts,tsx}", {
-                ignore: ["lib/**/*.showcase.{ts,tsx}", "lib/**/*.d.ts", "lib/showcases.ts"],
+                ignore: [
+                  "lib/**/*.showcase.{ts,tsx}",
+                  "lib/**/*.d.ts",
+                  "lib/showcases.ts",
+                ],
               })
               .map(file => [
                 // 1. The name of the entry point
diff --git a/js/vue/lib/components/dropdown-tree/dropdown-tree.showcase.vue b/js/vue/lib/components/dropdown-tree/dropdown-tree.showcase.vue
new file mode 100644
index 0000000..9d7fb89
--- /dev/null
+++ b/js/vue/lib/components/dropdown-tree/dropdown-tree.showcase.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import Showcase from "@rustlanges/showcase/vue";
+import RsDropdownTreeStart from "./rs-dropdown-tree-start.vue";
+import RsDropdownTreeSubject from "./rs-dropdown-tree-subject.vue";
+import RsDropdownTreeTopic from "./rs-dropdown-tree-topic.vue";
+import RsDropdownTreeSubTopic from "./rs-dropdown-tree-subtopic.vue";
+import RsDropdownTreeEnd from "./rs-dropdown-tree-end.vue";
+</script>
+
+<template>
+  <Showcase name="DropdownTree">
+    <RsDropdownTreeStart
+      variant="default"
+      level="n1"
+      state="completed"
+      title="Introducción a Rust"
+    >
+      <RsDropdownTreeSubject
+        level="n1"
+        state="completed"
+        title="Título del tema"
+        name="subject"
+        value="a"
+      >
+        <RsDropdownTreeTopic level="n1" state="reading" title="Tópico">
+          <RsDropdownTreeSubTopic
+            level="n1"
+            state="completed"
+            title="Subtópico"
+          />
+          <RsDropdownTreeSubTopic
+            level="n1"
+            state="reading"
+            title="Subtópico"
+          />
+          <RsDropdownTreeSubTopic
+            level="n1"
+            state="pending"
+            title="Subtópico"
+          />
+        </RsDropdownTreeTopic>
+        <RsDropdownTreeEnd title="Continúa aprendiendo">
+          Conoce todos nuestros proyectos Open Source.
+        </RsDropdownTreeEnd>
+      </RsDropdownTreeSubject>
+    </RsDropdownTreeStart>
+  </Showcase>
+</template>
diff --git a/js/vue/lib/components/dropdown-tree/index.ts b/js/vue/lib/components/dropdown-tree/index.ts
new file mode 100644
index 0000000..ba4897c
--- /dev/null
+++ b/js/vue/lib/components/dropdown-tree/index.ts
@@ -0,0 +1,5 @@
+export { default as RsDropdownTreeStart } from "./rs-dropdown-tree-start.vue";
+export { default as RsDropdownTreeSubject } from "./rs-dropdown-tree-subject.vue";
+export { default as RsDropdownTreeTopic } from "./rs-dropdown-tree-topic.vue";
+export { default as RsDropdownTreeSubTopic } from "./rs-dropdown-tree-subtopic.vue";
+export { default as RsDropdownTreeEnd } from "./rs-dropdown-tree-end.vue";
diff --git a/js/vue/lib/components/dropdown-tree/rs-dropdown-tree-end.vue b/js/vue/lib/components/dropdown-tree/rs-dropdown-tree-end.vue
new file mode 100644
index 0000000..b2de949
--- /dev/null
+++ b/js/vue/lib/components/dropdown-tree/rs-dropdown-tree-end.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import RsArrowRight from "../../icons/rs-arrow-right.vue";
+
+defineOptions({ inheritAttrs: false });
+
+withDefaults(
+  defineProps<{
+    title: string;
+    as?: "div" | "a" | "button";
+  }>(),
+  {
+    as: "div",
+  }
+);
+
+const attrs = useAttrs();
+
+const className = computed(() => ["dropdown-tree-end", attrs.class]);
+</script>
+
+<template>
+  <component :is="as" :class="className">
+    <span class="text-h5">
+      {{ title }} <RsArrowRight :width="24" :height="24" />
+    </span>
+    <span class="text-paragraph-1"><slot /></span>
+  </component>
+</template>
diff --git a/js/vue/lib/components/dropdown-tree/rs-dropdown-tree-start.vue b/js/vue/lib/components/dropdown-tree/rs-dropdown-tree-start.vue
new file mode 100644
index 0000000..4dd95ea
--- /dev/null
+++ b/js/vue/lib/components/dropdown-tree/rs-dropdown-tree-start.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import RsArrowDown from "../../icons/rs-arrow-down.vue";
+import RsBadge from "../rs-badge.vue";
+import RsLevel from "../rs-level.vue";
+
+const VARIANTS = {
+  default: "rustlanges-dropdown-tree-start--default",
+  extended: "rustlanges-dropdown-tree-start--extended",
+} as const;
+
+type StartVariant = keyof typeof VARIANTS;
+
+type BadgeVariant = "completed" | "reading" | "pending" | "unread";
+type LevelVariant = "n1" | "n2" | "n3" | "op";
+
+const props = defineProps<{
+  variant: StartVariant;
+  level: LevelVariant;
+  state: BadgeVariant;
+  title: string;
+}>();
+
+const className = computed(() => [
+  "rustlanges-dropdown-tree-start",
+  VARIANTS[props.variant],
+]);
+</script>
+
+<template>
+  <details :class="className">
+    <summary>
+      <RsBadge type="text" :variant="state" />
+      <RsLevel as="span" :variant="level" />
+      <span class="text-h5 rustlanges-dropdown-tree-start__title">
+        {{ title }}
+      </span>
+      <RsArrowDown :width="24" :height="24" />
+    </summary>
+    <div>
+      <slot />
+    </div>
+  </details>
+</template>
diff --git a/js/vue/lib/components/dropdown-tree/rs-dropdown-tree-subject.vue b/js/vue/lib/components/dropdown-tree/rs-dropdown-tree-subject.vue
new file mode 100644
index 0000000..dd8875a
--- /dev/null
+++ b/js/vue/lib/components/dropdown-tree/rs-dropdown-tree-subject.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import RsArrowDown from "../../icons/rs-arrow-down.vue";
+import RsBadge from "../rs-badge.vue";
+import RsLevel from "../rs-level.vue";
+import RsRadio from "../rs-radio.vue";
+
+type BadgeVariant = "completed" | "reading" | "pending" | "unread";
+type LevelVariant = "n1" | "n2" | "n3" | "op";
+
+defineProps<{
+  level: LevelVariant;
+  state: BadgeVariant;
+  title: string;
+  name?: string;
+  value?: string | number;
+  modelValue?: string | number | boolean;
+  disabled?: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: string | number | boolean): void;
+}>();
+</script>
+
+<template>
+  <details class="rustlanges-dropdown-tree-subject">
+    <summary>
+      <RsBadge type="text" :variant="state" />
+      <RsLevel as="span" :variant="level" />
+      <span class="text-h5 rustlanges-dropdown-tree-subject__title">
+        {{ title }}
+      </span>
+      <RsArrowDown :width="24" :height="24" />
+      <RsRadio
+        :name="name"
+        :value="value"
+        :model-value="modelValue"
+        :disabled="disabled"
+        @update:model-value="v => emit('update:modelValue', v)"
+      />
+    </summary>
+    <div>
+      <slot />
+    </div>
+  </details>
+</template>
diff --git a/js/vue/lib/components/dropdown-tree/rs-dropdown-tree-subtopic.vue b/js/vue/lib/components/dropdown-tree/rs-dropdown-tree-subtopic.vue
new file mode 100644
index 0000000..1fe91d5
--- /dev/null
+++ b/js/vue/lib/components/dropdown-tree/rs-dropdown-tree-subtopic.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import RsBadge from "../rs-badge.vue";
+import RsLevel from "../rs-level.vue";
+
+defineOptions({ inheritAttrs: false });
+
+type BadgeVariant = "completed" | "reading" | "pending" | "unread";
+type LevelVariant = "n1" | "n2" | "n3" | "op";
+
+withDefaults(
+  defineProps<{
+    level: LevelVariant;
+    state: BadgeVariant;
+    title: string;
+    as?: "div" | "a" | "button" | "li";
+  }>(),
+  {
+    as: "div",
+  }
+);
+
+const attrs = useAttrs();
+
+const className = computed(() => [
+  "rustlanges-dropdown-tree-subtopic",
+  attrs.class,
+]);
+</script>
+
+<template>
+  <component :is="as" :class="className" tabindex="0">
+    <RsLevel :variant="level" />
+    <span class="rustlanges-dropdown-tree-subtopic__title">
+      {{ title }}
+    </span>
+    <RsBadge type="default" :variant="state" />
+  </component>
+</template>
diff --git a/js/vue/lib/components/dropdown-tree/rs-dropdown-tree-topic.vue b/js/vue/lib/components/dropdown-tree/rs-dropdown-tree-topic.vue
new file mode 100644
index 0000000..e10a932
--- /dev/null
+++ b/js/vue/lib/components/dropdown-tree/rs-dropdown-tree-topic.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import RsArrowDown from "../../icons/rs-arrow-down.vue";
+import RsBadge from "../rs-badge.vue";
+import RsLevel from "../rs-level.vue";
+
+type BadgeVariant = "completed" | "reading" | "pending" | "unread";
+type LevelVariant = "n1" | "n2" | "n3" | "op";
+
+defineProps<{
+  level: LevelVariant;
+  state: BadgeVariant;
+  title: string;
+}>();
+</script>
+
+<template>
+  <details class="rustlanges-dropdown-tree-topic">
+    <summary>
+      <RsLevel as="span" :variant="level" />
+      <span class="text-h6 rustlanges-dropdown-tree-topic__title">
+        {{ title }}
+      </span>
+      <RsBadge type="default" :variant="state" />
+      <RsArrowDown :width="24" :height="24" />
+    </summary>
+    <div>
+      <slot />
+    </div>
+  </details>
+</template>
diff --git a/js/vue/lib/components/rs-avatar.showcase.vue b/js/vue/lib/components/rs-avatar.showcase.vue
new file mode 100644
index 0000000..a8b9a44
--- /dev/null
+++ b/js/vue/lib/components/rs-avatar.showcase.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import Showcase from "@rustlanges/showcase/vue";
+import RsAvatar from "./rs-avatar.vue";
+
+const props = {
+  alt: "string",
+  size: {
+    kind: "number",
+    default: 32,
+  },
+  avatarUrl: {
+    kind: "string",
+    default:
+      "https://images.unsplash.com/photo-1575936123452-b67c3203c357?fm=jpg&q=60&w=3000&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8aW1hZ2V8ZW58MHx8MHx8fDA%3D",
+  },
+};
+</script>
+
+<template>
+  <Showcase name="Avatar" :props="props" :component="RsAvatar" />
+</template>
diff --git a/js/vue/lib/components/rs-avatar.vue b/js/vue/lib/components/rs-avatar.vue
new file mode 100644
index 0000000..044e177
--- /dev/null
+++ b/js/vue/lib/components/rs-avatar.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { computed, useAttrs, type CSSProperties } from "vue";
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(
+  defineProps<{
+    avatarUrl: string;
+    alt?: string;
+    size?: number;
+    as?: "div" | "a" | "button" | "span";
+  }>(),
+  {
+    alt: undefined,
+    size: 32,
+    as: "div",
+  }
+);
+
+const attrs = useAttrs();
+
+const className = computed(() => ["rustlanges-avatar", attrs.class]);
+
+const style = computed<CSSProperties>(() => ({
+  width: `${props.size}px`,
+  height: `${props.size}px`,
+}));
+</script>
+
+<template>
+  <component :is="as" :class="className" :style="style">
+    <img class="rustlanges-avatar__img" :src="avatarUrl" :alt="alt" />
+  </component>
+</template>
diff --git a/js/vue/lib/components/rs-badge.showcase.vue b/js/vue/lib/components/rs-badge.showcase.vue
new file mode 100644
index 0000000..2d20003
--- /dev/null
+++ b/js/vue/lib/components/rs-badge.showcase.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import Showcase from "@rustlanges/showcase/vue";
+import RsBadge from "./rs-badge.vue";
+
+const props = {
+  variant: {
+    kind: "string",
+    default: "completed",
+    options: ["completed", "reading", "pending", "unread"],
+  },
+  type: {
+    kind: "string",
+    default: "text",
+    options: ["text", "default", "numeric"],
+  },
+  count: {
+    kind: "number",
+    default: 1,
+  },
+};
+</script>
+
+<template>
+  <Showcase name="Badge" :props="props" :component="RsBadge" />
+</template>
diff --git a/js/vue/lib/components/rs-badge.vue b/js/vue/lib/components/rs-badge.vue
new file mode 100644
index 0000000..6759fe7
--- /dev/null
+++ b/js/vue/lib/components/rs-badge.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+const BADGE_VARIANTS = {
+  completed: "rustlanges-badge--variant-completed",
+  reading: "rustlanges-badge--variant-reading",
+  pending: "rustlanges-badge--variant-pending",
+  unread: "rustlanges-badge--variant-unread",
+} as const;
+
+const BADGE_TYPE = {
+  default: "rustlanges-badge--type-default",
+  numeric: "rustlanges-badge--type-numeric",
+  text: undefined,
+} as const;
+
+const BADGE_TEXT = {
+  completed: "Completo",
+  reading: "Leyendo",
+  pending: "Pendiente",
+  unread: "No leído",
+} as const;
+
+const LIMIT_NUMERIC = 9;
+
+type BadgeVariant = keyof typeof BADGE_VARIANTS;
+type BadgeType = keyof typeof BADGE_TYPE;
+
+const props = withDefaults(
+  defineProps<{
+    type?: BadgeType;
+    variant: BadgeVariant;
+    count?: number;
+  }>(),
+  {
+    type: "text",
+    count: undefined,
+  }
+);
+
+const className = computed(() => [
+  "text-paragraph-2 rustlanges-badge",
+  BADGE_VARIANTS[props.variant],
+  BADGE_TYPE[props.type],
+]);
+
+const displayValue = computed(() => {
+  if (props.type !== "numeric") return BADGE_TEXT[props.variant];
+  if ((props.count ?? 0) > LIMIT_NUMERIC) return `+${LIMIT_NUMERIC}`;
+  if (!props.count) return "0";
+  return props.count;
+});
+</script>
+
+<template>
+  <div :class="className">
+    <div class="rustlanges-badge__dot" />
+    <span>{{ displayValue }}</span>
+  </div>
+</template>
diff --git a/js/vue/lib/components/rs-button.vue b/js/vue/lib/components/rs-button.vue
index 7964ec0..97f5e37 100644
--- a/js/vue/lib/components/rs-button.vue
+++ b/js/vue/lib/components/rs-button.vue
@@ -8,13 +8,15 @@ const variants = {
 
 type ButtonVariants = keyof typeof variants;
 
-const { variant } = defineProps<{
+const { variant, as } = defineProps<{
   variant?: ButtonVariants;
+  as?: "button" | "a";
 }>();
 </script>
 
 <template>
-  <button
+  <component
+    :is="as ?? 'button'"
     :class="[
       variants[variant ?? 'primary'] ?? variants.primary,
       'text-button rustlanges-button',
@@ -23,5 +25,5 @@ const { variant } = defineProps<{
   >
     <slot v-if="variant !== 'icon'" />
     <slot name="icon" />
-  </button>
+  </component>
 </template>
diff --git a/js/vue/lib/components/rs-calendar-day.vue b/js/vue/lib/components/rs-calendar-day.vue
new file mode 100644
index 0000000..a92e075
--- /dev/null
+++ b/js/vue/lib/components/rs-calendar-day.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+const props = withDefaults(
+  defineProps<{
+    day: Date;
+    selected?: boolean;
+    disabled?: boolean;
+  }>(),
+  {
+    selected: false,
+    disabled: false,
+  }
+);
+
+const emit = defineEmits<{
+  (e: "select", date: Date): void;
+}>();
+
+const className = computed(() => [
+  "mb-1 flex min-h-9 min-w-9 cursor-pointer appearance-none items-center justify-center rounded-sm border-2 text-sm font-medium transition",
+  "border-black",
+  "dark:border-neutral-50",
+  props.disabled && "opacity-50 cursor-not-allowed",
+  props.selected && "bg-primary-500 text-light dark:text-neutral-950",
+]);
+
+const handleClick = () => {
+  if (!props.disabled) emit("select", props.day);
+};
+
+const isoDate = computed(() => props.day.toISOString().split("T")[0]);
+</script>
+
+<template>
+  <button
+    :class="className"
+    :aria-selected="selected"
+    :data-date="isoDate"
+    @click="handleClick"
+  >
+    {{ day.getDate() }}
+  </button>
+</template>
diff --git a/js/vue/lib/components/rs-calendar.showcase.vue b/js/vue/lib/components/rs-calendar.showcase.vue
new file mode 100644
index 0000000..c2e459a
--- /dev/null
+++ b/js/vue/lib/components/rs-calendar.showcase.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import Showcase from "@rustlanges/showcase/vue";
+import RsCalendar from "./rs-calendar.vue";
+
+const single = ref<Date | null>(null);
+</script>
+
+<template>
+  <Showcase name="Calendar">
+    <RsCalendar v-model:value="single" type="single" />
+  </Showcase>
+</template>
diff --git a/js/vue/lib/components/rs-calendar.vue b/js/vue/lib/components/rs-calendar.vue
new file mode 100644
index 0000000..d727f57
--- /dev/null
+++ b/js/vue/lib/components/rs-calendar.vue
@@ -0,0 +1,153 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import { addMonths, getCalendarDays, subMonths } from "../utils/date";
+import RsArrowLeft from "../icons/rs-arrow-left.vue";
+import RsArrowRight from "../icons/rs-arrow-right.vue";
+import RsButton from "./rs-button.vue";
+import RsCalendarDay from "./rs-calendar-day.vue";
+
+const WEEK_DAYS = [
+  "Lunes",
+  "Martes",
+  "Miercoles",
+  "Jueves",
+  "Viernes",
+  "Sabado",
+  "Domingo",
+];
+
+type RangeDate = { start?: Date; end?: Date };
+
+type SingleProps = {
+  type: "single";
+  value: Date | null;
+};
+type MultipleProps = {
+  type: "multiple";
+  value: Record<string, Date> | null;
+};
+type RangeProps = {
+  type: "range";
+  value: RangeDate | null;
+};
+
+const props = withDefaults(
+  defineProps<
+    (SingleProps | MultipleProps | RangeProps) & { defaultMonth?: Date }
+  >(),
+  {
+    defaultMonth: undefined,
+  }
+);
+
+type CalendarValue = Date | Record<string, Date> | RangeDate | null;
+
+const emit = defineEmits<{
+  (e: "change", value: CalendarValue): void;
+  (e: "update:value", value: CalendarValue): void;
+}>();
+
+const emitValue = (value: CalendarValue) => {
+  emit("change", value);
+  emit("update:value", value);
+};
+
+const month = ref<Date>(props.defaultMonth ?? new Date());
+
+const calendarDays = computed(() => getCalendarDays(month.value));
+
+const formattedMonth = computed(() =>
+  month.value.toLocaleDateString("es-MX", { month: "long" })
+);
+const formattedYear = computed(() => month.value.getFullYear());
+
+const handlePrev = () => {
+  month.value = subMonths(month.value, 1);
+};
+const handleNext = () => {
+  month.value = addMonths(month.value, 1);
+};
+
+const isSelected = (date: Date): boolean => {
+  if (props.type === "single") {
+    return props.value?.toDateString() === date.toDateString();
+  }
+  if (props.type === "multiple") {
+    const key = date.toISOString().split("T")[0];
+    return Boolean(props.value?.[key]);
+  }
+  // range
+  const { start, end } = props.value ?? {};
+  if (!start) return false;
+  if (!end) return date.toDateString() === start.toDateString();
+  return date >= start && date <= end;
+};
+
+const onSelectDay = (date: Date) => {
+  if (props.type === "single") {
+    if (props.value && isSelected(date)) emitValue(null);
+    else emitValue(date);
+    return;
+  }
+  if (props.type === "multiple") {
+    const key = date.toISOString().split("T")[0];
+    const current = (props.value ?? {}) as Record<string, Date>;
+    const updated = { ...current };
+    if (updated[key]) delete updated[key];
+    else updated[key] = date;
+    emitValue(updated);
+    return;
+  }
+  // range
+  const { start, end } = props.value ?? {};
+  if (!start || (start && end)) {
+    emitValue({ start: date });
+  } else if (date < start) {
+    emitValue({ start: date, end: start });
+  } else {
+    emitValue({ start, end: date });
+  }
+};
+
+const containerClass = [
+  "shadow-rb-black grid gap-4 rounded-[20px] border px-3 pb-10 pt-4",
+  "bg-light border-2 border-black text-black",
+  "dark:bg-dark dark:border-neutral-950 dark:text-neutral-50",
+];
+</script>
+
+<template>
+  <div :class="containerClass">
+    <div class="flex items-center justify-between">
+      <RsButton class="size-7 border-2" variant="icon" @click="handlePrev">
+        <template #icon>
+          <RsArrowLeft />
+        </template>
+      </RsButton>
+      <p class="flex-1 text-center text-sm font-medium capitalize">
+        {{ formattedMonth }} {{ formattedYear }}
+      </p>
+      <RsButton class="size-7 border-2" variant="icon" @click="handleNext">
+        <template #icon>
+          <RsArrowRight />
+        </template>
+      </RsButton>
+    </div>
+    <ul class="grid grid-cols-7 text-center" role="grid">
+      <li v-for="day in WEEK_DAYS" :key="day" class="mb-1.5 min-w-9 text-xs">
+        {{ day.slice(0, 2) }}
+      </li>
+      <li
+        v-for="{ date, currentMonth } in calendarDays"
+        :key="date.toISOString()"
+      >
+        <RsCalendarDay
+          :day="date"
+          :selected="isSelected(date)"
+          :disabled="!currentMonth"
+          @select="onSelectDay"
+        />
+      </li>
+    </ul>
+  </div>
+</template>
diff --git a/js/vue/lib/components/rs-card.showcase.vue b/js/vue/lib/components/rs-card.showcase.vue
new file mode 100644
index 0000000..ba25124
--- /dev/null
+++ b/js/vue/lib/components/rs-card.showcase.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import Showcase from "@rustlanges/showcase/vue";
+import RsCard from "./rs-card.vue";
+
+const props = {
+  clickable: "boolean",
+  disabled: "boolean",
+  className: {
+    kind: "string",
+    default: "min-w-50 min-h-50",
+  },
+  onClick: "callback",
+};
+</script>
+
+<template>
+  <Showcase name="Card" :props="props" :component="RsCard" />
+</template>
diff --git a/js/vue/lib/components/rs-card.vue b/js/vue/lib/components/rs-card.vue
new file mode 100644
index 0000000..2e903cf
--- /dev/null
+++ b/js/vue/lib/components/rs-card.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(
+  defineProps<{
+    clickable?: boolean;
+    disabled?: boolean;
+    as?: "div" | "a" | "button";
+  }>(),
+  {
+    clickable: false,
+    disabled: false,
+    as: "div",
+  }
+);
+
+const attrs = useAttrs();
+
+const className = computed(() => [
+  "rustlanges-card",
+  props.clickable && "rustlanges-card--clickable",
+  props.disabled && "disabled rustlanges-card--disabled",
+  attrs.class,
+]);
+</script>
+
+<template>
+  <component :is="as" :class="className">
+    <slot />
+  </component>
+</template>
diff --git a/js/vue/lib/components/rs-chip.showcase.vue b/js/vue/lib/components/rs-chip.showcase.vue
new file mode 100644
index 0000000..4bc7ef1
--- /dev/null
+++ b/js/vue/lib/components/rs-chip.showcase.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import Showcase from "@rustlanges/showcase/vue";
+import RsChip from "./rs-chip.vue";
+
+const props = {
+  variant: {
+    kind: "string",
+    default: "featured",
+    options: [
+      "featured",
+      "official",
+      "numeric",
+      "description",
+      "location",
+      "small",
+    ],
+  },
+  label: {
+    kind: "string",
+    default: "Destacado",
+  },
+};
+</script>
+
+<template>
+  <Showcase name="Chip" :props="props" :component="RsChip" />
+</template>
diff --git a/js/vue/lib/components/rs-chip.vue b/js/vue/lib/components/rs-chip.vue
new file mode 100644
index 0000000..90a67b9
--- /dev/null
+++ b/js/vue/lib/components/rs-chip.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import RsLocation from "../icons/rs-location.vue";
+import RsStarBold from "../icons/rs-star-bold.vue";
+
+defineOptions({ inheritAttrs: false });
+
+const variants = {
+  featured: "rustlanges-chip--featured",
+  official: "rustlanges-chip--official",
+  numeric: "rustlanges-chip--numeric",
+  description: "rustlanges-chip--description",
+  location: "rustlanges-chip--location",
+  small: "rustlanges-chip--small",
+} as const;
+
+type ChipVariant = keyof typeof variants;
+
+const icons: Record<ChipVariant, unknown> = {
+  featured: RsStarBold,
+  official: null,
+  numeric: null,
+  description: null,
+  location: RsLocation,
+  small: RsLocation,
+};
+
+const props = withDefaults(
+  defineProps<{
+    variant?: ChipVariant;
+    label?: string;
+  }>(),
+  {
+    variant: "featured",
+    label: undefined,
+  }
+);
+
+const attrs = useAttrs();
+
+const className = computed(() => [
+  variants[props.variant],
+  "rustlanges-chip",
+  attrs.class,
+]);
+
+const icon = computed(() => icons[props.variant]);
+
+const text = computed(() =>
+  props.variant === "numeric" ? `#${props.label ?? ""}` : props.label
+);
+</script>
+
+<template>
+  <div :class="className">
+    <component :is="icon" v-if="icon" />
+    {{ text }}
+  </div>
+</template>
diff --git a/js/vue/lib/components/rs-collaborators.showcase.vue b/js/vue/lib/components/rs-collaborators.showcase.vue
new file mode 100644
index 0000000..9d676bc
--- /dev/null
+++ b/js/vue/lib/components/rs-collaborators.showcase.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import Showcase from "@rustlanges/showcase/vue";
+import RsCollaborators from "./rs-collaborators.vue";
+
+const collaborator = {
+  avatarUrl:
+    "https://images.unsplash.com/photo-1575936123452-b67c3203c357?fm=jpg&q=60&w=3000&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8aW1hZ2V8ZW58MHx8MHx8fDA%3D",
+  nickname: "Colaborador",
+};
+
+const sourceUrl = "https://github.com/RustLangES/design-system-components";
+
+const fourCollaborators = Array.from({ length: 4 }, () => ({
+  ...collaborator,
+}));
+const singleCollaborator = [collaborator];
+const sevenCollaborators = Array.from({ length: 7 }, () => ({
+  ...collaborator,
+}));
+</script>
+
+<template>
+  <Showcase name="Collaborators">
+    <div class="grid w-full justify-center gap-4">
+      <div class="w-60">
+        <RsCollaborators
+          :collaborators="fourCollaborators"
+          :source-url="sourceUrl"
+        />
+      </div>
+      <div class="w-60">
+        <RsCollaborators
+          :collaborators="singleCollaborator"
+          :source-url="sourceUrl"
+        />
+      </div>
+      <div class="w-60">
+        <RsCollaborators
+          :collaborators="sevenCollaborators"
+          :source-url="sourceUrl"
+        />
+      </div>
+    </div>
+  </Showcase>
+</template>
diff --git a/js/vue/lib/components/rs-collaborators.vue b/js/vue/lib/components/rs-collaborators.vue
new file mode 100644
index 0000000..38c334d
--- /dev/null
+++ b/js/vue/lib/components/rs-collaborators.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import RsAvatar from "./rs-avatar.vue";
+import RsButton from "./rs-button.vue";
+import RsGithub from "../icons/rs-github.vue";
+
+const MAX_COLLABORATORS = 4;
+
+type Collaborator = {
+  avatarUrl: string;
+  nickname: string;
+};
+
+const props = withDefaults(
+  defineProps<{
+    collaborators?: Collaborator[];
+    sourceUrl: string;
+  }>(),
+  {
+    collaborators: () => [],
+  }
+);
+
+const visibleCollaborators = computed(() =>
+  props.collaborators.slice(0, MAX_COLLABORATORS)
+);
+
+const isSingle = computed(() => props.collaborators.length === 1);
+
+const extraCount = computed(() =>
+  props.collaborators.length > MAX_COLLABORATORS
+    ? props.collaborators.length - MAX_COLLABORATORS
+    : 0
+);
+</script>
+
+<template>
+  <div class="rustlanges-collaborators">
+    <div class="rustlanges-collaborators__avatars">
+      <RsAvatar
+        v-for="(collab, idx) in visibleCollaborators"
+        :key="idx"
+        :avatar-url="collab.avatarUrl"
+        :alt="collab.nickname"
+        :style="{ marginLeft: idx ? '-12px' : '0' }"
+      />
+
+      <span v-if="isSingle" class="text-caption pl-2">
+        {{ collaborators[0]?.nickname }}
+      </span>
+
+      <span v-if="extraCount > 0" class="text-caption pl-2">
+        +{{ extraCount }}
+      </span>
+    </div>
+
+    <RsButton
+      as="a"
+      variant="icon"
+      :href="sourceUrl"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <template #icon>
+        <RsGithub />
+      </template>
+    </RsButton>
+  </div>
+</template>
diff --git a/js/vue/lib/components/rs-contact-form.showcase.vue b/js/vue/lib/components/rs-contact-form.showcase.vue
new file mode 100644
index 0000000..76b1365
--- /dev/null
+++ b/js/vue/lib/components/rs-contact-form.showcase.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import Showcase from "@rustlanges/showcase/vue";
+import RsContactForm from "./rs-contact-form.vue";
+</script>
+
+<template>
+  <Showcase name="ContactForm">
+    <RsContactForm />
+  </Showcase>
+</template>
diff --git a/js/vue/lib/components/rs-contact-form.vue b/js/vue/lib/components/rs-contact-form.vue
new file mode 100644
index 0000000..59f7740
--- /dev/null
+++ b/js/vue/lib/components/rs-contact-form.vue
@@ -0,0 +1,169 @@
+<script setup lang="ts">
+import { computed, reactive, ref } from "vue";
+import RsLocation from "../icons/rs-location.vue";
+import RsButton from "./rs-button.vue";
+
+const ERROR_MESSAGE = "Mensaje de error";
+
+const BASE_INPUT_CLASS = [
+  "w-full p-2 rounded-md border outline-none transition",
+  "bg-white text-black dark:bg-[#2c2c2c] dark:text-white",
+  "border-1 border-black",
+  "focus:border-primary-500",
+  "placeholder-neutral-400 dark:placeholder-neutral-600",
+];
+
+const ERROR_INPUT_CLASS = "border-error-600 dark:border-error-500";
+
+type FormShape = {
+  name: string;
+  email: string;
+  location: string;
+  message: string;
+};
+
+const props = withDefaults(
+  defineProps<{
+    requiredFields?: Array<keyof FormShape>;
+    submitLabel?: string;
+    initialValue?: Partial<FormShape>;
+  }>(),
+  {
+    requiredFields: () => ["name", "email", "location"],
+    submitLabel: "Enviar",
+    initialValue: () => ({}),
+  }
+);
+
+const emit = defineEmits<{
+  (e: "submit", value: FormShape): void;
+}>();
+
+const form = reactive<FormShape>({
+  name: props.initialValue.name ?? "",
+  email: props.initialValue.email ?? "",
+  location: props.initialValue.location ?? "",
+  message: props.initialValue.message ?? "",
+});
+
+const errors = ref<Partial<Record<keyof FormShape, string>>>({});
+
+const inputClass = (field: keyof FormShape) => [
+  ...BASE_INPUT_CLASS,
+  errors.value[field] && ERROR_INPUT_CLASS,
+];
+
+const handleBlur = (field: keyof FormShape) => {
+  if (!props.requiredFields.includes(field)) return;
+  if (!form[field]) {
+    errors.value = { ...errors.value, [field]: ERROR_MESSAGE };
+  } else {
+    const next = { ...errors.value };
+    delete next[field];
+    errors.value = next;
+  }
+};
+
+const handleInput = (field: keyof FormShape) => {
+  if (errors.value[field]) {
+    const next = { ...errors.value };
+    delete next[field];
+    errors.value = next;
+  }
+};
+
+const handleSubmit = () => {
+  const next: Partial<Record<keyof FormShape, string>> = {};
+  for (const field of props.requiredFields) {
+    if (!form[field]) next[field] = ERROR_MESSAGE;
+  }
+  errors.value = next;
+  if (Object.keys(next).length === 0) emit("submit", { ...form });
+};
+
+const hasErrors = computed(() => Object.keys(errors.value).length > 0);
+</script>
+
+<template>
+  <form
+    class="@container border-1 shadow-rb-black bg-light w-full max-w-xl rounded-xl border-black p-6 dark:bg-neutral-900"
+    @submit.prevent="handleSubmit"
+  >
+    <div class="@md:grid-cols-2 grid grid-cols-1 gap-4">
+      <div>
+        <input
+          v-model="form.name"
+          name="name"
+          placeholder="Nombre"
+          :class="inputClass('name')"
+          @input="handleInput('name')"
+          @blur="handleBlur('name')"
+        />
+        <p
+          v-if="errors.name"
+          class="text-error-800 dark:text-error-300 mt-1 text-sm"
+        >
+          {{ errors.name }}
+        </p>
+      </div>
+      <div>
+        <input
+          v-model="form.email"
+          name="email"
+          placeholder="Email"
+          :class="inputClass('email')"
+          @input="handleInput('email')"
+          @blur="handleBlur('email')"
+        />
+        <p
+          v-if="errors.email"
+          class="text-error-800 dark:text-error-300 mt-1 text-sm"
+        >
+          {{ errors.email }}
+        </p>
+      </div>
+    </div>
+
+    <div class="mt-4">
+      <div class="relative">
+        <RsLocation
+          class="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 transform text-gray-500 dark:text-gray-400"
+        />
+        <input
+          v-model="form.location"
+          name="location"
+          placeholder="Ubicación"
+          :class="[...inputClass('location'), 'pl-10']"
+          @input="handleInput('location')"
+          @blur="handleBlur('location')"
+        />
+      </div>
+      <p
+        v-if="errors.location"
+        class="text-error-800 dark:text-error-300 mt-1 text-sm"
+      >
+        {{ errors.location }}
+      </p>
+    </div>
+
+    <div class="mt-4">
+      <textarea
+        v-model="form.message"
+        name="message"
+        :rows="4"
+        placeholder="Mensaje"
+        :class="[...BASE_INPUT_CLASS, 'resize-none']"
+      />
+    </div>
+
+    <div class="mt-6">
+      <RsButton
+        type="submit"
+        class="@md:w-fit @md:float-right w-full"
+        :disabled="hasErrors"
+      >
+        {{ submitLabel }}
+      </RsButton>
+    </div>
+  </form>
+</template>
diff --git a/js/vue/lib/components/rs-dropdown.showcase.vue b/js/vue/lib/components/rs-dropdown.showcase.vue
new file mode 100644
index 0000000..304fc8c
--- /dev/null
+++ b/js/vue/lib/components/rs-dropdown.showcase.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import Showcase from "@rustlanges/showcase/vue";
+import RsDropdown from "./rs-dropdown.vue";
+
+const props = {
+  "onUpdate:modelValue": "callback",
+  modelValue: {
+    kind: "string",
+    default: "completed",
+    options: ["completed", "pending", "reading", "unread"],
+  },
+};
+</script>
+
+<template>
+  <Showcase name="Dropdown" :props="props" :component="RsDropdown" />
+</template>
diff --git a/js/vue/lib/components/rs-dropdown.vue b/js/vue/lib/components/rs-dropdown.vue
new file mode 100644
index 0000000..27315e9
--- /dev/null
+++ b/js/vue/lib/components/rs-dropdown.vue
@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import RsBadge from "./rs-badge.vue";
+import RsArrowDown from "../icons/rs-arrow-down.vue";
+import RsArrowUp from "../icons/rs-arrow-up.vue";
+
+const BADGE_TEXT = {
+  completed: "Completo",
+  reading: "Leyendo",
+  pending: "Pendiente",
+  unread: "No leído",
+} as const;
+
+const DROPDOWN_STATUS_VARIANTS: Record<BadgeVariant, string[]> = {
+  completed: [
+    "bg-success-100 text-success-600 [&>div]:bg-success-600",
+    "dark:bg-success-900 dark:text-success-400 dark:[&>div]:bg-success-400",
+  ],
+  reading: [
+    "bg-warning-100 text-warning-500 [&>div]:bg-warning-500",
+    "dark:bg-warning-950 dark:text-warning-300 [&>div]:bg-warning-300",
+  ],
+  pending: [
+    "bg-error-100 text-error-600 [&>div]:bg-error-600",
+    "dark:bg-error-950 dark:text-error-300 [&>div]:bg-error-300",
+  ],
+  unread: [
+    "bg-neutral-100 text-neutral-500 [&>div]:bg-neutral-500",
+    "dark:bg-neutral-950 dark:text-neutral-300 [&>div]:bg-neutral-300",
+  ],
+};
+
+const DROPDOWN_OPTIONS: Array<{ label: string; value: BadgeVariant }> = [
+  { label: "Completo", value: "completed" },
+  { label: "Leyendo", value: "reading" },
+  { label: "Pendiente", value: "pending" },
+  { label: "No leído", value: "unread" },
+];
+
+type BadgeVariant = keyof typeof BADGE_TEXT;
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: BadgeVariant;
+    value?: BadgeVariant;
+  }>(),
+  {
+    modelValue: undefined,
+    value: undefined,
+  }
+);
+
+const emit = defineEmits<{
+  (e: "change", value: BadgeVariant): void;
+  (e: "update:modelValue", value: BadgeVariant): void;
+}>();
+
+const current = computed<BadgeVariant>(
+  () => props.modelValue ?? props.value ?? "unread"
+);
+
+const open = ref(false);
+
+const toggle = () => {
+  open.value = !open.value;
+};
+
+const select = (value: BadgeVariant) => {
+  emit("change", value);
+  emit("update:modelValue", value);
+  open.value = false;
+};
+
+const triggerClass = computed(() => [
+  "text-paragraph-2 rustlanges-dropdown__view",
+  ...DROPDOWN_STATUS_VARIANTS[current.value],
+]);
+
+const contentClass = computed(() => [
+  "rustlanges-dropdown__content",
+  open.value
+    ? "rustlanges-dropdown__content--open"
+    : "rustlanges-dropdown__content--closed",
+]);
+
+const triggerText = computed(() => BADGE_TEXT[current.value]);
+</script>
+
+<template>
+  <div class="rustlanges-dropdown">
+    <button :class="triggerClass" @click="toggle">
+      <div class="rustlanges-dropdown__view-dot" />
+      <span class="mr-2">{{ triggerText }}</span>
+      <component
+        :is="open ? RsArrowUp : RsArrowDown"
+        class="rustlanges-dropdown__view-icon"
+      />
+    </button>
+    <div :class="contentClass">
+      <ul v-if="open" class="rustlanges-dropdown__list">
+        <li
+          v-for="opt in DROPDOWN_OPTIONS"
+          :key="opt.value"
+          class="rustlanges-dropdown__list-item"
+          @click="select(opt.value)"
+        >
+          <RsBadge type="text" :variant="opt.value" />
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
diff --git a/js/vue/lib/components/rs-input-search.showcase.vue b/js/vue/lib/components/rs-input-search.showcase.vue
new file mode 100644
index 0000000..3678f08
--- /dev/null
+++ b/js/vue/lib/components/rs-input-search.showcase.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import Showcase from "@rustlanges/showcase/vue";
+import RsInputSearch from "./rs-input-search.vue";
+
+const filters = [
+  { label: "Recientes", value: "recent" },
+  { label: "ES", value: "es" },
+  { label: "EN", value: "en" },
+  { label: "Libros", value: "books" },
+  { label: "Guías", value: "guides" },
+  { label: "Frameworks", value: "frameworks" },
+  { label: "Librerías", value: "libraries" },
+  { label: "Multinivel", value: "multi" },
+  { label: "Principiante", value: "beginner" },
+  { label: "Intermedio", value: "intermediate" },
+  { label: "Avanzado", value: "advanced" },
+];
+</script>
+
+<template>
+  <Showcase name="InputSearchPlain">
+    <RsInputSearch placeholder="Buscar" />
+  </Showcase>
+
+  <Showcase name="InputSearchWithFilters">
+    <RsInputSearch placeholder="Buscar" :filters="filters" />
+  </Showcase>
+</template>
diff --git a/js/vue/lib/components/rs-input-search.vue b/js/vue/lib/components/rs-input-search.vue
new file mode 100644
index 0000000..771cb09
--- /dev/null
+++ b/js/vue/lib/components/rs-input-search.vue
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import { computed, ref, useAttrs } from "vue";
+import RsTag from "./rs-tag.vue";
+import RsSearch from "../icons/rs-search.vue";
+import RsFilter from "../icons/rs-filter.vue";
+
+defineOptions({ inheritAttrs: false });
+
+type Option = { label: string; value: string };
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string;
+    filters?: Option[];
+    activeFilters?: Option[];
+    placeholder?: string;
+  }>(),
+  {
+    modelValue: "",
+    filters: () => [],
+    activeFilters: () => [],
+    placeholder: "Buscar",
+  }
+);
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: string): void;
+  (e: "changeFilter", value: Option[]): void;
+}>();
+
+const attrs = useAttrs();
+const filterOpen = ref(false);
+
+const hasFilter = computed(() => props.filters.length > 0);
+
+const containerClass = computed(() => [
+  "rustlanges-input-search-container",
+  attrs.class,
+]);
+
+const labelClass = computed(() => [
+  "rustlanges-input-search",
+  hasFilter.value && "rustlanges-input-search--filter",
+]);
+
+const dropdownClass = computed(() => [
+  "rustlanges-input-search-backdrop__content",
+  filterOpen.value
+    ? "rustlanges-input-search-backdrop__content--open"
+    : "rustlanges-input-search-backdrop__content--closed",
+]);
+
+const isSelected = (filter: Option) =>
+  props.activeFilters.some(({ value }) => value === filter.value);
+
+const handleSelectFilter = (filter: Option) => {
+  if (isSelected(filter)) {
+    emit(
+      "changeFilter",
+      props.activeFilters.filter(({ value }) => value !== filter.value)
+    );
+  } else {
+    emit("changeFilter", [...props.activeFilters, filter]);
+  }
+};
+
+const toggleFilters = () => {
+  filterOpen.value = !filterOpen.value;
+};
+
+const closeFilters = () => {
+  if (hasFilter.value) filterOpen.value = false;
+};
+
+const onInput = (event: Event) => {
+  emit("update:modelValue", (event.target as HTMLInputElement).value);
+};
+</script>
+
+<template>
+  <div :class="containerClass">
+    <label :class="labelClass">
+      <RsSearch :width="24" :height="24" />
+      <input
+        v-bind="$attrs"
+        type="text"
+        :placeholder="placeholder"
+        :value="modelValue"
+        class="text-caption"
+        @click="closeFilters"
+        @input="onInput"
+      />
+    </label>
+    <div class="rustlanges-input-search__filter">
+      <button v-if="hasFilter" tabindex="0" @click="toggleFilters">
+        <RsFilter :width="24" :height="24" />
+      </button>
+      <div :class="dropdownClass">
+        <ul v-if="filterOpen" class="rustlanges-input-search-backdrop__list">
+          <li
+            v-for="filter in filters"
+            :key="filter.value"
+            @click="handleSelectFilter(filter)"
+          >
+            <RsTag
+              as="button"
+              tabindex="0"
+              :selected="isSelected(filter)"
+              :label="filter.label"
+            />
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/js/vue/lib/components/rs-input.showcase.vue b/js/vue/lib/components/rs-input.showcase.vue
new file mode 100644
index 0000000..efdd608
--- /dev/null
+++ b/js/vue/lib/components/rs-input.showcase.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import Showcase from "@rustlanges/showcase/vue";
+import RsInput from "./rs-input.vue";
+
+const props = {
+  placeholder: {
+    kind: "string",
+    default: "Input",
+  },
+  disabled: "boolean",
+  hasError: "boolean",
+  errorMessage: {
+    kind: "string",
+    default: "Error",
+  },
+};
+
+const slots = {
+  icon: "icon",
+};
+</script>
+
+<template>
+  <Showcase name="Input" :props="props" :slots="slots" :component="RsInput" />
+</template>
diff --git a/js/vue/lib/components/rs-input.vue b/js/vue/lib/components/rs-input.vue
new file mode 100644
index 0000000..dd7bbf1
--- /dev/null
+++ b/js/vue/lib/components/rs-input.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import clsx from "clsx";
+import { computed, useAttrs } from "vue";
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string | number;
+    hasError?: boolean;
+    errorMessage?: string;
+    disabled?: boolean;
+    type?: string;
+    placeholder?: string;
+  }>(),
+  {
+    modelValue: undefined,
+    hasError: undefined,
+    errorMessage: undefined,
+    disabled: false,
+    type: "text",
+    placeholder: undefined,
+  }
+);
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: string): void;
+}>();
+
+const attrs = useAttrs();
+
+const showError = computed(() => props.hasError ?? Boolean(props.errorMessage));
+
+const wrapperClass = computed(() =>
+  clsx(
+    "rustlanges-input",
+    showError.value && "rustlanges-input--error",
+    attrs.class as string | undefined
+  )
+);
+
+const onInput = (event: Event) => {
+  emit("update:modelValue", (event.target as HTMLInputElement).value);
+};
+</script>
+
+<template>
+  <div class="rustlanges-input__container">
+    <div :class="wrapperClass">
+      <span v-if="$slots.icon" class="rustlanges-input__icon">
+        <slot name="icon" />
+      </span>
+      <input
+        v-bind="$attrs"
+        class="rustlanges-input__inner"
+        :type="type"
+        :value="modelValue"
+        :disabled="disabled"
+        :placeholder="placeholder"
+        @input="onInput"
+      />
+    </div>
+    <span v-if="showError && errorMessage" class="rustlanges-input__error">
+      {{ errorMessage }}
+    </span>
+  </div>
+</template>
diff --git a/js/vue/lib/components/rs-level.showcase.vue b/js/vue/lib/components/rs-level.showcase.vue
new file mode 100644
index 0000000..56d9a64
--- /dev/null
+++ b/js/vue/lib/components/rs-level.showcase.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import Showcase from "@rustlanges/showcase/vue";
+import RsLevel from "./rs-level.vue";
+
+const props = {
+  variant: {
+    kind: "string",
+    default: "n1",
+    options: ["n1", "n2", "n3", "op"],
+  },
+};
+</script>
+
+<template>
+  <Showcase name="Level" :props="props" :component="RsLevel" />
+</template>
diff --git a/js/vue/lib/components/rs-level.vue b/js/vue/lib/components/rs-level.vue
new file mode 100644
index 0000000..8586727
--- /dev/null
+++ b/js/vue/lib/components/rs-level.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+
+defineOptions({ inheritAttrs: false });
+
+const LEVEL_VARIANTS = {
+  n1: "rustlanges-level--n1",
+  n2: "rustlanges-level--n2",
+  n3: "rustlanges-level--n3",
+  op: "rustlanges-level--op",
+} as const;
+
+const LEVEL_LABELS = {
+  n1: "N1",
+  n2: "N2",
+  n3: "N3",
+  op: "Op",
+} as const;
+
+type LevelVariant = keyof typeof LEVEL_VARIANTS;
+
+const props = withDefaults(
+  defineProps<{
+    variant: LevelVariant;
+    as?: "div" | "span" | "button" | "a";
+  }>(),
+  {
+    as: "div",
+  }
+);
+
+const attrs = useAttrs();
+
+const className = computed(() => [
+  "rustlanges-level",
+  LEVEL_VARIANTS[props.variant],
+  attrs.class,
+]);
+
+const label = computed(() => LEVEL_LABELS[props.variant]);
+</script>
+
+<template>
+  <component :is="as" :class="className">
+    {{ label }}
+  </component>
+</template>
diff --git a/js/vue/lib/components/rs-progress-bar.showcase.vue b/js/vue/lib/components/rs-progress-bar.showcase.vue
new file mode 100644
index 0000000..dad200a
--- /dev/null
+++ b/js/vue/lib/components/rs-progress-bar.showcase.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import Showcase from "@rustlanges/showcase/vue";
+import RsProgressBar from "./rs-progress-bar.vue";
+
+const props = {
+  percentage: {
+    kind: "number",
+    default: 30,
+  },
+};
+</script>
+
+<template>
+  <Showcase name="ProgressBar" :props="props" :component="RsProgressBar" />
+</template>
diff --git a/js/vue/lib/components/rs-progress-bar.vue b/js/vue/lib/components/rs-progress-bar.vue
new file mode 100644
index 0000000..ff88457
--- /dev/null
+++ b/js/vue/lib/components/rs-progress-bar.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { computed, type CSSProperties } from "vue";
+import RsFerris from "../icons/rs-ferris.vue";
+
+const props = defineProps<{
+  percentage: number;
+}>();
+
+const percentage = computed(() => Number(props.percentage ?? 0));
+
+const isInMinLimit = computed(() => percentage.value < 25);
+const progressIsInLimit = computed(
+  () => percentage.value === 0 || percentage.value === 100
+);
+
+const position = computed<CSSProperties>(() => ({
+  right: isInMinLimit.value ? "auto" : `${100 - percentage.value}%`,
+  left: isInMinLimit.value ? `${percentage.value}%` : "auto",
+}));
+
+const fillStyle = computed<CSSProperties>(() => ({
+  width: `${percentage.value}%`,
+}));
+
+const labelClass = computed(() => [
+  "text-overline rustlanges-progress-bar__percentage",
+  isInMinLimit.value && "rustlanges-progress-bar__percentage--invert",
+]);
+
+const fillClass = computed(() => [
+  "rustlanges-progress-bar__fill",
+  progressIsInLimit.value && "rustlanges-progress-bar__fill--limit",
+]);
+</script>
+
+<template>
+  <div class="rustlanges-progress-bar__container">
+    <div class="rustlanges-progress-bar">
+      <span :class="labelClass" :style="position">
+        {{ percentage }}%
+        <RsFerris :width="15" :height="15" />
+      </span>
+      <div :class="fillClass" :style="fillStyle" />
+    </div>
+  </div>
+</template>
diff --git a/js/vue/lib/components/rs-radio.showcase.vue b/js/vue/lib/components/rs-radio.showcase.vue
new file mode 100644
index 0000000..a65e765
--- /dev/null
+++ b/js/vue/lib/components/rs-radio.showcase.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import Showcase from "@rustlanges/showcase/vue";
+import RsRadio from "./rs-radio.vue";
+
+const props = {
+  disabled: "boolean",
+  name: {
+    kind: "string",
+    default: "radio",
+  },
+};
+</script>
+
+<template>
+  <Showcase name="Radio" :props="props" :component="RsRadio" />
+</template>
diff --git a/js/vue/lib/components/rs-radio.vue b/js/vue/lib/components/rs-radio.vue
new file mode 100644
index 0000000..25dcc62
--- /dev/null
+++ b/js/vue/lib/components/rs-radio.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+
+defineOptions({ inheritAttrs: false });
+
+const props = defineProps<{
+  modelValue?: string | number | boolean;
+  value?: string | number;
+  name?: string;
+  disabled?: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: string | number | boolean): void;
+}>();
+
+const attrs = useAttrs();
+
+const className = computed(() => ["rustlanges-radio", attrs.class]);
+
+const checked = computed(() => {
+  if (props.value === undefined) return Boolean(props.modelValue);
+  return props.modelValue === props.value;
+});
+
+const onChange = (event: Event) => {
+  const target = event.target as HTMLInputElement;
+  if (props.value !== undefined) emit("update:modelValue", props.value);
+  else emit("update:modelValue", target.checked);
+};
+</script>
+
+<template>
+  <input
+    type="radio"
+    :class="className"
+    :name="name"
+    :value="value"
+    :checked="checked"
+    :disabled="disabled"
+    @change="onChange"
+  />
+</template>
diff --git a/js/vue/lib/components/rs-tag.showcase.vue b/js/vue/lib/components/rs-tag.showcase.vue
new file mode 100644
index 0000000..1fd0c9f
--- /dev/null
+++ b/js/vue/lib/components/rs-tag.showcase.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import Showcase from "@rustlanges/showcase/vue";
+import RsTag from "./rs-tag.vue";
+
+const props = {
+  label: {
+    kind: "string",
+    default: "tag",
+  },
+  selected: "boolean",
+  as: {
+    kind: "string",
+    optional: true,
+    options: ["span", "button", "a"],
+  },
+  onClick: "callback",
+};
+</script>
+
+<template>
+  <Showcase name="Tag" :props="props" :component="RsTag" />
+</template>
diff --git a/js/vue/lib/components/rs-tag.vue b/js/vue/lib/components/rs-tag.vue
new file mode 100644
index 0000000..914b275
--- /dev/null
+++ b/js/vue/lib/components/rs-tag.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(
+  defineProps<{
+    label?: string;
+    selected?: boolean;
+    as?: "span" | "button" | "a" | "li";
+  }>(),
+  {
+    label: undefined,
+    selected: false,
+    as: "span",
+  }
+);
+
+const emit = defineEmits<{
+  (e: "update:selected", value: boolean): void;
+}>();
+
+const attrs = useAttrs();
+
+const className = computed(() => [
+  "rustlanges-tag",
+  props.selected ? "rustlanges-tag--selected" : "rustlanges-tag--default",
+  attrs.class,
+]);
+
+const onClick = () => {
+  emit("update:selected", !props.selected);
+};
+</script>
+
+<template>
+  <component :is="as" v-bind="$attrs" :class="className" @click="onClick">
+    <slot>{{ label }}</slot>
+  </component>
+</template>
diff --git a/js/vue/lib/icons/index.ts b/js/vue/lib/icons/index.ts
index d66803f..d21e5cf 100644
--- a/js/vue/lib/icons/index.ts
+++ b/js/vue/lib/icons/index.ts
@@ -1 +1,10 @@
 export { default as RsLocation } from "./rs-location.vue";
+export { default as RsStarBold } from "./rs-star-bold.vue";
+export { default as RsGithub } from "./rs-github.vue";
+export { default as RsSearch } from "./rs-search.vue";
+export { default as RsFilter } from "./rs-filter.vue";
+export { default as RsArrowDown } from "./rs-arrow-down.vue";
+export { default as RsArrowUp } from "./rs-arrow-up.vue";
+export { default as RsArrowLeft } from "./rs-arrow-left.vue";
+export { default as RsArrowRight } from "./rs-arrow-right.vue";
+export { default as RsFerris } from "./rs-ferris.vue";
diff --git a/js/vue/lib/icons/rs-arrow-down.vue b/js/vue/lib/icons/rs-arrow-down.vue
new file mode 100644
index 0000000..e35bc82
--- /dev/null
+++ b/js/vue/lib/icons/rs-arrow-down.vue
@@ -0,0 +1,18 @@
+<template>
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    v-bind="$attrs"
+  >
+    <path
+      d="M7 10L12 15L17 10"
+      stroke="currentColor"
+      stroke-width="2.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+</template>
diff --git a/js/vue/lib/icons/rs-arrow-left.vue b/js/vue/lib/icons/rs-arrow-left.vue
new file mode 100644
index 0000000..87c43b5
--- /dev/null
+++ b/js/vue/lib/icons/rs-arrow-left.vue
@@ -0,0 +1,18 @@
+<template>
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    v-bind="$attrs"
+  >
+    <path
+      d="M14 7L9 12L14 17"
+      stroke="currentColor"
+      stroke-width="2.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+</template>
diff --git a/js/vue/lib/icons/rs-arrow-right.vue b/js/vue/lib/icons/rs-arrow-right.vue
new file mode 100644
index 0000000..13efb2d
--- /dev/null
+++ b/js/vue/lib/icons/rs-arrow-right.vue
@@ -0,0 +1,18 @@
+<template>
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    v-bind="$attrs"
+  >
+    <path
+      d="M10 17L15 12L10 7"
+      stroke="currentColor"
+      stroke-width="2.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+</template>
diff --git a/js/vue/lib/icons/rs-arrow-up.vue b/js/vue/lib/icons/rs-arrow-up.vue
new file mode 100644
index 0000000..14a4cf8
--- /dev/null
+++ b/js/vue/lib/icons/rs-arrow-up.vue
@@ -0,0 +1,15 @@
+<template>
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    v-bind="$attrs"
+  >
+    <path
+      d="M11.575 10.8305L6.97545 15.43C6.75923 15.6463 6.48404 15.7544 6.14989 15.7544C5.81573 15.7544 5.54055 15.6463 5.32433 15.43C5.10811 15.2138 5 14.9386 5 14.6045C5 14.2703 5.10811 13.9951 5.32433 13.7789L10.7494 8.35381C10.9853 8.11794 11.2605 8 11.575 8C11.8895 8 12.1647 8.11794 12.4006 8.35381L17.8257 13.7789C18.0419 13.9951 18.15 14.2703 18.15 14.6045C18.15 14.9386 18.0419 15.2138 17.8257 15.43C17.6095 15.6463 17.3343 15.7544 17.0001 15.7544C16.666 15.7544 16.3908 15.6463 16.1746 15.43L11.575 10.8305Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
diff --git a/js/vue/lib/icons/rs-ferris.vue b/js/vue/lib/icons/rs-ferris.vue
new file mode 100644
index 0000000..6c28a47
--- /dev/null
+++ b/js/vue/lib/icons/rs-ferris.vue
@@ -0,0 +1,31 @@
+<template>
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 14 13"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    v-bind="$attrs"
+  >
+    <path
+      d="M13.2682 6.41193C13.2127 6.1644 13.7349 5.75338 13.651 5.51418C13.5671 5.27498 12.9078 5.28028 12.7984 5.05319C12.689 4.82611 13.1048 4.30381 12.9715 4.09035C12.8381 3.87688 12.1945 4.03055 12.0372 3.83298C11.8799 3.63542 12.1728 3.03364 11.9952 2.85424C11.8177 2.67484 11.2243 2.9693 11.0287 2.81261C10.8332 2.65592 10.983 2.00266 10.774 1.8702C10.565 1.73773 10.0442 2.15405 9.82098 2.04505C9.59771 1.93605 9.59621 1.26615 9.3647 1.18137C9.13319 1.09659 8.71737 1.62419 8.47387 1.56817C8.23037 1.51216 8.08352 0.859662 7.83853 0.830898C7.59353 0.802133 7.30808 1.4077 7.05559 1.4077C6.8031 1.4077 6.51914 0.802134 6.27414 0.829384C6.02915 0.856634 5.8793 1.51064 5.63655 1.56666C5.3938 1.62267 4.98323 1.09886 4.74947 1.18061C4.51571 1.26236 4.51571 1.93378 4.29319 2.0443C4.07067 2.15481 3.55146 1.7347 3.34017 1.86944C3.12889 2.00418 3.28098 2.6544 3.08544 2.81185C2.88989 2.9693 2.29425 2.67635 2.11894 2.85348C1.94362 3.03061 2.23207 3.63466 2.07473 3.83222C1.91739 4.02979 1.27606 3.87613 1.14269 4.08959C1.00933 4.30305 1.42515 4.82308 1.31577 5.05244C1.20638 5.28179 0.544811 5.27347 0.463145 5.51342C0.38148 5.75338 0.899195 6.16365 0.843752 6.41117C0.78831 6.65869 0.142478 6.80176 0.114007 7.05534C0.094527 7.24836 0.669933 7.50421 1.1382 7.69194C1.15468 7.69951 1.17266 7.70556 1.1899 7.71389C1.11671 7.99336 1.10196 8.28517 1.14659 8.57072C1.19123 8.85627 1.29426 9.12929 1.44913 9.37238C1.26773 9.66668 1.19943 10.018 1.25714 10.3597C1.31485 10.7015 1.49458 11.01 1.7623 11.2269L2.52801 11.8537C2.80538 12.0809 3.1578 12.1931 3.51399 12.1678L3.47054 10.7447L4.82964 10.7023C4.82275 10.498 4.77233 10.2976 4.68183 10.1147C4.59132 9.9318 4.46285 9.77078 4.30518 9.64261L3.53572 9.01661C3.37628 8.88637 3.19067 8.79277 2.99181 8.74231C2.79295 8.69186 2.58559 8.68575 2.38416 8.72442C2.3482 8.67068 2.22308 8.45722 2.28077 8.08858C3.58367 8.45116 5.24546 8.66614 7.05334 8.66614C8.86122 8.66614 10.4998 8.45268 11.8019 8.09691C11.8551 8.461 11.7315 8.67219 11.6963 8.72442C11.4947 8.68584 11.2873 8.69199 11.0883 8.74244C10.8894 8.79289 10.7036 8.88644 10.544 9.01661L9.77678 9.64261C9.61921 9.77089 9.49082 9.93192 9.40033 10.1148C9.30983 10.2976 9.25935 10.498 9.25232 10.7023L10.6114 10.7447L10.5672 12.1678C10.9246 12.1938 11.2785 12.0815 11.5569 11.8537L12.3256 11.2277C12.592 11.0098 12.7707 10.7014 12.8283 10.3601C12.886 10.0187 12.8186 9.66791 12.6388 9.37313C12.7929 9.13154 12.8956 8.86026 12.9405 8.57646C12.9854 8.29267 12.9714 8.00255 12.8996 7.72449C12.9258 7.71464 12.9497 7.7048 12.9745 7.69269C13.4435 7.50497 14.0189 7.24912 13.9994 7.05609C13.9702 6.80251 13.3244 6.65945 13.2682 6.41193ZM8.71287 7.87588C8.2034 7.87588 7.79058 7.40884 7.79058 6.83052C7.79058 6.25221 8.2034 5.78592 8.71287 5.78592C9.22235 5.78592 9.63592 6.25297 9.63592 6.83052C9.63592 7.40808 9.2231 7.87588 8.71287 7.87588Z"
+      fill="#FF6711"
+    />
+    <path
+      d="M8.71282 5.78589C8.20335 5.78589 7.79053 6.25293 7.79053 6.83049C7.79053 7.40804 8.20335 7.87584 8.71282 7.87584C9.2223 7.87584 9.63587 7.4088 9.63587 6.83049C9.63587 6.25217 9.22305 5.78589 8.71282 5.78589ZM8.61917 6.57312C8.45809 6.73587 8.23482 6.77599 8.11944 6.65942C8.00406 6.54284 8.04451 6.31727 8.20485 6.15453C8.36518 5.99178 8.59145 5.95318 8.70533 6.06748C8.81922 6.18178 8.781 6.40962 8.61917 6.57312Z"
+      fill="black"
+    />
+    <path
+      d="M6.32288 6.83049C6.32288 7.4088 5.90856 7.87584 5.39984 7.87584C4.89111 7.87584 4.47754 7.4088 4.47754 6.83049C4.47754 6.25217 4.88961 5.78589 5.39984 5.78589C5.91006 5.78589 6.32288 6.25217 6.32288 6.83049Z"
+      fill="black"
+    />
+    <path
+      d="M5.30565 6.57325C5.46745 6.40978 5.50588 6.18356 5.39147 6.06798C5.27707 5.9524 5.05316 5.99122 4.89136 6.15469C4.72956 6.31816 4.69113 6.54438 4.80553 6.65996C4.91994 6.77555 5.14385 6.73673 5.30565 6.57325Z"
+      fill="white"
+    />
+    <path
+      d="M8.61922 6.57315C8.45814 6.73589 8.23487 6.77601 8.11949 6.65944C8.00411 6.54287 8.04457 6.3173 8.2049 6.15455C8.36524 5.9918 8.5915 5.9532 8.70538 6.0675C8.81927 6.1818 8.78106 6.40964 8.61922 6.57315Z"
+      fill="white"
+    />
+  </svg>
+</template>
diff --git a/js/vue/lib/icons/rs-filter.vue b/js/vue/lib/icons/rs-filter.vue
new file mode 100644
index 0000000..a150b4a
--- /dev/null
+++ b/js/vue/lib/icons/rs-filter.vue
@@ -0,0 +1,15 @@
+<template>
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    v-bind="$attrs"
+  >
+    <path
+      d="M9 5.00001C8.73478 5.00001 8.48043 5.10537 8.29289 5.2929C8.10536 5.48044 8 5.73479 8 6.00001C8 6.26523 8.10536 6.51958 8.29289 6.70712C8.48043 6.89465 8.73478 7.00001 9 7.00001C9.26522 7.00001 9.51957 6.89465 9.70711 6.70712C9.89464 6.51958 10 6.26523 10 6.00001C10 5.73479 9.89464 5.48044 9.70711 5.2929C9.51957 5.10537 9.26522 5.00001 9 5.00001ZM6.17 5.00001C6.3766 4.41448 6.75974 3.90744 7.2666 3.5488C7.77346 3.19015 8.37909 2.99756 9 2.99756C9.62091 2.99756 10.2265 3.19015 10.7334 3.5488C11.2403 3.90744 11.6234 4.41448 11.83 5.00001H19C19.2652 5.00001 19.5196 5.10537 19.7071 5.2929C19.8946 5.48044 20 5.73479 20 6.00001C20 6.26523 19.8946 6.51958 19.7071 6.70712C19.5196 6.89465 19.2652 7.00001 19 7.00001H11.83C11.6234 7.58554 11.2403 8.09258 10.7334 8.45122C10.2265 8.80986 9.62091 9.00246 9 9.00246C8.37909 9.00246 7.77346 8.80986 7.2666 8.45122C6.75974 8.09258 6.3766 7.58554 6.17 7.00001H5C4.73478 7.00001 4.48043 6.89465 4.29289 6.70712C4.10536 6.51958 4 6.26523 4 6.00001C4 5.73479 4.10536 5.48044 4.29289 5.2929C4.48043 5.10537 4.73478 5.00001 5 5.00001H6.17ZM15 11C14.7348 11 14.4804 11.1054 14.2929 11.2929C14.1054 11.4804 14 11.7348 14 12C14 12.2652 14.1054 12.5196 14.2929 12.7071C14.4804 12.8947 14.7348 13 15 13C15.2652 13 15.5196 12.8947 15.7071 12.7071C15.8946 12.5196 16 12.2652 16 12C16 11.7348 15.8946 11.4804 15.7071 11.2929C15.5196 11.1054 15.2652 11 15 11ZM12.17 11C12.3766 10.4145 12.7597 9.90744 13.2666 9.5488C13.7735 9.19015 14.3791 8.99756 15 8.99756C15.6209 8.99756 16.2265 9.19015 16.7334 9.5488C17.2403 9.90744 17.6234 10.4145 17.83 11H19C19.2652 11 19.5196 11.1054 19.7071 11.2929C19.8946 11.4804 20 11.7348 20 12C20 12.2652 19.8946 12.5196 19.7071 12.7071C19.5196 12.8947 19.2652 13 19 13H17.83C17.6234 13.5855 17.2403 14.0926 16.7334 14.4512C16.2265 14.8099 15.6209 15.0025 15 15.0025C14.3791 15.0025 13.7735 14.8099 13.2666 14.4512C12.7597 14.0926 12.3766 13.5855 12.17 13H5C4.73478 13 4.48043 12.8947 4.29289 12.7071C4.10536 12.5196 4 12.2652 4 12C4 11.7348 4.10536 11.4804 4.29289 11.2929C4.48043 11.1054 4.73478 11 5 11H12.17ZM9 17C8.73478 17 8.48043 17.1054 8.29289 17.2929C8.10536 17.4804 8 17.7348 8 18C8 18.2652 8.10536 18.5196 8.29289 18.7071C8.48043 18.8947 8.73478 19 9 19C9.26522 19 9.51957 18.8947 9.70711 18.7071C9.89464 18.5196 10 18.2652 10 18C10 17.7348 9.89464 17.4804 9.70711 17.2929C9.51957 17.1054 9.26522 17 9 17ZM6.17 17C6.3766 16.4145 6.75974 15.9074 7.2666 15.5488C7.77346 15.1902 8.37909 14.9976 9 14.9976C9.62091 14.9976 10.2265 15.1902 10.7334 15.5488C11.2403 15.9074 11.6234 16.4145 11.83 17H19C19.2652 17 19.5196 17.1054 19.7071 17.2929C19.8946 17.4804 20 17.7348 20 18C20 18.2652 19.8946 18.5196 19.7071 18.7071C19.5196 18.8947 19.2652 19 19 19H11.83C11.6234 19.5855 11.2403 20.0926 10.7334 20.4512C10.2265 20.8099 9.62091 21.0025 9 21.0025C8.37909 21.0025 7.77346 20.8099 7.2666 20.4512C6.75974 20.0926 6.3766 19.5855 6.17 19H5C4.73478 19 4.48043 18.8947 4.29289 18.7071C4.10536 18.5196 4 18.2652 4 18C4 17.7348 4.10536 17.4804 4.29289 17.2929C4.48043 17.1054 4.73478 17 5 17H6.17Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
diff --git a/js/vue/lib/icons/rs-github.vue b/js/vue/lib/icons/rs-github.vue
new file mode 100644
index 0000000..162a565
--- /dev/null
+++ b/js/vue/lib/icons/rs-github.vue
@@ -0,0 +1,15 @@
+<template>
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    v-bind="$attrs"
+  >
+    <path
+      d="M12 2C10.6868 2 9.38642 2.25866 8.17317 2.7612C6.95991 3.26375 5.85752 4.00035 4.92893 4.92893C3.05357 6.8043 2 9.34784 2 12C2 16.42 4.87 20.17 8.84 21.5C9.34 21.58 9.5 21.27 9.5 21V19.31C6.73 19.91 6.14 17.97 6.14 17.97C5.68 16.81 5.03 16.5 5.03 16.5C4.12 15.88 5.1 15.9 5.1 15.9C6.1 15.97 6.63 16.93 6.63 16.93C7.5 18.45 8.97 18 9.54 17.76C9.63 17.11 9.89 16.67 10.17 16.42C7.95 16.17 5.62 15.31 5.62 11.5C5.62 10.39 6 9.5 6.65 8.79C6.55 8.54 6.2 7.5 6.75 6.15C6.75 6.15 7.59 5.88 9.5 7.17C10.29 6.95 11.15 6.84 12 6.84C12.85 6.84 13.71 6.95 14.5 7.17C16.41 5.88 17.25 6.15 17.25 6.15C17.8 7.5 17.45 8.54 17.35 8.79C18 9.5 18.38 10.39 18.38 11.5C18.38 15.32 16.04 16.16 13.81 16.41C14.17 16.72 14.5 17.33 14.5 18.26V21C14.5 21.27 14.66 21.59 15.17 21.5C19.14 20.16 22 16.42 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7362 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
diff --git a/js/vue/lib/icons/rs-search.vue b/js/vue/lib/icons/rs-search.vue
new file mode 100644
index 0000000..52c764c
--- /dev/null
+++ b/js/vue/lib/icons/rs-search.vue
@@ -0,0 +1,17 @@
+<template>
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    v-bind="$attrs"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M11 2C9.56238 2.00016 8.14571 2.3447 6.86859 3.00479C5.59146 3.66489 4.49105 4.62132 3.65947 5.79402C2.82788 6.96672 2.28933 8.32158 2.08889 9.74516C1.88844 11.1687 2.03194 12.6196 2.50738 13.9764C2.98281 15.3331 3.77634 16.5562 4.82154 17.5433C5.86673 18.5304 7.13318 19.2527 8.51487 19.6498C9.89656 20.0469 11.3533 20.1073 12.7631 19.8258C14.1729 19.5443 15.4947 18.9292 16.618 18.032L20.293 21.707C20.4816 21.8892 20.7342 21.99 20.9964 21.9877C21.2586 21.9854 21.5094 21.8802 21.6948 21.6948C21.8802 21.5094 21.9854 21.2586 21.9877 20.9964C21.99 20.7342 21.8892 20.4816 21.707 20.293L18.032 16.618C19.09 15.2939 19.7526 13.6979 19.9435 12.0138C20.1344 10.3297 19.8459 8.62586 19.1112 7.0985C18.3764 5.57113 17.2253 4.28228 15.7904 3.38029C14.3554 2.47831 12.6949 1.99985 11 2ZM5 11C5 10.2121 5.1552 9.43185 5.45673 8.7039C5.75825 7.97595 6.20021 7.31451 6.75736 6.75736C7.31451 6.20021 7.97595 5.75825 8.7039 5.45672C9.43186 5.15519 10.2121 5 11 5C11.7879 5 12.5682 5.15519 13.2961 5.45672C14.0241 5.75825 14.6855 6.20021 15.2426 6.75736C15.7998 7.31451 16.2418 7.97595 16.5433 8.7039C16.8448 9.43185 17 10.2121 17 11C17 12.5913 16.3679 14.1174 15.2426 15.2426C14.1174 16.3679 12.5913 17 11 17C9.4087 17 7.88258 16.3679 6.75736 15.2426C5.63214 14.1174 5 12.5913 5 11Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
diff --git a/js/vue/lib/icons/rs-star-bold.vue b/js/vue/lib/icons/rs-star-bold.vue
new file mode 100644
index 0000000..468d86d
--- /dev/null
+++ b/js/vue/lib/icons/rs-star-bold.vue
@@ -0,0 +1,15 @@
+<template>
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    v-bind="$attrs"
+  >
+    <path
+      d="M9.15299 5.408C10.42 3.136 11.053 2 12 2C12.947 2 13.58 3.136 14.847 5.408L15.175 5.996C15.535 6.642 15.715 6.965 15.995 7.178C16.275 7.391 16.625 7.47 17.325 7.628L17.961 7.772C20.421 8.329 21.65 8.607 21.943 9.548C22.235 10.488 21.397 11.469 19.72 13.43L19.286 13.937C18.81 14.494 18.571 14.773 18.464 15.117C18.357 15.462 18.393 15.834 18.465 16.577L18.531 17.254C18.784 19.871 18.911 21.179 18.145 21.76C17.379 22.341 16.227 21.811 13.925 20.751L13.328 20.477C12.674 20.175 12.347 20.025 12 20.025C11.653 20.025 11.326 20.175 10.672 20.477L10.076 20.751C7.77299 21.811 6.62099 22.341 5.85599 21.761C5.08899 21.179 5.21599 19.871 5.46899 17.254L5.53499 16.578C5.60699 15.834 5.64299 15.462 5.53499 15.118C5.42899 14.773 5.18999 14.494 4.71399 13.938L4.27999 13.43C2.60299 11.47 1.76499 10.489 2.05699 9.548C2.34899 8.607 3.57999 8.328 6.03999 7.772L6.67599 7.628C7.37499 7.47 7.72399 7.391 8.00499 7.178C8.28599 6.965 8.46499 6.642 8.82499 5.996L9.15299 5.408Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
diff --git a/js/vue/lib/index.ts b/js/vue/lib/index.ts
index 2eeb370..08c95e6 100644
--- a/js/vue/lib/index.ts
+++ b/js/vue/lib/index.ts
@@ -1,2 +1,19 @@
-export * from "./components/rs-button.showcase.vue";
+export { default as RsButton } from "./components/rs-button.vue";
+export { default as RsInput } from "./components/rs-input.vue";
+export { default as RsChip } from "./components/rs-chip.vue";
+export { default as RsTag } from "./components/rs-tag.vue";
+export { default as RsAvatar } from "./components/rs-avatar.vue";
+export { default as RsCollaborators } from "./components/rs-collaborators.vue";
+export { default as RsCard } from "./components/rs-card.vue";
+export { default as RsBadge } from "./components/rs-badge.vue";
+export { default as RsDropdown } from "./components/rs-dropdown.vue";
+export { default as RsProgressBar } from "./components/rs-progress-bar.vue";
+export { default as RsInputSearch } from "./components/rs-input-search.vue";
+export { default as RsCalendar } from "./components/rs-calendar.vue";
+export { default as RsCalendarDay } from "./components/rs-calendar-day.vue";
+export { default as RsLevel } from "./components/rs-level.vue";
+export { default as RsRadio } from "./components/rs-radio.vue";
+export { default as RsContactForm } from "./components/rs-contact-form.vue";
+export * from "./components/dropdown-tree";
+
 export * from "./icons";
diff --git a/js/vue/lib/showcases.ts b/js/vue/lib/showcases.ts
index 9121649..2ba8326 100644
--- a/js/vue/lib/showcases.ts
+++ b/js/vue/lib/showcases.ts
@@ -1 +1,16 @@
 export { default as ButtonShowcase } from "./components/rs-button.showcase.vue";
+export { default as InputShowcase } from "./components/rs-input.showcase.vue";
+export { default as ChipShowcase } from "./components/rs-chip.showcase.vue";
+export { default as TagShowcase } from "./components/rs-tag.showcase.vue";
+export { default as AvatarShowcase } from "./components/rs-avatar.showcase.vue";
+export { default as CollaboratorsShowcase } from "./components/rs-collaborators.showcase.vue";
+export { default as CardShowcase } from "./components/rs-card.showcase.vue";
+export { default as BadgeShowcase } from "./components/rs-badge.showcase.vue";
+export { default as DropdownShowcase } from "./components/rs-dropdown.showcase.vue";
+export { default as ProgressBarShowcase } from "./components/rs-progress-bar.showcase.vue";
+export { default as InputSearchShowcase } from "./components/rs-input-search.showcase.vue";
+export { default as CalendarShowcase } from "./components/rs-calendar.showcase.vue";
+export { default as LevelShowcase } from "./components/rs-level.showcase.vue";
+export { default as RadioShowcase } from "./components/rs-radio.showcase.vue";
+export { default as ContactFormShowcase } from "./components/rs-contact-form.showcase.vue";
+export { default as DropdownTreeShowcase } from "./components/dropdown-tree/dropdown-tree.showcase.vue";
diff --git a/js/vue/lib/utils/date.ts b/js/vue/lib/utils/date.ts
new file mode 100644
index 0000000..3c7db2b
--- /dev/null
+++ b/js/vue/lib/utils/date.ts
@@ -0,0 +1,57 @@
+type CalendarDay = {
+  date: Date;
+  currentMonth: boolean;
+};
+
+export const getCalendarDays = (baseDate = new Date()): CalendarDay[] => {
+  const days: CalendarDay[] = [];
+
+  const year = baseDate.getFullYear();
+  const month = baseDate.getMonth();
+
+  const firstOfMonth = new Date(year, month, 1);
+  const lastOfMonth = new Date(year, month + 1, 0);
+
+  const totalDays = lastOfMonth.getDate();
+
+  const startWeekday = (firstOfMonth.getDay() + 6) % 7;
+  const endWeekday = (lastOfMonth.getDay() + 6) % 7;
+
+  if (startWeekday > 0) {
+    const prevMonthLastDay = new Date(year, month, 0).getDate();
+    for (let i = startWeekday - 1; i >= 0; i--) {
+      const day = prevMonthLastDay - i;
+      days.push({
+        date: new Date(year, month - 1, day),
+        currentMonth: false,
+      });
+    }
+  }
+
+  for (let i = 1; i <= totalDays; i++) {
+    days.push({
+      date: new Date(year, month, i),
+      currentMonth: true,
+    });
+  }
+
+  const remaining = 6 - endWeekday;
+  for (let i = 1; i <= remaining; i++) {
+    days.push({
+      date: new Date(year, month + 1, i),
+      currentMonth: false,
+    });
+  }
+
+  return days;
+};
+
+export const addMonths = (date: Date, amount: number): Date => {
+  const year = date.getFullYear();
+  const month = date.getMonth() + amount;
+  return new Date(year, month, 1);
+};
+
+export const subMonths = (date: Date, amount: number): Date => {
+  return addMonths(date, -amount);
+};
diff --git a/styles/components/card.css b/styles/components/card.css
index 7c0674c..80b9c1f 100644
--- a/styles/components/card.css
+++ b/styles/components/card.css
@@ -28,7 +28,8 @@
 
   .rustlanges-card--resource:hover > svg {
     /* change the drop shadow color on hover but applying primary-500 */
-    filter: drop-shadow(0px 0px 0px var(--color-primary-500)) drop-shadow(4px 4px 0px var(--color-primary-500));
+    filter: drop-shadow(0px 0px 0px var(--color-primary-500))
+      drop-shadow(4px 4px 0px var(--color-primary-500));
     @apply stroke-primary-500;
   }
 
diff --git a/styles/components/chip.css b/styles/components/chip.css
index 6c53cb3..6e8d3dc 100644
--- a/styles/components/chip.css
+++ b/styles/components/chip.css
@@ -12,6 +12,14 @@
     @apply p-[4px] px-[12px];
   }
 
+  .rustlanges-chip--official {
+    @apply rounded-[20px] border;
+    @apply bg-secondary-400 border-black text-black;
+    @apply min-h-[32px];
+    @apply text-sm;
+    @apply p-[4px] px-[12px];
+  }
+
   .rustlanges-chip--numeric {
     @apply rounded-[20px] border;
     @apply bg-primary-200 border-black text-black;
diff --git a/styles/components/input.css b/styles/components/input.css
index ec68e56..e6b0c69 100644
--- a/styles/components/input.css
+++ b/styles/components/input.css
@@ -3,20 +3,26 @@
     @apply flex items-center gap-2 rounded-xl px-[10px] py-3 transition-colors;
     @apply bg-light border-1 border-black text-black hover:bg-neutral-100;
     @apply dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-900;
+    @apply dark:border-neutral-800;
 
-    &:has(> :active),
-    &:has(> :focus) {
-      @apply border-primary-500;
+    &:has(> :focus-visible),
+    &:has(> :focus),
+    &:has(> :active:not(:disabled)) {
+      @apply border-primary-500 dark:border-primary-500;
     }
 
     @variant has-disabled {
-      @apply cursor-not-allowed border-neutral-400 bg-neutral-100 text-neutral-600;
-      @apply dark:bg-neutral-900 dark:text-neutral-400;
+      @apply cursor-not-allowed border-neutral-300 bg-neutral-100 text-neutral-600;
+      @apply hover:bg-neutral-100;
+      @apply dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-400;
+      @apply dark:hover:bg-neutral-900;
     }
   }
 
-  .rustlanges-input--error {
-    @apply border-error-600;
+  .rustlanges-input--error,
+  .rustlanges-input--error:has(> :focus),
+  .rustlanges-input--error:has(> :active) {
+    @apply border-error-600 dark:border-error-500;
   }
 
   .rustlanges-input__container {
@@ -24,7 +30,7 @@
   }
 
   .rustlanges-input__error {
-    @apply text-error-800 dark:text-error-300 mt-1 text-sm;
+    @apply text-error-600 dark:text-error-300 mt-1 text-sm;
   }
 
   .rustlanges-input__inner {
@@ -34,10 +40,10 @@
   }
 
   .rustlanges-input__icon {
-    @apply text-neutral-600;
+    @apply text-neutral-600 dark:text-neutral-400;
 
     &:has(+ :disabled) {
-      @apply text-neutral-400;
+      @apply text-neutral-400 dark:text-neutral-600;
     }
   }
 }