{"id":23108064,"url":"https://github.com/bytexdigital/ventana","last_synced_at":"2025-04-03T22:44:34.080Z","repository":{"id":227877078,"uuid":"689651342","full_name":"BytexDigital/ventana","owner":"BytexDigital","description":null,"archived":false,"fork":false,"pushed_at":"2024-03-27T00:04:50.000Z","size":359,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-09T10:42:00.652Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BytexDigital.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-09-10T13:43:33.000Z","updated_at":"2024-03-15T13:39:16.000Z","dependencies_parsed_at":"2024-03-15T15:58:27.581Z","dependency_job_id":"ea4622af-4e2a-470f-9043-76f08700d388","html_url":"https://github.com/BytexDigital/ventana","commit_stats":null,"previous_names":["bytexdigital/ventana"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BytexDigital%2Fventana","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BytexDigital%2Fventana/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BytexDigital%2Fventana/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BytexDigital%2Fventana/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BytexDigital","download_url":"https://codeload.github.com/BytexDigital/ventana/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247092372,"owners_count":20882217,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-17T01:17:14.896Z","updated_at":"2025-04-03T22:44:34.056Z","avatar_url":"https://github.com/BytexDigital.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"https://github.com/BytexDigital/ventana/assets/12883356/3b6387ff-cc47-46f7-a1c8-dc324f71cf4a\n\n\u003ch1 align=\"center\"\u003eVentana\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\nA fun unstyled spring motion driven popover component for React\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#installation\"\u003e\u003cstrong\u003eInstallation\u003c/strong\u003e\u003c/a\u003e ·\n  \u003ca href=\"#basic-usage\"\u003e\u003cstrong\u003eUsage\u003c/strong\u003e\u003c/a\u003e ·\n  \u003ca href=\"#components\"\u003e\u003cstrong\u003eComponents\u003c/strong\u003e\u003c/a\u003e ·\n  \u003ca href=\"#acknowledgements\"\u003e\u003cstrong\u003eAcknowledgements\u003c/strong\u003e\u003c/a\u003e ·\n  \u003ca href=\"#license\"\u003e\u003cstrong\u003eLicense\u003c/strong\u003e\u003c/a\u003e\n\u003c/p\u003e\n\u003cbr/\u003e\n\n## Introduction\n\nVentana is a fun unstyled spring motion driven popover component for React. Built using [Radix's Popover Primitive](https://www.radix-ui.com/primitives/docs/components/popover) and inspired by the following [video](https://www.youtube.com/watch?v=1VgrdLfDozo).\n\n## Installation\n\nInstalling Ventana with npm:\n\n```bash\nnpm install @ventana/react\n```\n\nInstalling Ventana with yarn:\n\n```bash\nyarn add @ventana/react\n```\n\nInstalling Ventana with pnpm:\n\n```bash\npnpm add @ventana/react\n```\n\n## Basic Usage\n\nTo implement Ventana in your application, use the following:\n\n```tsx\nimport { Ventana } from '@ventana/react';\n\nfunction Component() {\n  return (\n    \u003cVentana.Root\u003e\n      \u003cVentana.Trigger\u003eOpen\u003c/Ventana.Trigger\u003e\n      \u003cVentana.Portal\u003e\n        \u003cVentana.Content\u003e\n          \u003cVentana.Tab /\u003e\n          \u003cVentana.Item\u003e\n            \u003ch1\u003eItem 1\u003c/h1\u003e\n          \u003c/Ventana.Item\u003e\n          \u003cVentana.Item\u003e\n            \u003ch1\u003eItem 2\u003c/h1\u003e\n          \u003c/Ventana.Item\u003e\n          \u003cVentana.Item\u003e\n            \u003ch1\u003eItem 3\u003c/h1\u003e\n          \u003c/Ventana.Item\u003e\n        \u003c/Ventana.Content\u003e\n      \u003c/Ventana.Portal\u003e\n    \u003c/Ventana.Root\u003e\n  );\n}\n```\n\n## Components\n\nThe majority of the components in Ventana are wrappers around the [Radix Popover Primitive](https://www.radix-ui.com/primitives/docs/components/popover) and inherit the same props. The API documentation for the Radix Popover Primitive can be found [here](https://www.radix-ui.com/primitives/docs/components/popover#api-reference).\n\nStyling is extremely easy with Ventana as it is unstyled by default. Simply pass in your own styles to the components and you're good to go!\n\n### Root\n\nThe `Root` component is the root component of the Ventana component and contains all parts of the Popover and also provides context to its children.\n\n[Radix Popover Root Props](https://www.radix-ui.com/primitives/docs/components/popover#root)\n\n### Trigger\n\nThe button that toggles the popover. By default, the Popover.Content will position itself against the trigger.\n\n[Radix Popover Trigger Props](https://www.radix-ui.com/primitives/docs/components/popover#trigger)\n\n### Portal\n\nPortals the content of the popover to the body of the document.\n\n[Radix Popover Portal Props](https://www.radix-ui.com/primitives/docs/components/popover#portal)\n\n### Content\n\nThe content of the popover. By default, the Popover.Content will position itself against the trigger.\n\n[Radix Popover Content Props](https://www.radix-ui.com/primitives/docs/components/popover#content)\n\n### Tab\n\nA visual indicator of the selected item in the Popover.\n\nProps TBD\n\n### Item\n\nAn item in the Popover.\n\nProps TBD\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbytexdigital%2Fventana","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbytexdigital%2Fventana","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbytexdigital%2Fventana/lists"}