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
Tone
Size
Lock icons
Starts on
Disabled
Click sound
import { LockToggle } from "@/components/ui/lock-toggle";

<LockToggle
  tone="stop"
  size="md"
  showIcons
  haptic="none"
  aria-label="Trustee names protection"
  onCheckedChange={setProtected}
/>

Top landlords by

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