feat: line shadow text component added

magicuidesign · Jan 12, 2025 · 673790c · 673790c
1 parent 2f4cadd
commit 673790c
Show file tree

Hide file tree

Showing 10 changed files with 193 additions and 0 deletions.
diff --git a/__registry__/index.tsx b/__registry__/index.tsx
@@ -44,6 +44,19 @@ export const Index: Record<string, any> = {
       subcategory: "undefined",
       chunks: [],
     },
+    "line-shadow-text": {
+      name: "line-shadow-text",
+      type: "registry:ui",
+      registryDependencies: undefined,
+      files: ["registry/default/magicui/line-shadow-text.tsx"],
+      component: React.lazy(
+        () => import("@/registry/default/magicui/line-shadow-text.tsx"),
+      ),
+      source: "",
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: [],
+    },
     "morphing-text": {
       name: "morphing-text",
       type: "registry:ui",
@@ -828,6 +841,19 @@ export const Index: Record<string, any> = {
       subcategory: "undefined",
       chunks: [],
     },
+    "line-shadow-text-demo": {
+      name: "line-shadow-text-demo",
+      type: "registry:example",
+      registryDependencies: ["line-shadow-text"],
+      files: ["registry/default/example/line-shadow-text-demo.tsx"],
+      component: React.lazy(
+        () => import("@/registry/default/example/line-shadow-text-demo.tsx"),
+      ),
+      source: "",
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: [],
+    },
     "morphing-text-demo": {
       name: "morphing-text-demo",
       type: "registry:example",

diff --git a/config/docs.ts b/config/docs.ts
@@ -319,6 +319,12 @@ export const docsConfig: DocsConfig = {
           items: [],
           label: "New",
         },
+        {
+          title: "Line Shadow Text",
+          href: `/docs/components/line-shadow-text`,
+          items: [],
+          label: "New",
+        },
         {
           title: "Number Ticker",
           href: `/docs/components/number-ticker`,

diff --git a/content/docs/components/line-shadow-text.mdx b/content/docs/components/line-shadow-text.mdx
@@ -0,0 +1,72 @@
+---
+title: Line Shadow Text
+date: 2025-01-11
+description: A line shadow text component for Magic UI
+author: magicui
+published: true
+---
+
+<ComponentPreview name="line-shadow-text-demo" />
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn@latest add "https://magicui.design/r/line-shadow-text"
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="line-shadow-text" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+<Step>Update `tailwind.config.js`</Step>
+
+Add the following animations to your `tailwind.config.js` file:
+
+```js title="tailwind.config.js" {5-14}
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  theme: {
+    extend: {
+      animation: {
+        "line-shadow": "line-shadow 15s linear infinite",
+      },
+      keyframes: {
+        "line-shadow": {
+          "0%": { "background-position": "0 0" },
+          "100%": { "background-position": "100% -100%" },
+        },
+      },
+    },
+  },
+};
+```
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Props
+
+| Prop        | Type   | Default    | Description                                 |
+| ----------- | ------ | ---------- | ------------------------------------------- |
+| text        | string | `"SHADOW"` | The text to display with shadow effect      |
+| shadowColor | string | `"black"`  | The color of the shadow effect              |
+| className   | string | `-`        | Additional CSS classes to apply to the text |
diff --git a/public/r/index.json b/public/r/index.json
@@ -35,6 +35,16 @@
       }
     ]
   },
