{"id":50621989,"url":"https://github.com/imirfanul/structyl","last_synced_at":"2026-06-06T13:00:52.054Z","repository":{"id":362133001,"uuid":"1245994269","full_name":"imirfanul/structyl","owner":"imirfanul","description":"Accessible, headless-first React components with a Tailwind-styled layer, runtime theming, and a first-class DataTable.","archived":false,"fork":false,"pushed_at":"2026-06-02T19:30:04.000Z","size":2184,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2026-06-02T21:24:24.375Z","etag":null,"topics":["accessibility","component-library","datatable","date-picker","date-range-picker","date-time-picker","react","tailwindcss","theming","ui-components","ui-library"],"latest_commit_sha":null,"homepage":"https://www.structyl.com/","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/imirfanul.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"docs/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":"docs/ROADMAP.md","authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":"AGENTS.md","dco":null,"cla":null}},"created_at":"2026-05-21T19:10:10.000Z","updated_at":"2026-06-02T19:30:10.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/imirfanul/structyl","commit_stats":null,"previous_names":["imirfanul/structyl"],"tags_count":22,"template":false,"template_full_name":null,"purl":"pkg:github/imirfanul/structyl","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imirfanul%2Fstructyl","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imirfanul%2Fstructyl/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imirfanul%2Fstructyl/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imirfanul%2Fstructyl/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/imirfanul","download_url":"https://codeload.github.com/imirfanul/structyl/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imirfanul%2Fstructyl/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33983046,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-06T02:00:07.033Z","response_time":107,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["accessibility","component-library","datatable","date-picker","date-range-picker","date-time-picker","react","tailwindcss","theming","ui-components","ui-library"],"created_at":"2026-06-06T13:00:29.693Z","updated_at":"2026-06-06T13:00:52.048Z","avatar_url":"https://github.com/imirfanul.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!-- markdownlint-disable MD033 MD041 --\u003e\n\u003cdiv align=\"center\"\u003e\n\n\u003cpicture\u003e\n  \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"apps/docs/public/logo.svg\"\u003e\n  \u003cimg alt=\"structyl\" src=\"apps/docs/public/logo-light.svg\" height=\"72\"\u003e\n\u003c/picture\u003e\n\n**The React UI library with structure.**\n\nAccessible headless primitives, a Tailwind CSS v4 styled layer, runtime theming, and a first-class DataTable — in one cohesive, TypeScript-first system.\n\n[![npm version](https://img.shields.io/npm/v/@structyl/styled.svg?label=%40structyl%2Fstyled\u0026color=cb3837)](https://www.npmjs.com/package/@structyl/styled)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](./.github/CONTRIBUTING.md)\n[![TypeScript](https://img.shields.io/badge/TypeScript-strict-3178c6.svg?logo=typescript\u0026logoColor=white)](https://www.typescriptlang.org/)\n[![Discord](https://img.shields.io/badge/Discord-join%20chat-5865F2.svg?logo=discord\u0026logoColor=white)](https://discord.gg/mEUEUfTfgX)\n\n[Documentation](https://www.structyl.com) · [Components](https://www.structyl.com/docs) · [GitHub](https://github.com/imirfanul/structyl)\n\n\u003c/div\u003e\n\u003c!-- markdownlint-enable MD033 MD041 --\u003e\n\n---\n\n## What is structyl?\n\n**structyl** is a complete React component system, not just a set of widgets. The name is *struct* (structure, structured primitives) + *-yl* — the chemistry suffix marking an elemental building block, as in *methyl* or *ethyl*. The idea is the same: small, well-defined building blocks you compose into larger, reliable systems.\n\nIt is built in three deliberate layers, plus a differentiator:\n\n1. **Headless primitives** — accessible, unstyled behavior following the WAI-ARIA APG (in the spirit of Radix UI).\n2. **Styled components** — a Tailwind CSS v4 layer built on those primitives, with type-safe variants and a token-driven theme preset.\n3. **Runtime theming** — switchable themes via CSS variables, with light/dark modes and an SSR-safe anti-flash script.\n\nOn top of that sits a **first-class DataTable** with sorting, filtering, virtualization, grouping, inline editing, and server-side data — something headless-only libraries deliberately omit.\n\n---\n\n## Why structyl?\n\n| Library | What it gives you | What's missing |\n|---|---|---|\n| **Radix Primitives** | Headless behavior, accessibility | No styling, no theming, no DataTable |\n| **shadcn/ui** | Tailwind styling, great defaults | Copy-paste only (not a versioned package), no DataTable |\n| **MUI / Chakra** | Full system out of the box | Heavy bundle, opinionated styling, harder to escape |\n| **structyl** | **Headless + Tailwind + runtime theming + DataTable**, shipped as real, versioned, tree-shakeable packages | — |\n\nstructyl gives you the headless control of Radix, the styled ergonomics of shadcn/ui, and the completeness of a full design system — without locking you into any single layer. Use the primitives bare, drop in the styled components, or mix both.\n\n---\n\n## Highlights\n\n- **Accessible by default** — WAI-ARIA APG patterns, full keyboard navigation, and tested behavior across every interactive primitive.\n- **Compound component APIs** — ergonomic dot-notation (`Dialog.Root`, `Dialog.Trigger`, `Dialog.Content`) for clear, composable markup.\n- **`asChild` everywhere** — render any element or component while keeping the primitive's behavior, via the Slot pattern.\n- **Controlled \u0026 uncontrolled** — every stateful primitive supports both modes out of the box.\n- **Tailwind CSS v4** — a token-driven preset and type-safe variants, with class-merge conflict resolution.\n- **Runtime theming** — light/dark modes, accent presets, and an SSR-safe anti-flash script with zero layout shift.\n- **First-class DataTable** — sorting, filtering, virtualization, grouping, inline editing, and server-side data on a TanStack Table core.\n- **TypeScript-first** — strict types, named exports only, and full type inference across the API surface.\n- **Tree-shakeable** — pay only for what you import; ESM + CJS + types from every package.\n- **RSC-friendly** — designed and tested for the Next.js App Router.\n\n---\n\n## Packages\n\nEverything ships under the [`@structyl`](https://www.npmjs.com/org/structyl) npm scope. Browse full docs at [www.structyl.com/docs](https://www.structyl.com/docs).\n\n| Package | Description |\n|---|---|\n| [`@structyl/primitives`](https://www.structyl.com/docs) | Headless, WAI-ARIA accessible React primitives with compound APIs, `asChild` slots, and controlled/uncontrolled state — behavior without styling. |\n| [`@structyl/styled`](https://www.structyl.com/docs) | Tailwind CSS v4 styled React components built on accessible WAI-ARIA primitives, with a token-driven theme preset and type-safe variants. |\n| [`@structyl/themes`](https://www.structyl.com/docs) | Runtime theming for React: a `ThemeProvider` and CSS-variable token system with light/dark modes, SSR-safe anti-flash script, and accent presets. |\n| [`@structyl/data-table`](https://www.structyl.com/docs) | Headless-powered React DataTable built on TanStack Table with sorting, filtering, virtualization, grouping, inline editing, and server-side data. |\n| [`@structyl/hooks`](https://www.structyl.com/docs) | SSR-safe, tree-shakeable React hooks for state, refs, DOM, browser APIs, and performance, including `useControllableState` for headless UI. |\n| [`@structyl/utils`](https://www.structyl.com/docs) | Tree-shakeable TypeScript utilities for structyl: `cn` (Tailwind merge), prop/event composition, type guards, array/object/string/number/DOM helpers. |\n| [`@structyl/core`](https://www.structyl.com/docs) | Headless React primitives powering structyl: Slot/`asChild`, polymorphic `Primitive`, scoped contexts, focus management, presence, Floating UI poppers. |\n| [`@structyl/icons`](https://www.structyl.com/docs) | The structyl icon set: 1000+ tree-shakeable SVG icon components re-exported from lucide-react, typed for React 18 and 19. |\n| [`@structyl/api-client`](https://www.structyl.com/docs) | React data-fetching for any framework: Axios client with a built-in query cache, hooks for queries, mutations, infinite \u0026 suspense, plus SSR. |\n| [`@structyl/cli`](https://www.structyl.com/docs) | Command-line tool for scaffolding structyl projects and copying styled components into your codebase with automatic dependency resolution. |\n| [`@structyl/video-player`](https://www.structyl.com/docs) | React video player with HLS adaptive streaming (hls.js), SRT/VTT subtitles, playlists, chapters, video filters, and full keyboard control. |\n\n---\n\n## Quick start\n\nInstall the styled components and the theme provider:\n\n```bash\npnpm add @structyl/styled @structyl/themes\n# or: npm install @structyl/styled @structyl/themes\n# or: yarn add @structyl/styled @structyl/themes\n```\n\nWrap your app in the `ThemeProvider` and start composing:\n\n```tsx\nimport { ThemeProvider } from '@structyl/themes';\nimport { Button, Dialog } from '@structyl/styled';\n\nfunction App() {\n  return (\n    \u003cThemeProvider defaultTheme=\"slate\" defaultMode=\"system\"\u003e\n      \u003cDialog.Root\u003e\n        \u003cDialog.Trigger asChild\u003e\n          \u003cButton\u003eOpen dialog\u003c/Button\u003e\n        \u003c/Dialog.Trigger\u003e\n        \u003cDialog.Portal\u003e\n          \u003cDialog.Overlay /\u003e\n          \u003cDialog.Content\u003e\n            \u003cDialog.Title\u003eHello world\u003c/Dialog.Title\u003e\n            \u003cDialog.Close\u003eClose\u003c/Dialog.Close\u003e\n          \u003c/Dialog.Content\u003e\n        \u003c/Dialog.Portal\u003e\n      \u003c/Dialog.Root\u003e\n    \u003c/ThemeProvider\u003e\n  );\n}\n```\n\nPrefer to own the behavior and bring your own styling? Install [`@structyl/primitives`](https://www.structyl.com/docs) instead and style the headless layer yourself. Full setup, theming, and per-component guides live at [www.structyl.com/docs](https://www.structyl.com/docs).\n\n---\n\n## Repository structure\n\n```\nstructyl/\n├── apps/\n│   └── docs/              # Documentation site (Next.js 15)\n├── packages/\n│   ├── core/              # Slot, Primitive, contexts, focus, presence, poppers\n│   ├── primitives/        # Headless behavior layer\n│   ├── styled/            # Tailwind CSS v4 styled component layer\n│   ├── themes/            # Theme system + ThemeProvider\n│   ├── data-table/        # The DataTable\n│   ├── hooks/             # SSR-safe React hooks\n│   ├── utils/             # Pure utility functions\n│   ├── icons/             # Icon set (lucide re-export)\n│   ├── api-client/        # Data-fetching client + hooks\n│   ├── cli/               # shadcn-style installer CLI\n│   └── video-player/      # HLS video player\n├── tooling/\n│   ├── eslint-config/\n│   ├── tsconfig/\n│   └── tailwind-config/\n└── docs/                  # Project-level docs\n```\n\nThe monorepo is managed with **pnpm** workspaces and **Turborepo**. Each package is bundled with **tsup** (ESM + CJS + types).\n\n---\n\n## Development\n\n### Prerequisites\n\n- Node.js `\u003e=20`\n- pnpm `\u003e=9`\n\n### Setup\n\n```bash\npnpm install        # Install dependencies\npnpm build          # Build all packages\npnpm dev            # Watch mode across packages\npnpm storybook      # Run Storybook\npnpm docs           # Run the docs site\n```\n\n### Useful commands\n\n```bash\npnpm test           # Run all unit tests (Vitest)\npnpm test:e2e       # Run Playwright end-to-end tests\npnpm test:a11y      # Run accessibility tests (axe-core)\npnpm typecheck      # Type-check the whole monorepo\npnpm lint           # Lint everything (ESLint v9)\npnpm format         # Format with Prettier\npnpm size           # Check bundle-size budgets\npnpm changeset      # Add a changeset for your PR\n```\n\n---\n\n## Contributing\n\nContributions are welcome — issues, discussions, and PRs alike. Before opening a PR, please read:\n\n- [CONTRIBUTING.md](./.github/CONTRIBUTING.md) — how to contribute, branch, and submit changes\n- [ARCHITECTURE.md](./docs/ARCHITECTURE.md) — why the codebase is shaped this way\n- [CODE_OF_CONDUCT.md](./CODE_OF_CONDUCT.md) — community guidelines\n\nUser-visible changes should include a changeset (`pnpm changeset`).\n\nHave a question or want to chat? Join us on [Discord](https://discord.gg/mEUEUfTfgX) or in [GitHub Discussions](https://github.com/imirfanul/structyl/discussions).\n\n---\n\n## License\n\n[MIT](./LICENSE) © structyl contributors\n\n---\n\n## Acknowledgments\n\nstructyl stands on the shoulders of excellent open-source work:\n\n- [Radix UI](https://www.radix-ui.com/) — for the headless primitive pattern\n- [shadcn/ui](https://ui.shadcn.com/) — for the Tailwind component aesthetic\n- [TanStack](https://tanstack.com/) — for the table and virtualization engines\n- [Floating UI](https://floating-ui.com/) — for positioning\n- [Tailwind CSS](https://tailwindcss.com/) — for the styling foundation\n- [Lucide](https://lucide.dev/) — for the icon set\n- [WAI-ARIA APG](https://www.w3.org/WAI/ARIA/apg/) — for the accessibility patterns\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimirfanul%2Fstructyl","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fimirfanul%2Fstructyl","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimirfanul%2Fstructyl/lists"}