[ ascii-cn ]

Select

PreviousNext

A terminal-inspired select with square geometry and clear keyboard focus.

"use client";
import { Select } from "@/components/ui/select";

export function Demo() {
  return (
    <label className="grid w-full max-w-sm gap-4">
      Workspace
      <Select>
        <option>Personal workspace</option>
        <option>Team workspace</option>
      </Select>
    </label>
  );
}

Installation

pnpm dlx shadcn@latest add https://ascii-cn.kdawg.dev/r/select.json

Usage

import { Select } from "@/components/ui/select"
components/ui/select.tsx
import type { ComponentProps } from "react";
export function Select({
  className = "",
  children,
  ...props
}: ComponentProps<"select">) {
  return (
    <select
      className={`h-11 w-full rounded-none border border-[#79bdff] bg-black px-3 font-mono text-base text-[#e8e8e5] focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[#79bdff] disabled:opacity-50 ${className}`}
      {...props}
    >
      {children}
    </select>
  );
}

Styling

Edit the component's Tailwind classes directly. Blue marks interactive controls; yellow highlights attention or a build action. Keep visible text labels alongside color.