+  {
+    "name": "line-shadow-text",
+    "type": "registry:ui",
+    "files": [
+      {
+        "path": "magicui/line-shadow-text.tsx",
+        "type": "registry:ui"
+      }
+    ]
+  },
   {
     "name": "morphing-text",
     "type": "registry:ui",

diff --git a/public/r/styles/default/line-shadow-text.json b/public/r/styles/default/line-shadow-text.json
@@ -0,0 +1,12 @@
+{
+  "name": "line-shadow-text",
+  "type": "registry:ui",
+  "files": [
+    {
+      "path": "magicui/line-shadow-text.tsx",
+      "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\n\nexport function LineShadowText({\n  text = \"SHADOW\",\n  shadowColor = \"black\",\n  className,\n}: {\n  text?: string;\n  shadowColor?: string;\n  className?: string;\n}) {\n  return (\n    <span\n      style={{ \"--shadow-color\": shadowColor } as React.CSSProperties}\n      className={cn(\n        \"relative inline-flex\",\n\n        // positioning\n        \"after:absolute after:left-[0.04em] after:top-[0.04em] after:content-[attr(data-text)]\",\n\n        // color\n        \"after:bg-[linear-gradient(45deg,transparent_45%,var(--shadow-color)_45%,var(--shadow-color)_55%,transparent_0)]\",\n\n        // text\n        \"after:bg-[length:0.06em_0.06em] after:bg-clip-text after:text-transparent\",\n\n        // animation\n        \"after:animate-line-shadow\",\n\n        className,\n      )}\n      data-text={text}\n    >\n      {text}\n    </span>\n  );\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}
diff --git a/registry/default/example/line-shadow-text-demo.tsx b/registry/default/example/line-shadow-text-demo.tsx
@@ -0,0 +1,12 @@
+import { LineShadowText } from "@/registry/default/magicui/line-shadow-text";
+export default function LineShadowTextDemo() {
+  return (
+    <h1 className="text-balance text-5xl font-semibold leading-none tracking-tighter sm:text-6xl md:text-7xl lg:text-8xl">
+      Ship
+      <LineShadowText
+        text="Products"
+        className="font-bold italic tracking-tighter"
+      />
+    </h1>
+  );
+}
diff --git a/registry/default/magicui/line-shadow-text.tsx b/registry/default/magicui/line-shadow-text.tsx
@@ -0,0 +1,39 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+
+export function LineShadowText({
+  text = "SHADOW",
+  shadowColor = "black",
+  className,
+}: {
+  text?: string;
+  shadowColor?: string;
+  className?: string;
+}) {
+  return (
+    <span
+      style={{ "--shadow-color": shadowColor } as React.CSSProperties}
+      className={cn(
+        "relative inline-flex",
+
+        // positioning
+        "after:absolute after:left-[0.04em] after:top-[0.04em] after:content-[attr(data-text)]",
+
+        // color
+        "after:bg-[linear-gradient(45deg,transparent_45%,var(--shadow-color)_45%,var(--shadow-color)_55%,transparent_0)]",
+
+        // text
+        "after:bg-[length:0.06em_0.06em] after:bg-clip-text after:text-transparent",
+
+        // animation
+        "after:animate-line-shadow",
+
+        className,
+      )}
+      data-text={text}
+    >
+      {text}
+    </span>
+  );
+}
diff --git a/registry/registry-examples.ts b/registry/registry-examples.ts
@@ -31,6 +31,12 @@ export const examples: Registry = [
     registryDependencies: ["warp-background"],
     files: ["example/warp-background-demo.tsx"],
   },
+  {
+    name: "line-shadow-text-demo",
+    type: "registry:example",
+    registryDependencies: ["line-shadow-text"],
+    files: ["example/line-shadow-text-demo.tsx"],
+  },
   {
     name: "morphing-text-demo",
     type: "registry:example",

diff --git a/registry/registry-ui.ts b/registry/registry-ui.ts
@@ -18,6 +18,11 @@ export const ui: Registry = [
     dependencies: ["motion"],
     files: ["magicui/warp-background.tsx"],
   },
+  {
+    name: "line-shadow-text",
+    type: "registry:ui",
+    files: ["magicui/line-shadow-text.tsx"],
+  },
   {
     name: "morphing-text",
     type: "registry:ui",

diff --git a/tailwind.config.cjs b/tailwind.config.cjs
@@ -86,6 +86,7 @@ module.exports = {
         shine: "shine var(--duration) infinite linear",
         pulse: "pulse var(--duration) ease-out infinite",
         rainbow: "rainbow var(--speed, 2s) infinite linear",
+        "line-shadow": "line-shadow 15s linear infinite",
       },
       keyframes: {
         "accordion-down": {
@@ -207,6 +208,10 @@ module.exports = {
           "0%": { "background-position": "0%" },
           "100%": { "background-position": "200%" },
         },
+        "line-shadow": {
+          "0%": { "background-position": "0 0" },
+          "100%": { "background-position": "100% -100%" },
+        },
       },
     },
   },