Accordion
Lets one section remain open while collapsing the previously selected section.
ReactTailwind
ReUI
shadcn/ui components and composed dashboard examples, including data grids, selects, autocompletes, command palettes, alerts, skeletons, and several practical variants of each.
176 published items
Keenthemes
176 published items
Accordion
Turns the arrow as a section opens or closes to reinforce the disclosure state.
ReactTailwind
Accordion
Organizes setup tasks into progressive disclosures with status cues and scannable codes.
ReactTailwind
Accordion
Changes each indicator to reflect whether its section can be opened or collapsed.
ReactTailwind
Accordion
Visually separates each disclosure into its own rounded panel.
ReactTailwind
Accordion
Groups collapsible content inside a card for a contained settings or details section.
ReactTailwind
Distinguishes unavailable sections from the currently highlighted disclosure.
ReactTailwind
Accordion
Adds visual metadata to each trigger so sections can communicate category or status at a glance.
ReactTailwind
Accordion
Fits disclosure rows into framed layouts without introducing a separate outer container.
ReactTailwind
Accordion
Supports secondary disclosure levels while keeping parent and child sections visually distinct.
ReactTailwind
Accordion
Reveals member details while avatars and role markers keep each person identifiable.
ReactTailwind
Feedback
Makes room for supporting context and a direct response within the callout.
ReactTailwind
Feedback
Aligns a message flush with a framed container instead of doubling its border.
ReactTailwind
Feedback
Collects several related notices in one bounded region for sequential review.
ReactTailwind
Feedback
Keeps the notice and its response controls aligned inside a shared container.
ReactTailwind
Feedback
Uses strong contrast to emphasize a message that also needs a direct response.
ReactTailwind
Feedback
Calls attention to an account issue that requires a payment-related action.
ReactTailwind
Feedback
Groups multiple operational updates so readers can assess system health together.
ReactTailwind
Feedback
Introduces an unfamiliar capability at the point where someone can try it.
ReactTailwind
Feedback
Presents a sender and message preview as an inline notification.
ReactTailwind
Feedback
Pairs the message with a visual cue that makes its purpose easier to scan.
ReactTailwind
Feedback
Raises contrast for a sender and message preview against surrounding content.
ReactTailwind
Feedback
Lets the reader respond to the message without leaving the callout.
ReactTailwind
Feedback
Warns about a harmful state and offers immediate recovery or confirmation controls.
ReactTailwind
Feedback
Surfaces contextual guidance with controls for the reader's next step.
ReactTailwind
Feedback
Uses a positive status treatment for completed actions or resolved issues.
ReactTailwind
Feedback
Uses an inverted surface to separate the message from surrounding content.
ReactTailwind
Combines explanatory context with primary and secondary choices before proceeding.
ReactTailwindFeedback
Closes the registration flow with the completed ticket details and next action.
ReactTailwindFeedback
Overlay
Prompts the user to relaunch the application so a system update can take effect.
ReactTailwindFeedback
Directs attention to an expired plan or failed payment before access is affected.
ReactTailwindFeedback
Overlay
Prevents an accidental session exit by requiring the user to confirm first.
ReactTailwindFeedback
Summarizes a sensitive audit operation and its implications before it begins.
ReactTailwindFeedback
Keeps low-complexity decisions focused in a smaller modal footprint.
ReactTailwindFeedback
Overlay
Adds a visual cue so the decision type is recognizable before the text is read.
ReactTailwindFeedback
Balances a prominent icon with a brief decision in a small modal.
ReactTailwindFeedback
Requires an explicit choice before an irreversible action such as deletion continues.
ReactTailwindFeedback
Interrupts an existing modal flow when a second decision must be resolved first.
ReactTailwindFeedback
Acknowledges completion and gives the user a clear route out of the finished flow.
ReactTailwindFeedback
Explains the consequence of disabling an account before the action is accepted.
ReactTailwindFeedback
Overlay
Lets someone remain on the page or discard edits before navigating away.
ReactTailwindFeedback
Keeps video and landscape media proportional as their container resizes.
ReactTailwind
Fits traditional displays, slides, and archival media without stretching them.
ReactTailwind
Media
Maintains equal width and height for avatars, tiles, or square imagery.
ReactTailwind
Preserves a cinematic crop for banners and panoramic media across screen sizes.
ReactTailwind