# Devigner UI

> Free animated React components for Tailwind CSS. Each component installs as a plain .tsx file in your repo with one command, and ships with keyboard support, reduced motion and light/dark themes built in.

- Site: https://ui.devigner.cc
- Requirements: React 18 or 19, Tailwind CSS v4
- Set up once per project: `npx devignerui init`
- Add a component: `npx devignerui add <name>` (writes components/ui/<name>.tsx and lists the packages it needs)
- npm package: devignerui (React components, motion tokens and the CLI)
- License: MIT, free including commercial use
- Components: 28

## Components

- [Flick Cards Slider](https://ui.devigner.cc/components/flick-cards-slider): A fanned deck of photo cards you flick sideways: the next card swings to the front with one elastic overshoot, the rest dim as they fan out, and the front card's button fades in last. Category: Marketing. Install: `npx devignerui add flick-cards-slider`. Full guide: https://ui.devigner.cc/llms/flick-cards-slider.md
- [Menu Notch](https://ui.devigner.cc/components/menu-notch): A pill with a menu toggle and a theme button that unfolds into a panel of grouped links; its icon crosses into an X, its label blurs in letter by letter and every link rolls to its hover color. Category: Marketing. Install: `npx devignerui add menu-notch`. Full guide: https://ui.devigner.cc/llms/menu-notch.md
- [Command Palette](https://ui.devigner.cc/components/command-palette): A search field over your commands, with nested pages that slide in and a highlight that glides between rows. Category: Interface. Install: `npx devignerui add command-palette`. Full guide: https://ui.devigner.cc/llms/command-palette.md
- [Context Menu](https://ui.devigner.cc/components/context-menu): A right-click menu that opens where you click, stays inside the screen and slides into submenus. Category: Interface. Install: `npx devignerui add context-menu`. Full guide: https://ui.devigner.cc/llms/context-menu.md
- [Dynamic Island](https://ui.devigner.cc/components/dynamic-island): A black pill that springs open into live activities, with ten ready-made views from a timer to AirDrop. Category: Interface. Install: `npx devignerui add dynamic-island`. Full guide: https://ui.devigner.cc/llms/dynamic-island.md
- [Morphing Popover](https://ui.devigner.cc/components/morphing-popover): A Liquid Glass pill that swells into a panel holding anything: a form, a picker, a note. Category: Interface. Install: `npx devignerui add morphing-popover`. Full guide: https://ui.devigner.cc/llms/morphing-popover.md
- [Rating](https://ui.devigner.cc/components/rating): Star rating with one fill that slides across every star, so half steps and pointer previews come free. Category: Marketing. Install: `npx devignerui add rating`. Full guide: https://ui.devigner.cc/llms/rating.md
- [Tabs](https://ui.devigner.cc/components/tabs): A row of pill options inside a hairline ring, where a soft pill slides behind the one you pick. Category: Interface. Install: `npx devignerui add tabs`. Full guide: https://ui.devigner.cc/llms/tabs.md
- [Flip Button](https://ui.devigner.cc/components/flip-button): A pill button whose label flips up on hover while the icon in its badge slides out and back in. Category: Marketing. Install: `npx devignerui add flip-button`. Full guide: https://ui.devigner.cc/llms/flip-button.md
- [Expand Tabs](https://ui.devigner.cc/components/expand-tabs): A row of square icon tiles for navigation: the one under the pointer widens, fills with the accent and trades its icon for its label. Category: Interface. Install: `npx devignerui add expand-tabs`. Full guide: https://ui.devigner.cc/llms/expand-tabs.md
- [Stardust Slider](https://ui.devigner.cc/components/stardust-slider): A slider in a labelled card whose blue fill glows with drifting dust, with a soft handle that firms up when grabbed and a readout whose digits roll to the value. Category: Interface. Install: `npx devignerui add stardust-slider`. Full guide: https://ui.devigner.cc/llms/stardust-slider.md
- [Badge](https://ui.devigner.cc/components/badge): A small label pill for statuses, filters, people and presence, tinted from one text color, with sizes, an optional icon and count, link or button behavior, and a remove button that folds it away. Category: Interface. Install: `npx devignerui add badge`. Full guide: https://ui.devigner.cc/llms/badge.md
- [Image Generation](https://ui.devigner.cc/components/image-generation): A frame for an image that is still being made: a grid of tiny dots that swell around the cursor, take on the picture's colors and dissolve into the finished image. Category: Interface. Install: `npx devignerui add image-generation`. Full guide: https://ui.devigner.cc/llms/image-generation.md
- [KPI Chart](https://ui.devigner.cc/components/kpi-chart): A growth curve that draws itself in, with a dot you click along the line and a card whose digits roll to the change. Category: Interface. Install: `npx devignerui add kpi-chart`. Full guide: https://ui.devigner.cc/llms/kpi-chart.md
- [Contact Lens](https://ui.devigner.cc/components/contact-lens): A dim contact line with an icon row: hover an icon and its part of the line lifts and lights up under a label, click to copy it. Category: Marketing. Install: `npx devignerui add contact-lens`. Full guide: https://ui.devigner.cc/llms/contact-lens.md
- [Copy Button](https://ui.devigner.cc/components/copy-button): Copies text in one click, then turns green and retypes its label to Copied. Category: Interface. Install: `npx devignerui add copy-button`. Full guide: https://ui.devigner.cc/llms/copy-button.md
- [Nav Notch](https://ui.devigner.cc/components/nav-notch): A row of small notches that works as a navigation bar: the one under the pointer opens into a labelled chip and its neighbours swell around it like a lens. Category: Interface. Install: `npx devignerui add nav-notch`. Full guide: https://ui.devigner.cc/llms/nav-notch.md
- [Liquid Glass](https://ui.devigner.cc/components/liquid-glass): An iOS 27 style glass menu whose rim bends the page behind it: a pill that swells into a squircle panel of rows and melts back once you pick one. Category: Interface. Install: `npx devignerui add liquid-glass`. Full guide: https://ui.devigner.cc/llms/liquid-glass.md
- [Slider](https://ui.devigner.cc/components/slider): A slider whose fill heats from yellow to red as it grows, with a glass thumb that opens to show the value while you drag. Category: Interface. Install: `npx devignerui add slider`. Full guide: https://ui.devigner.cc/llms/slider.md
- [File Upload](https://ui.devigner.cc/components/file-upload): An upload panel whose files drip out of the dropzone as liquid, then queue, pause, fail and retry in compact cards before you submit them. Category: Interface. Install: `npx devignerui add file-upload`. Full guide: https://ui.devigner.cc/llms/file-upload.md
- [Goo Switch](https://ui.devigner.cc/components/goo-switch): A switch whose thumb is a drop of liquid: it trails a tail when it moves and stretches over the edge when you pull it too far. Category: Interface. Install: `npx devignerui add goo-switch`. Full guide: https://ui.devigner.cc/llms/goo-switch.md
- [Inline Time Edit](https://ui.devigner.cc/components/inline-time-edit): A 2:30 that splits into hour and minute fields when you edit it, then folds back. Category: Interface. Install: `npx devignerui add inline-time-edit`. Full guide: https://ui.devigner.cc/llms/inline-time-edit.md
- [Date Range Picker](https://ui.devigner.cc/components/date-range-picker): A calendar that shows the range before you commit to it, with presets. Category: Interface. Install: `npx devignerui add date-range-picker`. Full guide: https://ui.devigner.cc/llms/date-range-picker.md
- [Chart Card](https://ui.devigner.cc/components/chart-card): A stats card whose bars show their value as you move across them. Category: Interface. Install: `npx devignerui add chart-card`. Full guide: https://ui.devigner.cc/llms/chart-card.md
- [Delete Button](https://ui.devigner.cc/components/delete-button): Asks before it deletes, waits for your API call, then shows a tick. Category: Interface. Install: `npx devignerui add delete-button`. Full guide: https://ui.devigner.cc/llms/delete-button.md
- [Menu Dock](https://ui.devigner.cc/components/menu-dock): A dock that grows into its own menus, nested as deep as you need. Category: Interface. Install: `npx devignerui add menu-dock`. Full guide: https://ui.devigner.cc/llms/menu-dock.md
- [Timeline](https://ui.devigner.cc/components/timeline): The active step slides off the rail, and the line bends to follow it. Category: Marketing. Install: `npx devignerui add timeline`. Full guide: https://ui.devigner.cc/llms/timeline.md
- [Magnetic Button](https://ui.devigner.cc/components/magnetic-button): Leans toward your cursor before you reach it, then lets go with a wobble. Category: Marketing. Install: `npx devignerui add magnetic-button`. Full guide: https://ui.devigner.cc/llms/magnetic-button.md

## Docs

- [Full documentation in one file](https://ui.devigner.cc/llms-full.txt): every component's usage, props, keyboard, accessibility, theming, edge cases and troubleshooting
- [All components](https://ui.devigner.cc/components): every component running live, with search and filters
- [Home](https://ui.devigner.cc): overview, pricing and FAQ

## FAQ

### Is Devigner UI free?

Yes. Every component on the site is free, including for commercial work. Pro will be a separate paid set, and nothing that's free now moves behind it.

### How do I add a component to my project?

Run npx devignerui init once per project, then npx devignerui add with the component's name. The CLI writes the file into components/ui and prints the npm packages it needs.

### Does it work with shadcn/ui?

Yes. Components install into the same components/ui folder and use the standard shadcn/ui color tokens (primary, secondary, muted, accent, border, ring and the rest), so they pick up your existing theme and dark mode with nothing to add.

### Do I need Framer Motion?

Most components use Motion, the library that used to be called Framer Motion, and a few use GSAP. Each component's page and the CLI list exactly which packages it needs.

### Will it work with the Next.js App Router?

Yes. Every component starts with "use client", so you can render it from a server component.

### How do dark mode and theming work?

Every color is a CSS variable. Put the dark class on your html element and the components switch, and override any variable in your own CSS to change the look.