---
name: "@fewtone"
slug: "fewtone"
description: "Accessible, customizable React components for Next.js and Tailwind CSS, built on Radix with smooth motion."
category: "Animated components"
tags: ["accessibility", "animation", "auth", "buttons", "cards", "dashboard", "forms", "loaders", "media", "navigation", "overlays", "tables", "theming"]
framework: "react"
license: "MIT"
author: "FewTone"
website: "https://ui.fewtone.com"
github: "https://github.com/FewTone/ui"
registry: "https://ui.fewtone.com/r/registry.json"
pro: false
pro_url: null
github_stars: 0
component_count: 48
generated_at: "2026-10-27T06:34:08.542Z"
---

# @fewtone

Accessible, customizable React components for Next.js and Tailwind CSS, built on Radix with smooth motion.

## Links

- Website: https://ui.fewtone.com
- GitHub: https://github.com/FewTone/ui
- Registry JSON: https://ui.fewtone.com/r/registry.json
- Directory page: https://sh4dcn.netlify.app/registry/fewtone
- This file: https://sh4dcn.netlify.app/md/fewtone.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://ui.fewtone.com/r/registry.json
pnpm dlx shadcn@latest add https://ui.fewtone.com/r/registry.json
bunx shadcn@latest add https://ui.fewtone.com/r/registry.json
# clone the source repo
git clone https://github.com/FewTone/ui.git
# fetch the raw registry index
curl -s https://ui.fewtone.com/r/registry.json
```

## Components (48)

| name | type | description | install |
| --- | --- | --- | --- |
| tokens | registry:lib | Sizes, motion durations, easing, focus ring and popover animations that FewTone UI components use. Adds only what your project does not define yet. | `npx shadcn@latest add https://ui.fewtone.com/r/tokens.json` |
| motion | registry:lib | The spring, duration and easing presets FewTone UI components animate with, for motion/react. | `npx shadcn@latest add https://ui.fewtone.com/r/motion.json` |
| accordion | registry:ui | An accessible React accordion for Next.js: sections that open and close with a smooth height change, as one card, separate cards or plain rows. Built on Radix. | `npx shadcn@latest add https://ui.fewtone.com/r/accordion.json` |
| alert-dialog | registry:ui | An accessible React alert dialog for Next.js that asks people to confirm destructive actions, with focus starting on Cancel, built on Radix Alert Dialog. | `npx shadcn@latest add https://ui.fewtone.com/r/alert-dialog.json` |
| avatar | registry:ui | An accessible React avatar for Next.js and Tailwind CSS: a picture or initials in three sizes, alone or in an overlapping group, built on Radix Avatar. | `npx shadcn@latest add https://ui.fewtone.com/r/avatar.json` |
| badge | registry:ui | An accessible React badge for Next.js and Tailwind CSS: small status labels in five variants, including one with a light travelling round its edge. | `npx shadcn@latest add https://ui.fewtone.com/r/badge.json` |
| breadcrumb | registry:ui | An accessible React breadcrumb for Next.js and Tailwind CSS: a trail of links whose levels animate as you move, with custom separators and a collapsed middle. | `npx shadcn@latest add https://ui.fewtone.com/r/breadcrumb.json` |
| button | registry:ui | An accessible React button for Next.js and Tailwind CSS with six variants, three sizes, icons and a soft tint on hover and press, built on a native button. | `npx shadcn@latest add https://ui.fewtone.com/r/button.json` |
| calendar | registry:ui | An accessible React calendar for Next.js and Tailwind CSS: pick a day or a range, with full keyboard support, disabled days and Intl names. No date library. | `npx shadcn@latest add https://ui.fewtone.com/r/calendar.json` |
| card | registry:ui | A React card for Next.js and Tailwind CSS: a surface for grouped content with header, action, content and footer parts, a small size and a link style. | `npx shadcn@latest add https://ui.fewtone.com/r/card.json` |
| checkbox | registry:ui | An accessible React checkbox for Next.js forms, with a check that draws itself in and an indeterminate state, built on Radix Checkbox. | `npx shadcn@latest add https://ui.fewtone.com/r/checkbox.json` |
| combobox | registry:ui | An accessible React combobox for Next.js and Tailwind CSS: type in the field to filter and pick one option, or several as chips, with a gliding highlight. | `npx shadcn@latest add https://ui.fewtone.com/r/combobox.json` |
| command | registry:ui | An accessible React command menu for Next.js and Tailwind CSS: a ⌘K palette that filters and ranks as you type, with groups, shortcuts and a gliding highlight. | `npx shadcn@latest add https://ui.fewtone.com/r/command.json` |
| context-menu | registry:ui | An accessible React context menu for Next.js: a right-click menu with a gliding highlight, shortcuts, checkbox and radio items and sub-menus, built on Radix. | `npx shadcn@latest add https://ui.fewtone.com/r/context-menu.json` |
| copy-button | registry:ui | An accessible React copy to clipboard button for Next.js: the copy icon turns into a check, and screen readers hear "Copied". | `npx shadcn@latest add https://ui.fewtone.com/r/copy-button.json` |
| date-picker | registry:ui | An accessible React date picker for Next.js and Tailwind CSS: a calendar in a popover for a date or a date range, with presets and Intl formatting. | `npx shadcn@latest add https://ui.fewtone.com/r/date-picker.json` |
| dialog | registry:ui | An accessible React dialog for Next.js and Tailwind CSS: a modal window that grows out of its trigger, keeps focus inside and returns it, built on Radix Dialog. | `npx shadcn@latest add https://ui.fewtone.com/r/dialog.json` |
| dropdown-menu | registry:ui | An accessible React dropdown menu for Next.js with a highlight that glides between items, shortcuts, checkbox and radio items and sub-menus, built on Radix. | `npx shadcn@latest add https://ui.fewtone.com/r/dropdown-menu.json` |
| hover-card | registry:ui | An accessible React hover card for Next.js and Tailwind CSS: a preview card for a link, like a profile on an @mention, built on Radix Hover Card. | `npx shadcn@latest add https://ui.fewtone.com/r/hover-card.json` |
| input | registry:ui | An accessible React text input with three sizes and clear invalid, disabled and file states, built on a native input. | `npx shadcn@latest add https://ui.fewtone.com/r/input.json` |
| input-otp | registry:ui | An accessible React one-time code input for Next.js and Tailwind: boxes that move on as you type and take a pasted code, built on Radix. | `npx shadcn@latest add https://ui.fewtone.com/r/input-otp.json` |
| loading-button | registry:ui | An accessible React loading button for Next.js that shows loading, success and error states for async actions, without changing width. | `npx shadcn@latest add https://ui.fewtone.com/r/loading-button.json` |
| marquee | registry:ui | An accessible React marquee for Next.js and Tailwind CSS: an endless, seamless row of logos or cards that pauses on hover and stops with reduced motion. | `npx shadcn@latest add https://ui.fewtone.com/r/marquee.json` |
| navigation-menu | registry:ui | An accessible React navigation menu for Next.js and Tailwind CSS: a top bar with rich dropdown panels that glide between sizes, built on Radix Navigation Menu. | `npx shadcn@latest add https://ui.fewtone.com/r/navigation-menu.json` |
| number-input | registry:ui | An accessible React number input for Next.js and Tailwind with step buttons, keyboard control, min and max, and Intl number formatting. | `npx shadcn@latest add https://ui.fewtone.com/r/number-input.json` |
| number-ticker | registry:ui | An accessible React number ticker for Next.js and Tailwind CSS: digits roll like an odometer and glide as the number changes length, with Intl formatting. | `npx shadcn@latest add https://ui.fewtone.com/r/number-ticker.json` |
| pagination | registry:ui | An accessible React pagination for Next.js and Tailwind CSS: page links with ellipses, Previous and Next, and a pill that slides to the current page. | `npx shadcn@latest add https://ui.fewtone.com/r/pagination.json` |
| popover | registry:ui | An accessible React popover for Next.js and Tailwind CSS: forms, settings and other rich content anchored to a button, built on Radix Popover. | `npx shadcn@latest add https://ui.fewtone.com/r/popover.json` |
| progress | registry:ui | An accessible React progress bar and ring for Next.js and Tailwind CSS that show how far along a task is, with an indeterminate state. | `npx shadcn@latest add https://ui.fewtone.com/r/progress.json` |
| radio-group | registry:ui | An accessible React radio group for Next.js forms, where the selected dot travels to the new choice, built on Radix Radio Group. | `npx shadcn@latest add https://ui.fewtone.com/r/radio-group.json` |
| scroll-area | registry:ui | An accessible React scroll area for Next.js and Tailwind CSS: native scrolling with a slim scrollbar and soft fades at the edges, built on Radix. | `npx shadcn@latest add https://ui.fewtone.com/r/scroll-area.json` |
| select | registry:ui | An accessible React select with a gliding highlight, groups, labels and a scrollable list, built on Radix Select. | `npx shadcn@latest add https://ui.fewtone.com/r/select.json` |
| sheet | registry:ui | An accessible React sheet for Next.js: a side panel that slides in from any edge of the screen, for forms, filters and navigation, built on Radix Dialog. | `npx shadcn@latest add https://ui.fewtone.com/r/sheet.json` |
| sidebar | registry:ui | An accessible React sidebar for Next.js and Tailwind CSS: collapses to icons or off canvas, with a gliding active indicator and a sheet on phones. | `npx shadcn@latest add https://ui.fewtone.com/r/sidebar.json` |
| skeleton | registry:ui | A React skeleton loader for Next.js and Tailwind CSS: placeholder blocks while content loads, with a calm sheen that sweeps every skeleton in step. | `npx shadcn@latest add https://ui.fewtone.com/r/skeleton.json` |
| slider | registry:ui | An accessible React slider for Next.js and Tailwind: one value or a range, with a thumb that grows into a pill showing its value as you reach for it. | `npx shadcn@latest add https://ui.fewtone.com/r/slider.json` |
| spinner | registry:ui | An accessible React spinner for Next.js and Tailwind CSS: one line going round an infinity that fills it once the task is done. | `npx shadcn@latest add https://ui.fewtone.com/r/spinner.json` |
| stepper | registry:ui | An accessible React stepper for Next.js and Tailwind CSS: the steps of a checkout or setup, with a line that fills as you advance and checks that draw in. | `npx shadcn@latest add https://ui.fewtone.com/r/stepper.json` |
| switch | registry:ui | An accessible React switch for on/off settings, with a spring-animated thumb, built on Radix Switch. | `npx shadcn@latest add https://ui.fewtone.com/r/switch.json` |
| switcher | registry:ui | An accessible React segmented control for Next.js: one choice from a few options, with a pill that slides to the one you pick. | `npx shadcn@latest add https://ui.fewtone.com/r/switcher.json` |
| table | registry:ui | An accessible React table for Next.js and Tailwind CSS: rows and columns with sortable headers, selectable rows and rows that glide when sorted. | `npx shadcn@latest add https://ui.fewtone.com/r/table.json` |
| tabs | registry:ui | Accessible React tabs for Next.js, with an underline or pill that slides to the active tab and panels that glide in, built on Radix Tabs. | `npx shadcn@latest add https://ui.fewtone.com/r/tabs.json` |
| text-effects | registry:ui | Accessible React text effects for Next.js and Tailwind CSS: a shimmer, a word-by-word reveal and a typewriter, all real text and off with reduced motion. | `npx shadcn@latest add https://ui.fewtone.com/r/text-effects.json` |
| textarea | registry:ui | An accessible React textarea for Next.js that grows smoothly with its content, with min and max rows, styled like Input with Tailwind CSS. | `npx shadcn@latest add https://ui.fewtone.com/r/textarea.json` |
| theme-toggle | registry:ui | An accessible React dark mode toggle for Next.js that reveals the new theme from the button with a View Transition: a circle, ink, a wave or a page turn. | `npx shadcn@latest add https://ui.fewtone.com/r/theme-toggle.json` |
| toast | registry:ui | An accessible React toast for Next.js: notifications that slide in, stack like a deck and swipe away, with a toast() function and Radix Toast parts. | `npx shadcn@latest add https://ui.fewtone.com/r/toast.json` |
| toggle-group | registry:ui | An accessible React toggle group for Next.js: buttons you switch on and off independently, like Bold, Italic and Underline in a toolbar. | `npx shadcn@latest add https://ui.fewtone.com/r/toggle-group.json` |
| tooltip | registry:ui | An accessible React tooltip for Next.js and Tailwind CSS: a short hint on hover and keyboard focus, fast across a toolbar, built on Radix Tooltip. | `npx shadcn@latest add https://ui.fewtone.com/r/tooltip.json` |

## For AI agents

```text
You are adding components from @fewtone to a shadcn-compatible project.
1. Read this file (https://sh4dcn.netlify.app/md/fewtone.md) for the component list.
2. Fetch the machine-readable index: https://ui.fewtone.com/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.netlify.app/json (library slug: fewtone).
```