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
Sentence
Starting measure
Starting direction
import { SortByHeading } from "@/components/sort-by-heading";

<SortByHeading
  prefix="Top landlords by"
  defaultValue="fee"
  defaultDirection="desc"
  options={options}
  onValueChange={setSort}
  onDirectionChange={setDirection}
/>

Top landlords by

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

Top landlords by