Skip to content

docs(v4): new blocks, update existing blocks #1532

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sadeghbarati merged 6 commits into from
Nov 9, 2025
Merged

docs(v4): new blocks, update existing blocks #1532

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
23872b4
feat: add signup blocks
ace-of-aces Nov 9, 2025
4a8f8c8
feat: add otp blocks
ace-of-aces Nov 9, 2025
6b6db2e
fix: correct attribute names
ace-of-aces Nov 9, 2025
5f2ecea
chore: update login examples to use the Field component
ace-of-aces Nov 9, 2025
a01c927
chore: formatting
ace-of-aces Nov 9, 2025
aeb7b51
chore: rebuild registry
ace-of-aces Nov 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions apps/v4/public/r/styles/new-york-v4/login-01.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@
"registryDependencies": [
"button",
"card",
"input",
"label"
"field",
"input"
],
"files": [
{
Expand All @@ -18,7 +18,7 @@
},
{
"path": "registry/new-york-v4/blocks/login-01/components/LoginForm.vue",
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { cn } from \"@/registry/new-york-v4/lib/utils\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\n\nconst props = defineProps<{\n class?: HTMLAttributes[\"class\"]\n}>()\n</script>\n\n<template>\n <div :class=\"cn('flex flex-col gap-6', props.class)\">\n <Card>\n <CardHeader>\n <CardTitle>Login to your account</CardTitle>\n <CardDescription>\n Enter your email below to login to your account\n </CardDescription>\n </CardHeader>\n <CardContent>\n <form>\n <div class=\"flex flex-col gap-6\">\n <div class=\"grid gap-3\">\n <Label for=\"email\">Email</Label>\n <Input\n id=\"email\"\n type=\"email\"\n placeholder=\"m@example.com\"\n required\n />\n </div>\n <div class=\"grid gap-3\">\n <div class=\"flex items-center\">\n <Label for=\"password\">Password</Label>\n <a\n href=\"#\"\n class=\"ml-auto inline-block text-sm underline-offset-4 hover:underline\"\n >\n Forgot your password?\n </a>\n </div>\n <Input id=\"password\" type=\"password\" required />\n </div>\n <div class=\"flex flex-col gap-3\">\n <Button type=\"submit\" class=\"w-full\">\n Login\n </Button>\n <Button variant=\"outline\" class=\"w-full\">\n Login with Google\n </Button>\n </div>\n </div>\n <div class=\"mt-4 text-center text-sm\">\n Don't have an account?\n <a href=\"#\" class=\"underline underline-offset-4\">\n Sign up\n </a>\n </div>\n </form>\n </CardContent>\n </Card>\n </div>\n</template>\n",
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { cn } from \"@/registry/new-york-v4/lib/utils\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n Field,\n FieldDescription,\n FieldGroup,\n FieldLabel,\n} from \"@/registry/new-york-v4/ui/field\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\n\nconst props = defineProps<{\n class?: HTMLAttributes[\"class\"]\n}>()\n</script>\n\n<template>\n <div :class=\"cn('flex flex-col gap-6', props.class)\">\n <Card>\n <CardHeader>\n <CardTitle>Login to your account</CardTitle>\n <CardDescription>\n Enter your email below to login to your account\n </CardDescription>\n </CardHeader>\n <CardContent>\n <form>\n <FieldGroup>\n <Field>\n <FieldLabel for=\"email\">\n Email\n </FieldLabel>\n <Input\n id=\"email\"\n type=\"email\"\n placeholder=\"m@example.com\"\n required\n />\n </Field>\n <Field>\n <div class=\"flex items-center\">\n <FieldLabel for=\"password\">\n Password\n </FieldLabel>\n <a\n href=\"#\"\n class=\"ml-auto inline-block text-sm underline-offset-4 hover:underline\"\n >\n Forgot your password?\n </a>\n </div>\n <Input id=\"password\" type=\"password\" required />\n </Field>\n <Field>\n <Button type=\"submit\">\n Login\n </Button>\n <Button variant=\"outline\" type=\"button\">\n Login with Google\n </Button>\n <FieldDescription class=\"text-center\">\n Don't have an account?\n <a href=\"#\">\n Sign up\n </a>\n </FieldDescription>\n </Field>\n </FieldGroup>\n </form>\n </CardContent>\n </Card>\n </div>\n</template>\n",
"type": "registry:component"
}
],
Expand Down
6 changes: 3 additions & 3 deletions apps/v4/public/r/styles/new-york-v4/login-02.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@
"description": "A two column login page with a cover image.",
"registryDependencies": [
"button",
"input",
"label"
"field",
"input"
],
"files": [
{
Expand All @@ -17,7 +17,7 @@
},
{
"path": "registry/new-york-v4/blocks/login-02/components/LoginForm.vue",
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { cn } from \"@/registry/new-york-v4/lib/utils\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\n\nconst props = defineProps<{\n class?: HTMLAttributes[\"class\"]\n}>()\n</script>\n\n<template>\n <form :class=\"cn('flex flex-col gap-6', props.class)\">\n <div class=\"flex flex-col items-center gap-2 text-center\">\n <h1 class=\"text-2xl font-bold\">\n Login to your account\n </h1>\n <p class=\"text-muted-foreground text-sm text-balance\">\n Enter your email below to login to your account\n </p>\n </div>\n <div class=\"grid gap-6\">\n <div class=\"grid gap-3\">\n <Label for=\"email\">Email</Label>\n <Input id=\"email\" type=\"email\" placeholder=\"m@example.com\" required />\n </div>\n <div class=\"grid gap-3\">\n <div class=\"flex items-center\">\n <Label for=\"password\">Password</Label>\n <a\n href=\"#\"\n class=\"ml-auto text-sm underline-offset-4 hover:underline\"\n >\n Forgot your password?\n </a>\n </div>\n <Input id=\"password\" type=\"password\" required />\n </div>\n <Button type=\"submit\" class-name=\"w-full\">\n Login\n </Button>\n <div class=\"after:border-border relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t\">\n <span class=\"bg-background text-muted-foreground relative z-10 px-2\">\n Or continue with\n </span>\n </div>\n <Button variant=\"outline\" class-name=\"w-full\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\n fill=\"currentColor\"\n />\n </svg>\n Login with GitHub\n </Button>\n </div>\n <div class=\"text-center text-sm\">\n Don't have an account?\n <a href=\"#\" class=\"underline underline-offset-4\">\n Sign up\n </a>\n </div>\n </form>\n</template>\n",
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { cn } from \"@/registry/new-york-v4/lib/utils\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n Field,\n FieldDescription,\n FieldGroup,\n FieldLabel,\n FieldSeparator,\n} from \"@/registry/new-york-v4/ui/field\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\n\nconst props = defineProps<{\n class?: HTMLAttributes[\"class\"]\n}>()\n</script>\n\n<template>\n <form :class=\"cn('flex flex-col gap-6', props.class)\">\n <FieldGroup>\n <div class=\"flex flex-col items-center gap-1 text-center\">\n <h1 class=\"text-2xl font-bold\">\n Login to your account\n </h1>\n <p class=\"text-muted-foreground text-sm text-balance\">\n Enter your email below to login to your account\n </p>\n </div>\n <Field>\n <FieldLabel for=\"email\">\n Email\n </FieldLabel>\n <Input id=\"email\" type=\"email\" placeholder=\"m@example.com\" required />\n </Field>\n <Field>\n <div class=\"flex items-center\">\n <FieldLabel for=\"password\">\n Password\n </FieldLabel>\n <a\n href=\"#\"\n class=\"ml-auto text-sm underline-offset-4 hover:underline\"\n >\n Forgot your password?\n </a>\n </div>\n <Input id=\"password\" type=\"password\" required />\n </Field>\n <Field>\n <Button type=\"submit\">\n Login\n </Button>\n </Field>\n <FieldSeparator>Or continue with</FieldSeparator>\n <Field>\n <Button variant=\"outline\" type=\"button\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\n fill=\"currentColor\"\n />\n </svg>\n Login with GitHub\n </Button>\n <FieldDescription class=\"text-center\">\n Don't have an account?\n <a href=\"#\">Sign up</a>\n </FieldDescription>\n </Field>\n </FieldGroup>\n </form>\n</template>\n",
"type": "registry:component"
}
],
Expand Down
6 changes: 3 additions & 3 deletions apps/v4/public/r/styles/new-york-v4/login-03.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@
"registryDependencies": [
"button",
"card",
"input",
"label"
"field",
"input"
],
"files": [
{
Expand All @@ -18,7 +18,7 @@
},
{
"path": "registry/new-york-v4/blocks/login-03/components/LoginForm.vue",
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\n\nconst props = defineProps<{\n class?: HTMLAttributes[\"class\"]\n}>()\n</script>\n\n<template>\n <div :class=\"cn('flex flex-col gap-6', props.class)\">\n <Card>\n <CardHeader class=\"text-center\">\n <CardTitle class=\"text-xl\">\n Welcome back\n </CardTitle>\n <CardDescription>\n Login with your Apple or Google account\n </CardDescription>\n </CardHeader>\n <CardContent>\n <form>\n <div class=\"grid gap-6\">\n <div class=\"flex flex-col gap-4\">\n <Button variant=\"outline\" class=\"w-full\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n fill=\"currentColor\"\n />\n </svg>\n Login with Apple\n </Button>\n <Button variant=\"outline\" class=\"w-full\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n fill=\"currentColor\"\n />\n </svg>\n Login with Google\n </Button>\n </div>\n <div class=\"after:border-border relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t\">\n <span class=\"bg-card text-muted-foreground relative z-10 px-2\">\n Or continue with\n </span>\n </div>\n <div class=\"grid gap-6\">\n <div class=\"grid gap-3\">\n <Label for=\"email\">Email</Label>\n <Input\n id=\"email\"\n type=\"email\"\n placeholder=\"m@example.com\"\n required\n />\n </div>\n <div class=\"grid gap-3\">\n <div class=\"flex items-center\">\n <Label for=\"password\">Password</Label>\n <a\n href=\"#\"\n class=\"ml-auto text-sm underline-offset-4 hover:underline\"\n >\n Forgot your password?\n </a>\n </div>\n <Input id=\"password\" type=\"password\" required />\n </div>\n <Button type=\"submit\" class=\"w-full\">\n Login\n </Button>\n </div>\n <div class=\"text-center text-sm\">\n Don't have an account?\n <a href=\"#\" class=\"underline underline-offset-4\">\n Sign up\n </a>\n </div>\n </div>\n </form>\n </CardContent>\n </Card>\n <div class=\"text-muted-foreground *:[a]:hover:text-primary text-center text-xs text-balance *:[a]:underline *:[a]:underline-offset-4\">\n By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>\n and <a href=\"#\">Privacy Policy</a>.\n </div>\n </div>\n</template>\n",
"content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n Field,\n FieldDescription,\n FieldGroup,\n FieldLabel,\n FieldSeparator,\n} from \"@/registry/new-york-v4/ui/field\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\n\nconst props = defineProps<{\n class?: HTMLAttributes[\"class\"]\n}>()\n</script>\n\n<template>\n <div :class=\"cn('flex flex-col gap-6', props.class)\">\n <Card>\n <CardHeader class=\"text-center\">\n <CardTitle class=\"text-xl\">\n Welcome back\n </CardTitle>\n <CardDescription>\n Login with your Apple or Google account\n </CardDescription>\n </CardHeader>\n <CardContent>\n <form>\n <FieldGroup>\n <Field>\n <Button variant=\"outline\" type=\"button\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n fill=\"currentColor\"\n />\n </svg>\n Login with Apple\n </Button>\n <Button variant=\"outline\" type=\"button\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n fill=\"currentColor\"\n />\n </svg>\n Login with Google\n </Button>\n </Field>\n <FieldSeparator class=\"*:data-[slot=field-separator-content]:bg-card\">\n Or continue with\n </FieldSeparator>\n <Field>\n <FieldLabel for=\"email\">\n Email\n </FieldLabel>\n <Input\n id=\"email\"\n type=\"email\"\n placeholder=\"m@example.com\"\n required\n />\n </Field>\n <Field>\n <div class=\"flex items-center\">\n <FieldLabel for=\"password\">\n Password\n </FieldLabel>\n <a\n href=\"#\"\n class=\"ml-auto text-sm underline-offset-4 hover:underline\"\n >\n Forgot your password?\n </a>\n </div>\n <Input id=\"password\" type=\"password\" required />\n </Field>\n <Field>\n <Button type=\"submit\">\n Login\n </Button>\n <FieldDescription class=\"text-center\">\n Don't have an account?\n <a href=\"#\">\n Sign up\n </a>\n </FieldDescription>\n </Field>\n </FieldGroup>\n </form>\n </CardContent>\n </Card>\n <FieldDescription class=\"px-6 text-center\">\n By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>\n and <a href=\"#\">Privacy Policy</a>.\n </FieldDescription>\n </div>\n</template>\n",
"type": "registry:component"
}
],
Expand Down
Loading