{"id":19580460,"url":"https://github.com/vinpac/windstitch","last_synced_at":"2025-04-09T16:20:07.410Z","repository":{"id":42008429,"uuid":"482405006","full_name":"vinpac/windstitch","owner":"vinpac","description":"Windstitch is a 1.4kB, Simple Styling Library that helps you set when a className should be applied to a component.","archived":false,"fork":false,"pushed_at":"2023-08-02T14:34:07.000Z","size":1165,"stargazers_count":256,"open_issues_count":8,"forks_count":6,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-09T16:19:59.920Z","etag":null,"topics":["design","react","styled","tailwindcss","variants"],"latest_commit_sha":null,"homepage":"https://windstitch.vercel.app","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/vinpac.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":"2022-04-17T02:09:48.000Z","updated_at":"2025-04-01T10:05:46.000Z","dependencies_parsed_at":"2024-11-11T07:39:05.650Z","dependency_job_id":null,"html_url":"https://github.com/vinpac/windstitch","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vinpac%2Fwindstitch","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vinpac%2Fwindstitch/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vinpac%2Fwindstitch/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vinpac%2Fwindstitch/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vinpac","download_url":"https://codeload.github.com/vinpac/windstitch/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248065281,"owners_count":21041872,"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":["design","react","styled","tailwindcss","variants"],"created_at":"2024-11-11T07:26:10.218Z","updated_at":"2025-04-09T16:20:07.380Z","avatar_url":"https://github.com/vinpac.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Windstitch](https://github.com/vinpac/windstitch/blob/main/docs/static/img/banner.jpg?raw=true)\n\n# Windstitch\n\nWindstitch is a **1.4kB**, Simple Styling Library that helps you set **when** a className should be applied to a component.\n\nBy providing Powerful Types through forward declarations, Windstitch aims to be simple yet powerful by limiting itself to be a organizer API, letting Tailwind handle the styling part.\n\n![Usage](https://github.com/vinpac/windstitch/blob/main/docs/static/img/example.gif?raw=true)\n\n# Install\n\nInstall Windstitch from your terminal via npm or yarn.\n\n```bash\n# With npm\nnpm install windstitch\n\n# With yarn\nyarn add windstitch\n```\n\n### Import it\n\nImport `styled` from `windstitch`.\n\n```js\nimport { styled } from 'windstitch';\n```\n\nYou can also import `w`, which works as an alias for `styled`\n\n```typescript\nimport { w } from 'windstitch';\n```\n\n### Use it\n\nUse the `w` function to create a component and add styles to it.\n\n```jsx line=3-11\nimport { w } from '@wind/react';\n\nconst Button = w.button('text-sm', {\n  variants: {\n    color: {\n      red: 'text-red-500',\n      blue: 'text-blue-500',\n    },\n    size: {\n      small: 'text-sm',\n      large: 'text-lg',\n    },\n  },\n  defaultVariants: {\n    size: 'small',\n  },\n});\ntype ButtonProps = W.infer\u003ctypeof Button\u003e;\n// { color: 'red' | 'blue', size?: 'small' | 'large' }\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvinpac%2Fwindstitch","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvinpac%2Fwindstitch","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvinpac%2Fwindstitch/lists"}