bash-ui
ComponentsDesign systemsHow to use
Getting started
IntroductionHow to use
Design systemsSee all →
The MeridianFrontierUnderstatedCuratedStudioNeutralPlayground
ButtonsSee all →
Social link buttonsKey login buttonSend buttonArrow buttonVideo buttonApp store badgeTonal buttonLoading buttonCTA buttonInbox buttonDelete button
Top navbars & navigationSee all →
Radial navigationExpanding menuGooey tabsCount tabsApp sidebar
InputsSee all →
Sort-by headingDissolve inputSearchable selectCheckboxLock toggleNotification toggleGooey inputSearch barRange sliderDate range calendar
ChartsSee all →
GitHub activity chartRevenue bar chartDonut chartMoney flow chartIncome vs spending chartFunnel chartMetric cardPipeline chartBreakdown dialAI cost cardStick progress bar
Data displaySee all →
Tech stack logosWallet cardScore gauge
Images & mediaSee all →
Doodle portraitImage collageQR codeSaved board
Text & typeSee all →
Scramble text
ListsSee all →
Ranking tableTo-do listFAQ accordionSwipe cards
FeedbackSee all →
Feedback cardFeedback sheet
Menus & overlaysSee all →
Link previewInfo tooltipAccount menu

Inputs

Fields, toggles, sliders and pickers.

Sort-by heading
Dissolve input
Searchable select
Checkbox
Lock toggle
Notification toggle
Gooey input
Search bar
Range slider
Date range calendar

Playground

Component
Design system
Placeholder
Input type
Mask particles
Disabled
import { DissolveInput } from "@/components/ui/dissolve-input";

<DissolveInput
  placeholder="Type and press Enter…"
  type="text"
  value={value}
  onChange={setValue}
/>

Top landlords by

I want to learn aboutCharitiesCharities
Minimum
£25k
Maximum
£1m