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
Search prompt
Disabled
Allow a custom choice
import { SearchableSelect } from "@/components/ui/searchable-select";

<SearchableSelect
  placeholder="Choose a client"
  searchPlaceholder="Search clients…"
  id="client"
  value={value}
  onChange={setValue}
  groups={groups}
/>

Top landlords by

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