{"id":13880973,"url":"https://github.com/tailwindlabs/tailwindui-react","last_synced_at":"2025-09-30T15:30:46.420Z","repository":{"id":65977894,"uuid":"286511013","full_name":"tailwindlabs/tailwindui-react","owner":"tailwindlabs","description":"Deprecated, please use the Headless UI repo instead.","archived":true,"fork":false,"pushed_at":"2020-10-02T21:35:51.000Z","size":274,"stargazers_count":433,"open_issues_count":0,"forks_count":13,"subscribers_count":21,"default_branch":"develop","last_synced_at":"2025-01-19T20:04:16.382Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://github.com/tailwindlabs/headlessui/","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/tailwindlabs.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}},"created_at":"2020-08-10T15:24:17.000Z","updated_at":"2024-07-30T14:58:19.000Z","dependencies_parsed_at":"2023-02-19T19:15:47.279Z","dependency_job_id":null,"html_url":"https://github.com/tailwindlabs/tailwindui-react","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tailwindlabs%2Ftailwindui-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tailwindlabs%2Ftailwindui-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tailwindlabs%2Ftailwindui-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tailwindlabs%2Ftailwindui-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tailwindlabs","download_url":"https://codeload.github.com/tailwindlabs/tailwindui-react/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234747663,"owners_count":18880480,"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-08-06T08:03:43.380Z","updated_at":"2025-09-30T15:30:41.104Z","avatar_url":"https://github.com/tailwindlabs.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ch1 align=\"center\"\u003e⚠️ Deprecated: use \u003ca href=\"https://github.com/tailwindlabs/headlessui/\"\u003eHeadless UI\u003c/a\u003e instead ⚠️\u003c/h1\u003e\n\u003c/p\u003e\n\n---\n\n\u003ch3 align=\"center\"\u003e\n  @tailwindui/react\n\u003c/h3\u003e\n\n\u003cp align=\"center\"\u003e\n  A set of completely unstyled, fully accessible UI components for React, designed to integrate\n  beautifully with Tailwind CSS.\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@tailwindui/react\"\u003e\u003cimg src=\"https://img.shields.io/npm/dt/@tailwindui/react.svg\" alt=\"Total Downloads\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/tailwindlabs/tailwindui-react/releases\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/@tailwindui/react.svg\" alt=\"Latest Release\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/tailwindlabs/tailwindui-react/blob/master/LICENSE\"\u003e\u003cimg src=\"https://img.shields.io/npm/l/@tailwindui/react.svg\" alt=\"License\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n## Installation\n\n```shell\n# npm\nnpm install @tailwindui/react\n\n# Yarn\nyarn add @tailwindui/react\n```\n\n## Components\n\nThis project is still in early development, but the plan is to build out all of the primitives we need to provide interactive React examples of all of the components included in [Tailwind UI](https://tailwindui.com), the commercial component directory that helps us fund the development of our open-source work like [Tailwind CSS](https://tailwindcss.com).\n\nThis includes things like:\n\n- Dropdowns\n- Toggles\n- Modals\n- Tabs\n- Slide-overs\n- Mobile menus\n- Listboxes\n- Accordions\n\n...and more in the future.\n\nWe decided to start with an enter/leave [Transition](#transition) component that is tailor-made for Tailwind's utility-first CSS approach, to help bring the React experience up to parity with what's already possible in the Vue ecosystem.\n\nWe'll be continuing to develop new components on an on-going basis, with a goal of reaching a pretty fleshed out v1.0 by the end of the year.\n\n### Transition\n\nThe `Transition` component lets you add enter/leave transitions to conditionally rendered elements, using CSS classes to control the actual transition styles in the different stages of the transition.\n\n```tsx\nimport { Transition } from '@tailwindui/react'\nimport { useState } from 'react'\n\nfunction MyComponent() {\n  const [isOpen, setIsOpen] = useState(false)\n\n  return (\n    \u003cbutton onClick={() =\u003e setIsOpen(!isOpen)}\u003e\n      Toggle\n    \u003c/button\u003e\n    \u003cTransition\n      show={isOpen}\n      enter=\"transition-opacity duration-75\"\n      enterFrom=\"opacity-0\"\n      enterTo=\"opacity-100\"\n      leave=\"transition-opacity duration-150\"\n      leaveFrom=\"opacity-100\"\n      leaveTo=\"opacity-0\"\n    \u003e\n      I will fade in and out\n    \u003c/Transition\u003e\n  )\n}\n```\n\n#### Showing and hiding the Transition content\n\nWrap the content that should be conditionally rendered in a `\u003cTransition\u003e` component, and use the `show` prop to control whether the content should be visible or hidden.\n\n```tsx\nimport { Transition } from '@tailwindui/react'\nimport { useState } from 'react'\n\nfunction MyComponent() {\n  const [isOpen, setIsOpen] = useState(false)\n\n  return (\n    \u003cbutton onClick={() =\u003e setIsOpen(!isOpen)}\u003e\n      Toggle\n    \u003c/button\u003e\n    \u003cTransition\n      show={isOpen}\n      // ...\n    \u003e\n      I will fade in and out\n    \u003c/Transition\u003e\n  )\n}\n```\n\nThe `Transition` component will render a `div` by default, but you can use the `as` prop to render a different element instead if needed. Any other HTML attributes (like `className`) can be added directly to the `Transition` the same way they would be to regular elements.\n\n```tsx\nimport { Transition } from '@tailwindui/react'\nimport { useState } from 'react'\n\nfunction MyComponent() {\n  const [isOpen, setIsOpen] = useState(false)\n\n  return (\n    \u003cbutton onClick={() =\u003e setIsOpen(!isOpen)}\u003e\n      Toggle\n    \u003c/button\u003e\n    \u003cTransition\n      show={isOpen}\n      as=\"a\"\n      href=\"/my-url\"\n      className=\"font-bold\"\n      // ...\n    \u003e\n      I will fade in and out\n    \u003c/Transition\u003e\n  )\n}\n```\n\nIf you'd prefer not to render an additional element at all, you can pass your children as a function instead which will receive a `ref` that you need to attach to your root node:\n\n```tsx\nimport { Transition } from '@tailwindui/react'\nimport { useState } from 'react'\n\nfunction MyComponent() {\n  const [isOpen, setIsOpen] = useState(false)\n\n  return (\n    \u003cbutton onClick={() =\u003e setIsOpen(!isOpen)}\u003e\n      Toggle\n    \u003c/button\u003e\n    \u003cTransition\n      show={isOpen}\n      // ...\n    \u003e\n      {ref =\u003e \u003cdiv ref={ref}\u003e{/* Your content goes here*/}\u003c/div\u003e}\n    \u003c/Transition\u003e\n  )\n}\n```\n\nBe sure to attach the `ref` or your transitions will not work correctly.\n\n#### Animating transitions\n\nBy default, a `Transition` will enter and leave instantly, which is probably not what you're looking for if you're using this library.\n\nTo animate your enter/leave transitions, add classes that provide the styling for each phase of the transitions using these props:\n\n- **enter**: Applied the entire time an element is entering. Usually you define your duration and what properties you want to transition here, for example `transition-opacity duration-75`.\n- **enterFrom**: The starting point to enter from, for example `opacity-0` if something should fade in.\n- **enterTo**: The ending point to enter to, for example `opacity-100` after fading in.\n- **leave**: Applied the entire time an element is leaving. Usually you define your duration and what properties you want to transition here, for example `transition-opacity duration-75`.\n- **leaveFrom**: The starting point to leave from, for example `opacity-100` if something should fade out.\n- **leaveTo**: The ending point to leave to, for example `opacity-0` after fading out.\n\nHere's an example:\n\n```tsx\nimport { Transition } from '@tailwindui/react'\nimport { useState } from 'react'\n\nfunction MyComponent() {\n  const [isOpen, setIsOpen] = useState(false)\n\n  return (\n    \u003cbutton onClick={() =\u003e setIsOpen(!isOpen)}\u003e\n      Toggle\n    \u003c/button\u003e\n    \u003cTransition\n      show={isOpen}\n      enter=\"transition-opacity duration-75\"\n      enterFrom=\"opacity-0\"\n      enterTo=\"opacity-100\"\n      leave=\"transition-opacity duration-150\"\n      leaveFrom=\"opacity-100\"\n      leaveTo=\"opacity-0\"\n    \u003e\n      I will fade in and out\n    \u003c/Transition\u003e\n  )\n}\n```\n\nIn this example, the transitioning element will take 75ms to enter (that's the `duration-75` class), and will transition the opacity property during that time (that's `transition-opacity`).\n\nIt will start completely transparent before entering (that's `opacity-0` in the `enterFrom` phase), and fade in to completely opaque (`opacity-100`) when finished (that's the `enterTo` phase).\n\nWhen the element is being removed (the `leave` phase), it will transition the opacity property, and spend 150ms doing it (`transition-opacity duration-150`).\n\nIt will start as completely opaque (the `opacity-100` in the `leaveFrom` phase), and finish as completely transparent (the `opacity-0` in the `leaveTo` phase).\n\nAll of these props are optional, and will default to just an empty string.\n\n#### Co-ordinating multiple transitions\n\nSometimes you need to transition multiple elements with different animations but all based on the same state. For example, say the user clicks a button to open a sidebar that slides over the screen, and you also need to fade-in a background overlay at the same time.\n\nYou can do this by wrapping the related elements with a parent `Transition` component, and wrapping each child that needs its own transition styles with a `Transition.Child` component, which will automatically communicate with the parent `Transition` and inherit the parent's `show` state.\n\n```tsx\nimport { Transition } from '@tailwindui/react'\n\nfunction Sidebar({ isOpen }) {\n  return (\n    \u003cTransition show={isOpen}\u003e\n      {/* Shared parent */}\n      \u003cdiv\u003e\n        {/* Background overlay */}\n        \u003cTransition.Child\n          enter=\"transition-opacity ease-linear duration-300\"\n          enterFrom=\"opacity-0\"\n          enterTo=\"opacity-100\"\n          leave=\"transition-opacity ease-linear duration-300\"\n          leaveFrom=\"opacity-100\"\n          leaveTo=\"opacity-0\"\n        \u003e\n          {/* ... */}\n        \u003c/Transition.Child\u003e\n\n        {/* Sliding sidebar */}\n        \u003cTransition.Child\n          enter=\"transition ease-in-out duration-300 transform\"\n          enterFrom=\"-translate-x-full\"\n          enterTo=\"translate-x-0\"\n          leave=\"transition ease-in-out duration-300 transform\"\n          leaveFrom=\"translate-x-0\"\n          leaveTo=\"-translate-x-full\"\n        \u003e\n          {/* ... */}\n        \u003c/Transition.Child\u003e\n      \u003c/div\u003e\n    \u003c/Transition\u003e\n  )\n}\n```\n\nThe `Transition.Child` component has the exact same API as the `Transition` component, but with no `show` prop, since the `show` value is controlled by the parent.\n\nParent `Transition` components will always automatically wait for all children to finish transitioning before unmounting, so you don't need to manage any of that timing yourself.\n\n#### Transitioning on initial mount\n\nIf you want an element to transition the very first time it's rendered, set the `appear` prop to `true`.\n\nThis is useful if you want something to transition in on initial page load, or when its parent is conditionally rendered.\n\n```tsx\nimport { Transition } from '@tailwindui/react'\n\nfunction MyComponent({ isShowing }) {\n  return (\n    \u003cTransition\n      appear={true}\n      show={isShowing}\n      enter=\"transition-opacity duration-75\"\n      enterFrom=\"opacity-0\"\n      enterTo=\"opacity-100\"\n      leave=\"transition-opacity duration-150\"\n      leaveFrom=\"opacity-100\"\n      leaveTo=\"opacity-0\"\n    \u003e\n      {/* Your content goes here*/}\n    \u003c/Transition\u003e\n  )\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftailwindlabs%2Ftailwindui-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftailwindlabs%2Ftailwindui-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftailwindlabs%2Ftailwindui-react/lists"}