/*@jsxRuntime automatic @jsxImportSource react*/ const {jsx: _jsx, jsxs: _jsxs} = arguments[0]; function _createMdxContent(props) { const _components = Object.assign({ div: "div", pre: "pre", code: "code", span: "span" }, props.components); return _jsx(_components.div, { "data-rehype-pretty-code-fragment": "", children: _jsx(_components.pre, { className: "github-dark", style: { backgroundColor: "#24292e" }, tabIndex: "0", "data-language": "tsx", "data-theme": "default", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "default", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " Select," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " SelectContent," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " SelectItem," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " SelectTrigger," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " SelectGroup," }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: "} " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"~/core/ui/Select\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " IconButton " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"~/core/ui/IconButton\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " { MoonIcon, SunIcon } " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"@heroicons/react/24/outline\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "function" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "ThemeSelect" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "() {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "const" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " [" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "mode" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "setMode" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "] " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "useState" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "'light'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ");" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "return" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "div" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "className" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "'relative mx-auto flex h-full w-full max-w-xs flex-1 items-center justify-center'" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " >" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "div" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "Select" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "defaultValue" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{mode} " }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "onValueChange" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{setMode}>" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "SelectTrigger" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "asChild" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "IconButton" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {mode " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "===" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "'light'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "?" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "SunIcon" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "className" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "'h-4'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "} />" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " ) " }), _jsx(_components.span, { style: { color: "#F97583" }, children: ":" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "MoonIcon" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "className" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "'h-4'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "} />" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " )}" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "SelectContent" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "SelectGroup" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "SelectItem" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "value" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "'light'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}>" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "span" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "className" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "'flex items-center space-x-2.5'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}>" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "SunIcon" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "className" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "'h-4'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "} />" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "span" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">Light" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "SelectItem" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "value" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "'dark'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}>" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "span" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "className" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "'flex items-center space-x-2.5'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}>" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "MoonIcon" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "className" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "'h-4'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "} />" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "span" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">Dark" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " );" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}" }) })] }) }) }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = props.components || ({}); return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, { children: _jsx(_createMdxContent, props) })) : _createMdxContent(props); } return { default: MDXContent };

Selects - SaaS UI Kit

A collection of Select components with Tailwind CSS

Basic Select Component

A basic select component with Tailwind CSS and Next.js

Select Component with Icon Button

A select component with an icon button built with Tailwind CSS and Next.js