Skip to content

Commit fccb59b

Browse files
prodktprodkt
committed
first implementation of prodkt components
1 parent 180e32e commit fccb59b

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

85 files changed

+4547
-19
lines changed

‎apps/www/__registry__/index.tsx‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -765,6 +765,38 @@ export const Index: Record<string, any> = {
765765
subcategory: "",
766766
chunks: []
767767
},
768+
"marquee-section-demo": {
769+
name: "marquee-section-demo",
770+
description: "",
771+
type: "registry:example",
772+
registryDependencies: ["marquee-section"],
773+
files: [{
774+
path: "registry/new-york/example/marquee-section-demo.tsx",
775+
type: "registry:example",
776+
target: ""
777+
}],
778+
component: React.lazy(() => import("@/registry/new-york/example/marquee-section-demo.tsx")),
779+
source: "",
780+
category: "",
781+
subcategory: "",
782+
chunks: []
783+
},
784+
"packages-marquee-demo": {
785+
name: "packages-marquee-demo",
786+
description: "",
787+
type: "registry:example",
788+
registryDependencies: ["packages-marquee"],
789+
files: [{
790+
path: "registry/new-york/example/packages-marquee-demo.tsx",
791+
type: "registry:example",
792+
target: ""
793+
}],
794+
component: React.lazy(() => import("@/registry/new-york/example/packages-marquee-demo.tsx")),
795+
source: "",
796+
category: "",
797+
subcategory: "",
798+
chunks: []
799+
},
768800
"accordion-demo": {
769801
name: "accordion-demo",
770802
description: "",
@@ -5497,6 +5529,38 @@ export const Index: Record<string, any> = {
54975529
subcategory: "Login",
54985530
chunks: []
54995531
},
5532+
"marquee-section": {
5533+
name: "marquee-section",
5534+
description: "",
5535+
type: "registry:prodkt",
5536+
registryDependencies: undefined,
5537+
files: [{
5538+
path: "registry/new-york/prodkt/marquee-section.tsx",
5539+
type: "registry:prodkt",
5540+
target: ""
5541+
}],
5542+
component: React.lazy(() => import("@/registry/new-york/prodkt/marquee-section.tsx")),
5543+
source: "",
5544+
category: "",
5545+
subcategory: "",
5546+
chunks: []
5547+
},
5548+
"packages-marquee": {
5549+
name: "packages-marquee",
5550+
description: "",
5551+
type: "registry:prodkt",
5552+
registryDependencies: undefined,
5553+
files: [{
5554+
path: "registry/new-york/prodkt/packages-marquee.tsx",
5555+
type: "registry:prodkt",
5556+
target: ""
5557+
}],
5558+
component: React.lazy(() => import("@/registry/new-york/prodkt/packages-marquee.tsx")),
5559+
source: "",
5560+
category: "",
5561+
subcategory: "",
5562+
chunks: []
5563+
},
55005564
}, "default": {
55015565
"accordion": {
55025566
name: "accordion",
@@ -6258,6 +6322,38 @@ export const Index: Record<string, any> = {
62586322
subcategory: "",
62596323
chunks: []
62606324
},
6325+
"marquee-section-demo": {
6326+
name: "marquee-section-demo",
6327+
description: "",
6328+
type: "registry:example",
6329+
registryDependencies: ["marquee-section"],
6330+
files: [{
6331+
path: "registry/default/example/marquee-section-demo.tsx",
6332+
type: "registry:example",
6333+
target: ""
6334+
}],
6335+
component: React.lazy(() => import("@/registry/default/example/marquee-section-demo.tsx")),
6336+
source: "",
6337+
category: "",
6338+
subcategory: "",
6339+
chunks: []
6340+
},
6341+
"packages-marquee-demo": {
6342+
name: "packages-marquee-demo",
6343+
description: "",
6344+
type: "registry:example",
6345+
registryDependencies: ["packages-marquee"],
6346+
files: [{
6347+
path: "registry/default/example/packages-marquee-demo.tsx",
6348+
type: "registry:example",
6349+
target: ""
6350+
}],
6351+
component: React.lazy(() => import("@/registry/default/example/packages-marquee-demo.tsx")),
6352+
source: "",
6353+
category: "",
6354+
subcategory: "",
6355+
chunks: []
6356+
},
62616357
"accordion-demo": {
62626358
name: "accordion-demo",
62636359
description: "",
@@ -10990,5 +11086,37 @@ export const Index: Record<string, any> = {
1099011086
subcategory: "Login",
1099111087
chunks: []
1099211088
},
11089+
"marquee-section": {
11090+
name: "marquee-section",
11091+
description: "",
11092+
type: "registry:prodkt",
11093+
registryDependencies: undefined,
11094+
files: [{
11095+
path: "registry/default/prodkt/marquee-section.tsx",
11096+
type: "registry:prodkt",
11097+
target: ""
11098+
}],
11099+
component: React.lazy(() => import("@/registry/default/prodkt/marquee-section.tsx")),
11100+
source: "",
11101+
category: "",
11102+
subcategory: "",
11103+
chunks: []
11104+
},
11105+
"packages-marquee": {
11106+
name: "packages-marquee",
11107+
description: "",
11108+
type: "registry:prodkt",
11109+
registryDependencies: undefined,
11110+
files: [{
11111+
path: "registry/default/prodkt/packages-marquee.tsx",
11112+
type: "registry:prodkt",
11113+
target: ""
11114+
}],
11115+
component: React.lazy(() => import("@/registry/default/prodkt/packages-marquee.tsx")),
11116+
source: "",
11117+
category: "",
11118+
subcategory: "",
11119+
chunks: []
11120+
},
1099311121
},
1099411122
}

‎apps/www/components/component-preview.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ interface ComponentPreviewProps extends React.HTMLAttributes<HTMLDivElement> {
2626
align?: "center" | "start" | "end"
2727
description?: string
2828
hideCode?: boolean
29-
type?: "block" | "component" | "example"
29+
type?: "block" | "component" | "prodkt" | "example"
3030
}
3131

3232
export function ComponentPreview({
@@ -124,11 +124,11 @@ export function ComponentPreview({
124124
</TabsList>
125125
)}
126126
</div>
127-
<TabsContent value="preview" className="relative rounded-2xl border bg-noise">
127+
<TabsContent value="preview" className="relative overflow-hidden rounded-2xl border bg-noise">
128128
<div className="flex items-center justify-between p-4">
129129
<StyleSwitcher />
130130
<div className="flex items-center gap-2">
131-
{description ? <V0Button name={name} /> : null}
131+
{description ? <V0Button className="hidden" name={name} /> : null}
132132
<CopyButton
133133
value={codeString}
134134
variant="outline"
@@ -139,7 +139,7 @@ export function ComponentPreview({
139139
<ThemeWrapper defaultTheme="mauve">
140140
<div
141141
className={cn(
142-
"preview flex min-h-[350px] w-full justify-center p-10",
142+
"preview flex min-h-[350px] w-full justify-center p-10 [&_>div]:relative [&_>div]:max-w-full [&_>div]:justify-center",
143143
{
144144
"items-center": align === "center",
145145
"items-start": align === "start",

‎apps/www/components/theme-wrapper.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export function ThemeWrapper({
1818
<div
1919
className={cn(
2020
// `theme-${defaultTheme || config.theme}`,
21-
"w-full",
21+
"relative w-full",
2222
className
2323
)}
2424
style={

‎apps/www/config/docs.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -138,6 +138,23 @@ export const docsConfig: DocsConfig = {
138138
},
139139
],
140140
},
141+
{
142+
title: "Prodkt",
143+
items: [
144+
{
145+
title: "Marquee Section",
146+
href: "/docs/prodkt/marquee-section",
147+
items: [],
148+
label: "New",
149+
},
150+
{
151+
title: "Packages Marquee",
152+
href: "/docs/prodkt/packages-marquee",
153+
items: [],
154+
label: "New",
155+
},
156+
],
157+
},
141158
{
142159
title: "Components",
143160
items: [

‎apps/www/content/docs/prodkt/index.mdx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
---
2+
title: Prodkt
3+
description: Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
4+
---
5+
6+
This is **NOT** a component library. It's a collection of re-usable components that you can copy and paste into your apps.
7+
8+
**What do you mean by not a component library?**
9+
10+
I mean you do not install it as a dependency. It is not available or distributed via npm.
11+
12+
Pick the components you need. Copy and paste the code into your project and customize to your needs. The code is yours.
13+
14+
_Use this as a reference to build your own component libraries._
15+
16+
## FAQ
17+

‎apps/www/content/docs/prodkt/marquee-section.mdx‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
---
2+
title: Marquee Section
3+
description: A vertically stacked set of interactive headings that each reveal a section of content.
4+
component: true
5+
---
6+
7+
<ComponentPreview
8+
name="marquee-section-demo"
9+
description="A vertically stacked set of interactive headings that each reveal a section of content."
10+
/>
11+
12+
## Installation
13+
14+
<Tabs defaultValue="cli">
15+
16+
<TabsList>
17+
<TabsTrigger value="cli">CLI</TabsTrigger>
18+
<TabsTrigger value="manual">Manual</TabsTrigger>
19+
</TabsList>
20+
21+
<TabsContent value="cli">
22+
23+
```bash
24+
npx prodkt@latest add marquee-section
25+
```
26+
27+
</TabsContent>
28+
29+
<TabsContent value="manual">
30+
31+
<Steps>
32+
33+
<Step>Install the following dependencies:</Step>
34+
35+
```bash
36+
npm install framer-motion
37+
```
38+
39+
<Step>Copy and paste the following code into your project.</Step>
40+
41+
<ComponentSource name="marquee-section" />
42+
43+
<Step>Update the import paths to match your project setup.</Step>
44+
45+
<Step>Update `tailwind.config.js`</Step>
46+
47+
Add the following animations to your `tailwind.config.js` file:
48+
49+
```js title="tailwind.config.js" {5-29}
50+
/** @type {import('tailwindcss').Config} */
51+
module.exports = {
52+
theme: {
53+
extend: {
54+
keyframes: {
55+
"marquee-section-left": {
56+
"0%": { transform: "translateX(0)" },
57+
"100%": { transform: "translateX(-50%)" },
58+
},
59+
"marquee-section-right": {
60+
"0%": { transform: "translateX(0)" },
61+
"100%": { transform: "translateX(50%)" },
62+
},
63+
},
64+
animation: {
65+
"marquee-section-left":
66+
"marquee-section-left 40s linear infinite",
67+
"marquee-section-right":
68+
"marquee-section-right 40s linear infinite",
69+
},
70+
backgroundImage: {
71+
"marquee-section": [
72+
"url(/images/sparkstack/noise.webp)",
73+
"radial-gradient(50% 100% at 50% -40%, var(--primary-a4) 0%, var(--primary-a1) 100%)",
74+
],
75+
"marquee-section-text":
76+
"linear-gradient(180deg, var(--gray-a12) 0%, var(--gray-a11) 100%)",
77+
],
78+
},
79+
},
80+
},
81+
}
82+
```
83+
84+
</Steps>
85+
86+
</TabsContent>
87+
88+
</Tabs>
89+
90+
## Usage
91+
92+
```tsx
93+
import {
94+
MarqueeSection,
95+
} from "@/components/ui/marquee-section"
96+
```
97+
98+
```tsx
99+
<MarqueeSection />
100+
```

0 commit comments

Comments
 (0)