# bash-ui > Bashir's design systems and components, as a shadcn registry. Every component is written against one token contract, so it renders in any of the design systems below. ## How to use this 1. Pick a design system below, or ask the person which project's look they want. 2. Install the theme: `npx shadcn@latest add @bash/theme-`, then load its fonts with next/font. 3. Install components as needed: `npx shadcn@latest add @bash/`. 4. Follow the system's rules when composing new screens. Use only contract tokens (below) for colour, never hex or Tailwind palette colours. If the CLI says "@bash" is an unknown registry (a shadcn version from before the registry index), add this to components.json and run it again: ```json "registries": { "@bash": "https://bash-ui-registry.vercel.app/r/{name}.json" } ``` Every item's JSON (source included) is at https://bash-ui-registry.vercel.app/r/.json; the full list is https://bash-ui-registry.vercel.app/r/registry.json. ## Design systems ### The Meridian (180Connect) — `@bash/theme-180connect` A contemporary take on professional services, retaining clarity and credibility while making room for character, expression, and a little more ambition. Fonts: body Lato, headings Geist, mono Geist Mono. Radius: panel 10px, inset 6px. Rules: - **The card is a border, not a shadow.** border border-rule bg-card rounded-panel. Shadows are only for things that float: popovers, dialogs, menus. - **10px reads as a document.** rounded-panel (10px) for cards, rounded-inset (6px) for controls and chips inside them. Never rounded-2xl. - **Insets are paper, not another white card.** Recessed content sits on bg-paper with rounded-inset. A border inside a border is noise. - **Three inks, by meaning.** ink is content, dim is context about content, faint is furniture. Never set text with opacity. - **The accent says where you are; states say what is true.** lead appears in four places only: active tab, links, focus ring, register keys. Buttons are ink. go / hold / stop each carry a dot as well as a colour. - **Uppercase is for codes only.** Mono, 10.5px, tracked, faint — for things that really are codes (UK CHARITY, PRIORITY). Never a heading style. - **Content arrives in reading order.** Blur-up entrances, staggered by section, never all at once. Reduced motion is honoured everywhere. Page: https://bash-ui-registry.vercel.app/systems/180connect ### Frontier (Ledge) — `@bash/theme-ledge` An overdue departure from the expected, where expressive design and thoughtful restraint come together to make innovation feel natural, credible, and assured. Fonts: body Lora, headings Instrument Serif, mono System monospace. Radius: panel 16px, inset 10px. Rules: - **Two serifs, two jobs.** Instrument Serif (400) gives headings and key financial figures their editorial character. Lora carries body text, labels and controls. Use tabular numerals for aligned amounts; monospace is a registry fallback for code, not the app's financial typeface. - **Use the current cool app surface.** Near-white ground, white cards, cool blue-grey insets and slate ink. The landlord, tenant and admin apps all use ledge-cool. Its 16px panels and 10px inputs supersede the older 4px base styles. - **Hairlines first, shadows lightly.** Cards use border-rule with rounded-panel and generous padding. A very faint shadow can lift an interactive card; stronger shadows belong to floating dialogs and menus. Use paper for recessed content. - **Green actions are pills.** Primary actions use bg-primary text-primary-foreground and rounded-full; hover deepens the green. Secondary actions are outlined pills. Reserve rounded-inset for inputs and inner surfaces. Links, selected dates and the brand's terminal dot use lead. - **Labels whisper; headings read naturally.** Small section eyebrows and field labels may be uppercase with 0.08–0.25em tracking. Headings stay in sentence case with tight leading. Use dim for explanatory copy and faint for quiet labels and furniture. - **Financial colour has a meaning.** Green marks collected or paid, gold marks pending or outstanding, and red marks overdue or failed. Pair each colour with a label. Charts distinguish landlord funds in emerald, Ledge revenue in gold and processing fees in clay; avoid decorative rainbow series. - **Leave room to read.** Use a centred reading column (48rem tenant, 56rem landlord, 64rem admin), roughly 24px side gutters and 48px main vertical padding. Separate sections generously; group related ledger rows with fine dividers. Subtle ruled lines and dotted leaders are optional ledger details. - **Motion follows the ledger.** Sections rise and fade in reading order; chart bars grow from their baseline and arcs draw on. Keep hover changes near 200ms and entrances around 700–900ms. Honour reduced motion with useReducedMotionConfig() when implementing registry components. - **Dark mode is a bash-ui adaptation.** Ledge's app supplies the light palette only. This entry derives dark slate surfaces, pale ink, lifted green actions and brighter state colours for the gallery's dark mode. Additional contract colours and ranked chart ramps are palette extensions rather than original Ledge tokens. Page: https://bash-ui-registry.vercel.app/systems/ledge ### Understated (Portfolio) — `@bash/theme-portfolio` Minimal by intention, expressive by nature. Considered typography, generous white space, and subtle artistic details create a distinctive visual identity that lets the work speak for itself. Fonts: body Open Runde, headings Viaoda Libre, mono System monospace. Radius: panel 18px, inset 10px. Rules: - **Expressive headings, rounded copy.** Use Viaoda Libre for the introductory statement and section headings, and Open Runde for paragraphs, metadata, project captions and controls. The original Viaoda font ships at 400; keep its distinctive silhouette rather than substituting a generic serif. Geist is the source's default UI fallback; monospace is a registry fallback for technical content. - **Let the work carry the colour.** Keep the page white, main copy black and supporting information zinc grey. Primary actions and navigation are monochrome. Project imagery, technology marks and the GitHub activity chart supply colour; do not invent a saturated structural accent. - **Space is the main separator.** Use broad gutters (8% on small screens, 18% on desktop), generous section gaps and alternating image-and-text rows. Centre the introduction on mobile and align it to the left on desktop. Most text sections sit directly on the page rather than inside cards. - **Rounded frames, circular actions.** The source's base radius is 10px. Project media uses rounded-2xl, which resolves to 18px through its radius scale; use rounded-panel for those frames and rounded-inset (10px) for controls. Navigation, collaboration buttons and arrow badges use fully rounded pills or circles. - **A warm wash is an occasional material.** Certification panels use a pale warm wash with irregular, layered watercolour edges. Use paper for this warmth and keep the main page neutral. Hand-drawn marks, small image rotations and tiny raised icon tiles are accents, not a treatment for every surface. - **Hierarchy comes from type and tone.** Keep headings in sentence case. Use black for names and emphasis, dim for supporting descriptions and faint for incidental furniture. Introductory text grows from roughly 14px to 20px; major headings reach roughly 48px. Use italics sparingly for roles and qualifications. - **Motion lives in the controls.** Calls to action slide their circular arrow across the pill over about 500ms. Navigation expands with damped springs; small tooltips fade around 200ms. When extracting components later, use motion/react and honour useReducedMotionConfig(); the source's motion does not consistently provide reduced-motion handling. - **Distinguish source tokens from extensions.** The source defines neutral light and dark UI tokens, but its portfolio sections keep fixed white backgrounds and black text. This entry applies those dark tokens consistently for the gallery and derives a dark warm inset. Positive, waiting, financial and frosted-menu slots extend the contract; they are not evidence of additional Portfolio components or an original financial palette. Page: https://bash-ui-registry.vercel.app/systems/portfolio ### Curated (Steeze) — `@bash/theme-steeze` A refined visual identity that feels elevated without feeling exclusive. Thoughtful design gives it a distinctive presence while keeping it welcoming and approachable. Fonts: body DM Sans, headings Playfair Display, mono Orbitron, interface Outfit. Radius: panel 12px, inset 8px. Rules: - **Playfair speaks, DM Sans explains.** Playfair Display is the page's root face: wordmark, headings, navigation and button labels. DM Sans carries paragraphs, answers, form copy and the footer. Section headings request weight 300, which renders as Playfair's lightest available weight (400); the hero uses 500 and small card titles 600 in uppercase. Body copy often sits at DM Sans 300 with 1.5–1.6 line height. - **Charcoal and cream, nothing else neutral.** The ground is #222222 and the ink is #f1efe0; light mode swaps them, as the landing's cream sections do. Derive every other neutral from those two at reduced strength: borders at 10–15%, quiet fills at 2–5%, supporting text at 60–70%. Never use pure white text or a grey from another scale. - **Tight serifs, spaced labels.** Large headings pull in tracking (about −1 to −2px at 32–64px) with 1.1–1.2 leading and stay in sentence case. Italicise one phrase for emphasis, as in "Join the culture". Small eyebrows, numbering (01, 02…) and footer captions go uppercase with +0.05em to 1px tracking. - **Actions are pills.** Primary calls to action are rounded-full pills in Playfair: cream fill with charcoal label, or a cream outline in the navigation. On hover, a small dot expands to fill the pill and the label gives way to an up-right arrow over about 300ms. Inputs and inner controls use rounded-inset (8px), cards rounded-panel (12px) and full-screen dialogs about 16px. - **Hairlines, not boxes.** Cards barely lift from the ground: a near-invisible fill with a border-rule hairline. Lists and accordions separate items with bottom borders only. Reserve deep, soft black shadows for floating media such as phone mock-ups; do not add decorative shadows to cards. - **Lilac is a glow, used sparingly.** Lead is the lilac from the page glow and the app's on-switches, spinners and default-address badges. Use it for links, focus, selection and small marks, never for large fills or body text. Primary buttons stay cream on charcoal (or charcoal on cream). In light mode, lead deepens so it reads as text on cream. - **Status in soft pastels.** Steeze's internal dashboards mark good in mint, warning in gold and bad in rose, and rank in gold, silver and bronze. Pair each with a label. On charcoal the pastels are used as-is; on cream this entry deepens them so they pass as text. - **Slow, confident motion.** Entrances rise 20–50px and fade over 0.8–1s on cubic-bezier(0.22, 1, 0.36, 1), staggered 0.1–0.2s. The hero's slide uses 2.8s on cubic-bezier(0.19, 1, 0.22, 1). Hover changes take about 300ms, card washes about 500ms. Honour reduced motion with useReducedMotionConfig(). - **Outfit belongs to the tools.** The admin dashboard uses Outfit (variable, 100–900) for everything; it is the interface font here (font-interface). Use it for dense screens such as tables, dashboards and the app's earnings figures. Customer-facing copy stays Playfair and DM Sans. The admin's own colours are not part of this system, and nor is the app's Montserrat. - **Orbitron is for card numbers.** The app sets payment-card digits in Orbitron with wide tracking; it is the mono face here (font-mono). Keep it to short technical strings such as card numbers and codes, never paragraphs or labels. - **Two quiet button fills.** Beside a primary action, the app uses two filled buttons with rounded-inset corners and DM Sans semibold labels: tonal, a blue-slate (#323743) with off-white text, for things like Earnings; and secondary, a mid grey (#5E5E5E) with white text, for things like Edit Profile. Both hold their colour in light and dark. Page: https://bash-ui-registry.vercel.app/systems/steeze ### Studio (bash-ui) — `@bash/theme-studio` A composed frame for expressive detail. Layered dark surfaces, softly lit controls and quiet typography create depth while giving colour, shape and movement room to be noticed. Fonts: body Inter, headings Inter, mono Roboto Mono. Radius: panel 16px, inset 12px. Rules: - **Surfaces, not borders.** A panel is a step lighter than what it sits on, at 16px. No outline. Depth comes from the surface, not from a line around it. - **Raised means lit from above.** A selected or pressable chip gets a white 6–8% fill, a one-pixel inset highlight on its top edge and a tight drop shadow. Never a border. - **Everything you press is a pill.** Nav, tabs, actions and arrows are fully rounded, 30–36px tall, 13px medium text. Square corners are for content, round ones for controls. - **Two greys of text.** Near-white for what you read, a mid grey (#979797) for everything else. Labels are 11px and quiet, never uppercase. - **One blue, rarely.** The accent is a single blue, used for links, focus and the one call to action. Everything else is greyscale. Page: https://bash-ui-registry.vercel.app/systems/studio ### Neutral (bash-ui) — `@bash/theme-neutral` A clear, adaptable foundation. Balanced greys, straightforward typography and a measured indigo accent give proportion, hierarchy and interaction space to speak for themselves. Fonts: body Geist, headings Geist, mono Geist Mono. Radius: panel 12px, inset 8px. Rules: - **Nothing to prove.** No brand, no warmth. Every component should still read clearly here; if it does not, it is depending on a colour it never asked for. Page: https://bash-ui-registry.vercel.app/systems/neutral ## Token contract Utilities are `bg-`, `text-`, `border-`, plus `rounded-panel`, `rounded-inset`, `font-body`, `font-heading`, `font-mono`. - `ground` (surface): The page behind the cards. - `background` (surface): shadcn's page colour; the body when no ground is set. - `card` (surface): A card sitting on the ground. - `popover` (surface): Anything that floats: popovers, menus, dialogs. - `paper` (surface): A recessed inset inside a card: hints, notes, chips. - `paper-sunk` (surface): One step deeper than paper; neutral pills and tracks. - `muted` (surface): shadcn's quiet fill; hover rows, disabled fills. - `secondary` (surface): shadcn's secondary button fill. - `switch-track-off` (surface): An off switch's neutral track. - `switch-track-on` (accent): An on switch's selected track. - `switch-thumb-off` (surface): A switch's knob when off. - `switch-thumb-on` (surface): A switch's knob when on. - `rule` (line): A card's own edge. The strongest line on a card. - `rule-soft` (line): Dividers inside a card. - `border` (line): shadcn's default border. - `input` (line): Form control borders. - `ring` (line): Keyboard focus ring. - `ink` (ink): Content: headings, values, primary buttons. - `foreground` (ink): Body text. - `dim` (ink): Context about content: hints, metadata. - `faint` (ink): Furniture: icons, separators, keys. - `muted-foreground` (ink): shadcn's quiet text. - `card-foreground` (ink): Text on a card. - `popover-foreground` (ink): Text on a popover. - `secondary-foreground` (ink): Text on a secondary fill. - `on-solid` (ink): Text and icons on a solid ink, lead or state fill. - `lead` (accent): The one structural accent: active tab, links, focus, keys. - `lead-mid` (accent): Lead on hover. - `lead-wash` (accent): A pale lead fill behind selected things. - `primary` (accent): shadcn's primary fill. - `primary-foreground` (accent): Text on primary. - `accent` (accent): shadcn's hover/selection fill in menus and lists. - `accent-foreground` (accent): Text on accent. - `go` (state): Good, done, healthy. Usable as text. - `go-wash` (state): Fill behind a go state. - `hold` (state): Waiting, caution. Usable as text. - `hold-wash` (state): Fill behind a hold state. - `stop` (state): Bad, blocked, deficit. Usable as text. - `stop-wash` (state): Fill behind a stop state. - `destructive` (state): shadcn's destructive action colour. - `ramp-orange` (ramp): Between stop and the milestone on a ramp. - `milestone-yellow` (ramp): The midpoint of a ramp. - `go-pale` (ramp): Between the milestone and go. - `slider-handle` (ramp): A slider knob. Constant in both modes. - `activity-0` (ramp): No activity on a contribution calendar. - `activity-1` (ramp): Low activity on a contribution calendar. - `activity-2` (ramp): Moderate activity on a contribution calendar. - `activity-3` (ramp): High activity on a contribution calendar. - `activity-4` (ramp): Peak activity on a contribution calendar. - `brand` (brand): The brand colour. Logos and marks, rarely text. - `brand-hover` (brand): Brand on hover. - `lime` (brand): A pale highlight fill that holds its value in both modes. - `lime-hover` (brand): Lime on hover. - `on-lime` (brand): Text on lime. Constant in both modes. - `tonal` (surface): A quiet tinted fill for a secondary action that should still read as a button. - `on-tonal` (ink): Text and icons on a tonal fill. - `media-fill` (surface): A dark fill behind footage, and the scrim over it. Constant in both modes. - `on-media` (ink): Text over media-fill and footage. Constant in both modes. - `media-rest-fill` (surface): A media button's fill before footage is revealed. - `media-rest-ink` (ink): A media button's label before footage is revealed. - `scramble-strike` (ink): The struck decoy word and its line in a scramble reveal. - `ff-plate` (ramp): Financial flow plate. - `ff-plate-edge` (ramp): Financial flow plate edge. - `ff-ink` (ramp): Financial flow ink. - `ff-dim` (ramp): Financial flow dim. - `ff-faint` (ramp): Financial flow faint. - `ff-rule` (ramp): Financial flow rule. - `ff-residual` (ramp): Financial flow residual. - `ff-in-0` (ramp): Financial flow income shade 0, darkest rank first. - `ff-in-1` (ramp): Financial flow income shade 1, darkest rank first. - `ff-in-2` (ramp): Financial flow income shade 2, darkest rank first. - `ff-in-3` (ramp): Financial flow income shade 3, darkest rank first. - `ff-in-4` (ramp): Financial flow income shade 4, darkest rank first. - `ff-in-5` (ramp): Financial flow income shade 5, darkest rank first. - `ff-out-0` (ramp): Financial flow spending shade 0, darkest rank first. - `ff-out-1` (ramp): Financial flow spending shade 1, darkest rank first. - `ff-out-2` (ramp): Financial flow spending shade 2, darkest rank first. - `ff-out-3` (ramp): Financial flow spending shade 3, darkest rank first. - `ff-out-4` (ramp): Financial flow spending shade 4, darkest rank first. - `ff-out-5` (ramp): Financial flow spending shade 5, darkest rank first. - `collection-landlord` (ramp): Money paid to landlords. - `collection-platform` (ramp): Platform revenue retained after processing costs. - `collection-processing` (ramp): Payment processing fees. - `menu-surface` (surface): Translucent expanding navigation surface. - `menu-ink` (ink): Primary text on the expanding menu. - `menu-dim` (ink): Quiet links on the expanding menu. - `menu-rule` (line): Hairlines on the expanding menu. - `menu-sheen` (surface): Frosted highlight on the expanding menu. - `menu-symbol` (ink): Plus and minus marks on the frosted navigation. - `menu-shadow` (surface): Shadow under the frosted navigation. - `menu-sheen-mid` (surface): Middle stop of the navigation frosted highlight. - `menu-footer-rule` (line): Footer divider on the frosted navigation. ## Components ### Radial navigation — `@bash/radial-nav` (navigation) Portfolio’s original radial navigation: selected-only expanding labels, a shortest-path spring pointer, and ring and pointer emphasis during rotation. When to use: Use for compact section navigation. Choose inline or collapsible presentation; handle navigation and scroll tracking through activeId and onActiveChange in the consuming page. Props: - `items: RadialNavItem[]` — Item IDs, labels, Lucide icons and optional angles. - `size: number` — Diameter of the navigation ring. - `buttonSize: number` — Diameter of a collapsed item. - `menuButtonConfig: MenuButtonConfig` — Original icon size, button size and padding configuration. - `activeId: number | null` — Controlled selection. - `defaultActiveId: number` — Initial uncontrolled selection. - `onActiveChange: (id: number) => void` — Selection callback; navigate or scroll in the consumer. - `collapsible: boolean` — Start with an opening button instead of the expanded ring. - `label: string` — Accessible navigation label. Install: `npx shadcn@latest add @bash/radial-nav` · Page: https://bash-ui-registry.vercel.app/components/radial-nav ### Social link buttons — `@bash/social-links` (buttons) Watercolour GitHub and LinkedIn buttons with transparent artwork, generous spacing, accessible labels and configurable link targets. When to use: Use when custom image artwork is the social link itself. Supply your own artwork URLs and destinations. Props: - `links: SocialLink[]` — Artwork URL, accessible label and destination for each link; optional sizeScale adjusts an individual image’s visual size. - `size: number` — Artwork height in pixels. - `gap: number` — Space between links in pixels. - `showLabels: boolean` — Show the link names below the artwork. - `newWindow: boolean` — Open links in a new tab, default true. Install: `npx shadcn@latest add @bash/social-links` · Page: https://bash-ui-registry.vercel.app/components/social-links ### Doodle portrait — `@bash/doodle-portrait` (media) A portrait framed by the original animated doodle in the top left and its rotated copy in the bottom right. When to use: Use for a personal introduction. Supply a portrait and decorative artwork; include a static doodle frame for reduced motion. Props: - `src: string` — Portrait URL. - `alt: string` — Description of the portrait. - `doodleSrc: string` — Decorative image or animation URL. - `doodleStillSrc: string` — Static decoration used for reduced motion; omitted decorations are hidden in that mode. - `width / height: number` — Portrait proportions and maximum size. - `doodleSize: number` — Decoration size relative to the portrait. - `showDoodles: boolean` — Show or hide both decorations. Install: `npx shadcn@latest add @bash/doodle-portrait` · Page: https://bash-ui-registry.vercel.app/components/doodle-portrait ### GitHub activity chart — `@bash/github-activity-chart` (charts) A watercolour contribution calendar with painted cells, subtle splatters, day inspection and a five-level activity legend. When to use: Use for dated activity counts. Supply contribution data from any source; this component performs no requests. The preview uses deterministic example data, not a live GitHub account. Props: - `data: ContributionDay[]` — ISO calendar dates, contribution counts and intensity levels 0–4. - `label: string` — Caption following the optional total. - `watercolor: boolean` — Enable painted cells and splatters. - `showTotal: boolean` — Show the contribution total. - `showLegend: boolean` — Show the five-level legend. - `onDaySelect: (day: ContributionDay) => void` — Called when a day is activated. Install: `npx shadcn@latest add @bash/github-activity-chart` · Page: https://bash-ui-registry.vercel.app/components/github-activity-chart ### Tech stack logos — `@bash/tech-stack` (data-display) A tilted, overlapping stack of technology logos that fans out on hover or focus and shows each logo’s label in a tooltip. When to use: Use beside project descriptions to list technologies. Logos and text are props; hover, keyboard focus and touch reveal the details. Props: - `items: TechStackItem[]` — Logo URLs, labels, subtitles, optional rotation and fit. - `size: number` — Tile size in pixels. - `overlap: number` — Overlap before expansion. - `expandedGap: number` — Gap after expansion. - `expandOnView: boolean` — Also fan out on mobile when the strip enters the reading area. Install: `npx shadcn@latest add @bash/tech-stack` · Page: https://bash-ui-registry.vercel.app/components/tech-stack ### Image collage — `@bash/image-collage` (media) A responsive image collage with proportionate widths, aligned image heights and captions. Every row fills the available width. When to use: Use to show school, employer or project images upright without decorative framing. Images share a height within each row, and a final single image fills the row. Supply aspect ratios for stable layout before loading, plus optional captions and descriptions. Props: - `images: CollageImage[]` — Images, alt text, optional captions, descriptions, destinations and aspect ratios. - `columns: number` — Images per row on wider screens, from one to four. Widths follow each image’s proportions; mobile stacks vertically. - `gap: number` — Space between images in pixels. - `showCaptions: boolean` — Show image captions. Install: `npx shadcn@latest add @bash/image-collage` · Page: https://bash-ui-registry.vercel.app/components/image-collage ### QR code — `@bash/qr-code` (media) Steeze's QR code artwork with no background of its own: cream modules in dark mode, inverted to dark modules in light mode. When to use: Use to hand a link from a desktop screen to a phone, such as an app download or a sign-up page. Pass your own code artwork as light modules on a transparent ground, leave the page around it clear, and keep it above about 120px so it scans. Props: - `src: string` — The QR code artwork, drawn for dark mode: light modules on a transparent ground. - `alt: string` — What scanning it does, e.g. "Scan to download the Steeze app". - `size: number` — Width and height in pixels. Defaults to 224. - `invertOnLight: boolean` — Invert the artwork in light mode so it reads dark on a light page. Defaults to true. - `...img props: ImgHTMLAttributes` — className, loading and the rest. Install: `npx shadcn@latest add @bash/qr-code` · Page: https://bash-ui-registry.vercel.app/components/qr-code ### Saved board — `@bash/saved-board` (media) A saved-items board as a frosted pocket: up to five covers fan out of the top and bob gently on their own beats, with the board's name, owner and item count on the glass. When to use: Use for collections people make and share, such as boards, wishlists or lookbooks, in a carousel or grid where the covers should do the talking. Not for a single product; use an ordinary product card for that. Props: - `title: string` — The board's name, printed on the glass in the heading face. - `images: (string | { src: string; alt?: string })[]` — Cover images; the first five fan out (one to five each have their own arrangement). None shows a bookmark placeholder. - `itemCount: number` — Items on the board. Defaults to the number of images. - `views: number` — Optional view count, shown after the item count. - `owner: { name: string; avatarSrc?: string }` — Optional maker: an 18px avatar (or initial) and name. - `size: number` — Card width in pixels; height is 1.15 times it. Defaults to 228, the app's 58% of a phone width. - `href: string` — Renders the card as a link. - `onClick: MouseEventHandler` — Renders the card as a button when there is no href. Install: `npx shadcn@latest add @bash/saved-board` · Page: https://bash-ui-registry.vercel.app/components/saved-board ### Link preview — `@bash/link-preview` (overlays) A text trigger reveals a screenshot of the destination webpage on hover, keyboard focus or tap. The screenshot fills the card; its address rises in on a frosted chip once the pointer is on it. When to use: Use for portfolios, references and policy summaries where readers benefit from context before navigating. Supply a screenshot of the page; this component does not capture websites or fetch metadata. Keep essential information available on the destination page. Props: - `trigger: ReactElement` — Optional existing logo button or link used as the trigger. - `isCurrentSite: boolean` — Shows an already-on-this-website message when tapped instead of navigating. - `children: ReactNode` — Text shown in the preview trigger. - `href: string` — HTTP(S) or root-relative destination, opened from the card. - `title: string` — Accessible name for the screenshot and link; shown on the chip when href has no hostname. - `imageSrc: string` — Required screenshot image URL for the destination webpage. - `side: "top" | "right" | "bottom" | "left"` — Preferred position; adjusts to fit the viewport. Install: `npx shadcn@latest add @bash/link-preview` · Page: https://bash-ui-registry.vercel.app/components/link-preview ### Ranking table — `@bash/ranking-table` (lists) A landlord ranking with a sentence-style measure picker, direction toggle, sortable columns and mobile cards. When to use: Use for comparing landlord collections and platform fees. Sorting stays local to the supplied rows, with optional row destinations supplied by the caller. Props: - `rows: LandlordRow[]` — Names, optional hrefs, collected rent, platform fees and payment counts; money is integer kobo. - `prefix: string` — Heading before the measure picker. - `defaultSort: "fee" | "gmv" | "avg" | "payments"` — Initial ranking measure. - `defaultDirection: "desc" | "asc"` — Initial sort direction. - `limit: number` — Maximum visible rows, defaults to ten. Install: `npx shadcn@latest add @bash/ranking-table` · Page: https://bash-ui-registry.vercel.app/components/ranking-table ### Revenue bar chart — `@bash/revenue-bar-chart` (charts) Monthly stacked revenue bars split between platform net and processing fees, with a toggle to include landlord payments. When to use: Use to inspect platform revenue over time. The landlord toggle rescales to gross collections; each amount is integer kobo. Props: - `data: MonthPoint[]` — Month date, grossKobo, platformFeeKobo and paystackKobo. - `title: string` — Section heading. - `defaultShowLandlords: boolean` — Include landlord payments initially; the legend toggles them afterwards. - `animated: boolean` — Animate bars on entering view; honours reduced motion. Install: `npx shadcn@latest add @bash/revenue-bar-chart` · Page: https://bash-ui-registry.vercel.app/components/revenue-bar-chart ### Donut chart — `@bash/donut-chart` (charts) Ledge’s collection doughnut paired with exact amounts and percentages on the right, plus linked slice and legend highlights. When to use: Use to show how collected money is divided. Pass integer kobo and ensure landlord net + platform retained + processing fees equals gross. Props: - `grossKobo / landlordNetKobo / ledgeKobo / paystackKobo: number` — Gross and its three non-overlapping allocations, in integer kobo. - `title: string` — Section heading. - `platformLabel / processingLabel: string` — Labels for the two fee allocations. - `animated: boolean` — Draw the ring on mount; honours reduced motion. Install: `npx shadcn@latest add @bash/donut-chart` · Page: https://bash-ui-registry.vercel.app/components/donut-chart ### Sort-by heading — `@bash/sort-by-heading` (inputs) An editorial heading that reads “Top landlords by [platform fee]”, followed by a direction toggle. When to use: Use when the ranking criterion belongs in the heading. A custom dropdown preserves the sentence-like appearance, with keyboard selection, a checked item, Escape and click-away dismissal. Props: - `prefix: string` — Words before the criterion. - `options: readonly SortChoice[]` — Available ranking measures. - `value / defaultValue: string` — Controlled or initial measure. - `onValueChange: (value: string) => void` — Reports a new measure. - `direction / defaultDirection: "asc" | "desc"` — Controlled or initial direction. - `onDirectionChange: (direction) => void` — Reports a changed direction. Install: `npx shadcn@latest add @bash/sort-by-heading` · Page: https://bash-ui-registry.vercel.app/components/sort-by-heading ### Expanding menu — `@bash/expanding-menu` (navigation) Ledge’s frosted navigation pill expands into a staggered link panel; the plus becomes a minus. When to use: Use for compact shared navigation. Preserves Ledge’s 148×56 pill, 300px panel, fixed 28px corners, frosted layers, spring timing and staggered links; supports a footer slot. Props: - `items: MenuItem[]` — Link labels and destinations. - `label: string` — Collapsed label; the open label is Close, as in Ledge. - `align: "left" | "right"` — Edge anchored during the morph. - `footer: ReactNode` — Optional content below the links. - `onNavigate: (item, event) => void` — Navigation callback; preventDefault for client-side routing. Install: `npx shadcn@latest add @bash/expanding-menu` · Page: https://bash-ui-registry.vercel.app/components/expanding-menu ### Dissolve input — `@bash/dissolve-input` (inputs) Ledge’s underlined login input, whose text dissolves into particles from right to left with a visible action button, on Enter or after a confirmed action. When to use: Use for a single-value submission or a success transition. Enter previews the effect; in a login form set dissipateOnEnter={false} and call ref.dissipate() only after authentication succeeds. Completion clears the controlled value, allowing another attempt. Props: - `submitLabel: string` — Accessible name for the icon-only Enter action; defaults to Submit. Hidden when dissipateOnEnter is false. - `value: string` — Controlled input value. - `onChange: (value: string) => void` — Reports edits and clears the value on completion. - `onSubmit: (value: string) => void | boolean | Promise` — Called on Enter. Return false to keep the text and skip the effect. - `dissipateOnEnter: boolean` — Defaults to true. Disable for parent-controlled form submission. - `onDissipated: () => void` — Called when the animation completes. - `mask: boolean` — Use bullets for the particles; password inputs always mask. - `ref: Ref` — Exposes dissipate(), focus() and getValue() for confirmed actions and autofill. - `type / placeholder / disabled: Native input props` — Email, password or text behaviour, prompt and disabled state. Install: `npx shadcn@latest add @bash/dissolve-input` · Page: https://bash-ui-registry.vercel.app/components/dissolve-input ### Key login button — `@bash/key-login-button` (buttons) Ledge’s green pill login button with a rotating key and rolling label on hover or keyboard focus. When to use: Use as an entry action or login link. Supply href for navigation, or onClick / type="submit" for an action. Props: - `label: string` — Button text, default Log in. - `href: string` — Renders a link when supplied. - `onClick: MouseEventHandler` — Action callback. - `disabled: boolean` — Prevents interaction. - `fullWidth: boolean` — Fills the available width. - `type: "button" | "submit" | "reset"` — Native button type, default button. Install: `npx shadcn@latest add @bash/key-login-button` · Page: https://bash-ui-registry.vercel.app/components/key-login-button ### Money flow chart — `@bash/money-flow-chart` (charts) Income ribbons converge on a pooled fund and flow out to spending, with year selection, hover tracing and pinned bands. When to use: Use for balanced money flows through a shared pot. Each side must sum to total; include a surplus or reserves band to balance the year. It does not claim which source funded which activity. Props: - `flows: FundFlow[]` — Balanced years with uniquely identified inflows and outflows, a shared total, and optional included amounts. - `animated: boolean` — Replay the pour animation when changing years; honours reduced motion. - `showDetails: boolean` — Show included amounts below the chart. Install: `npx shadcn@latest add @bash/money-flow-chart` · Page: https://bash-ui-registry.vercel.app/components/money-flow-chart ### Income vs spending chart — `@bash/income-spending-chart` (charts) A financial history chart with a smooth trend strip, paired segmented bars, signed net results and year tooltips. When to use: Use to compare income and spending across filed years. Missing amounts remain distinct from zero; net results have a separate scale. Props: - `years: FinancialYear[]` — Ordered years: label, periodEnd, income, expenditure and net. Amounts may be null when unknown. - `showOverview: boolean` — Show the Income / Net result trend strip. - `animated: boolean` — Animate segmented bars on entering view; honours reduced motion. Install: `npx shadcn@latest add @bash/income-spending-chart` · Page: https://bash-ui-registry.vercel.app/components/income-spending-chart ### Funnel chart — `@bash/funnel-chart` (charts) Pipeline stage totals above a pale curved funnel, with vertical guides and percentage pills. When to use: Use to show how a starting population progresses through ordered stages. Percentages on the ribbon compare with the first stage; summary percentages compare with the previous stage. Props: - `data: readonly FunnelStage[]` — Stages with label, value and optional caption. - `selectedIndex: number` — Highlighted stage; defaults to the first. - `onStageChange: (index: number) => void` — Makes stage summaries selectable. Omit for a read-only report. - `showPercentage: boolean` — Show share-of-first percentage pills. - `edges: "curved" | "straight"` — Shape of the transitions between stages. - `footer: ReactNode` — Optional breakdown caption or consumer-supplied sorting controls. - `className: string` — Additional classes for the report. Install: `npx shadcn@latest add @bash/funnel-chart` · Page: https://bash-ui-registry.vercel.app/components/funnel-chart ### Searchable select — `@bash/searchable-select` (inputs) A single-choice dropdown with a search field above a grouped, scrollable list of options. When to use: Use for choosing one client, place or category from a long list. Filters immediately by label, group or keywords; supports arrow keys, Enter and Escape. Props: - `id: string` — Unique control ID for labels and accessible option references. - `value: string` — Selected option value. - `onChange: (value: string) => void` — Called when an option is chosen. - `groups: readonly SearchableOptionGroup[]` — Named groups of options with value, label and optional search keywords. - `placeholder: string` — Trigger text before a choice is made. - `searchPlaceholder: string` — Prompt and accessible label for the search field. - `disabled: boolean` — Prevents opening the picker. - `allowCustom: boolean` — Offers the typed text as a choice. Off by default. - `extraGroups: readonly SearchableOptionGroup[]` — Additional results above the filtered list; not filtered again. - `onQueryChange: (query: string) => void` — Reports search text for externally supplied results. - `searchHint: ReactNode` — Optional hint under the search field. - `emptyMessage: string` — Text when there are no results. - `unlistedLabel: string` — Explains a selected value missing from the supplied options. Install: `npx shadcn@latest add @bash/searchable-select` · Page: https://bash-ui-registry.vercel.app/components/searchable-select ### Send button — `@bash/send-button` (buttons) A send button whose paper plane bobs, turns and flies forward on hover as the label slides out behind it, with a pending state that holds the plane still. When to use: Use for the one action on a screen that sends something out of the app: an email, a message, an invitation. Do not use it for ordinary saves or submits; the flourish only means something if it is rare. Props: - `label: ReactNode` — Resting label. Defaults to "Send". - `pending: boolean` — Shows pendingLabel, holds the plane still and disables the button. - `pendingLabel: ReactNode` — Label while pending. Defaults to "Sending…". - `tone: "ink" | "lead"` — Charcoal glass (default) or the lead accent, for light glass surfaces. - `radius: "pill" | "lg"` — Fully rounded (default) or the theme radius, e.g. as the left half of a split control. - `icon: LucideIcon` — Optional leading icon before the plane. - `...button props: ButtonHTMLAttributes` — onClick, disabled, title, className (merged, so h-9 or rounded-r-none override cleanly) and the rest. Install: `npx shadcn@latest add @bash/send-button` · Page: https://bash-ui-registry.vercel.app/components/send-button ### Arrow button — `@bash/arrow-button` (buttons) A pill whose small dot blooms to fill it on hover while the label slides out and returns beside an up-right arrow in inverted colours, without the pill changing width. When to use: Use for a page's main outbound call to action, such as Download or Sign up: solid in the hero, outlined in the navigation. Do not use for form submits or dense app toolbars; the bloom is a marketing flourish and loses its point when repeated. Props: - `label: ReactNode` — The label, at rest and beside the arrow on hover. Defaults to "Download Now". - `variant: "solid" | "outline"` — solid (default): primary fill blooming into the page colour. outline: a hairline blooming into the primary fill. - `size: "sm" | "md" | "lg"` — 36px, 40px (default) or 48px tall. - `href: string` — Given, renders an ; omitted, renders a