Surface variants
Colorway variants
Shape variants
With icons
Sizes from xxsmall to xlarge
Weight variants from light to extra-bold
Loading and disabled states
--button-padding-inline-emsThe default value is :1.2em --icon-button-padding-inline-emsThe default value is :0.69em --button-padding-block-emsThe default value is :0.67em --button-with-icon-padding-inline-offsetThe default value is :0.9em --button-border-width The default value is :1pxtrue, this will set the appropriate values for aria-busy and aria-label:red, :purple, :gold, etc.Sizes from xxsmall to xxxlarge, in weights from extra-light to extra-bold
Weights from extra-light to bold
All the colors
Many icons have a filled variant
Some icons do not have a filled variant
:viewBox attribute with values such as "0 0 24 24". The :width and :height attributes of the svg do not need to be set. For example, you can pass a Material Symbols icon in hiccupized svg to use in place of the Google Fonts Material Symbols font. This will be more performant, as you will avoid any Flash Of Unstyled Text that is a possibility when using modern icon fonts. There are small number of mui icon svgs in the kushi.ui.icon.mui.svg namespace which can be used. For example, to use the svg version of the (plus-symbol-shaped) "Add" icon you could require this namespace [kushi.ui.icon.mui.svg :as mui.svg] and then in your component code do [icon mui.svg/add]. You can also create and utilize similar namespace in your own project with your own collection of icon svgs.fill must be present in the Material Symbols font you are pulling in.Propeller, xxsmall to xxxlarge
Propeller, all the colors
Donut, xxsmall to xxxlarge
Donut, all the colors
Thinking, small to xxxlarge
Thinking, all the colors
spinner.core/donut, spinner.core/propeller, or spinner.core/propeller. See the "Usage with a button" in the Spinner > Examples section.Showing sizes from xsmall to xxxlarge
Radio group with labels
Radio group with labels, inherited color
Custom, with default checked
input div.Colorway variants
Different sizes from small to xxxlarge
With convex-styled thumb control
With oversized thumb control
With labeled track
With labeled thumb
With icon track
With icon thumb
Disabled state
--switch-width-ratio Setting this to 1.5 will result in a switch that has the aspect ratio of 1.5:1 (width:height). The default value is 2. --switch-border-width The default value is 2px. If customizing the value, it is recommended to use a px or rem value, especially if you are using the :-track-content-on or :-track-content-off options. --switch-border-color The default value is transparent, which will read as "padding" between the switch "thumb" and the switch "track", as by default the switch will have a solid background color in both the on and off states. You can supply a color value which will result in more of an "outlined" styling. --switch-thumb-scale-factor The default value is 1. Setting this to a value greater than 1 will result in the thumb height being greater than the track height.:-on? option:red, :purple, :gold, etc.Different sizes
With label
With label and trailing icon
Weight variants extra-light to extra-bold
label div.Simple, default
Simple, label at thumb bottom
Simple, label at track inline start
Simple, label at track inline end
Labels
Dot markers
Bar markers
Markers with no current value label
Fractional steps
Supplied step values
Supplied step values, custom horizontal shift for first and last values
min and a max. Note that :min, :max and :step are passed down to the underlying <input type=range> element, and do not need to be written with the custom opts syntax. Checkout input range docs for info on how min, max, and step work. Alternately, a scale of named, stepped values may be provided with the custom :-steps option.min or the first item in the supplied :-steps collection.default-index when you want to set the default value by index. This is the index of the number in a numeric range (with a min and max), or the index of a value in a supplied :-steps collectionfalse, the current step value label will not be displayed.Simple
Required
Disabled
With helper
With start enhancer
With end enhancer (icon)
With textarea element
All the options
<input> element of type text. If the option :-textarea? is set to true, a <textarea> element will be used instead.true will render an html <textarea/> element, instead of a <input type='text'/> element.:label element associated with the input field.:label element that contains the label text.label element associated with the input element, and end-enhancer div.:-label-placement is set to :inline. Must be a valid css width value (px, em rem, etc)start-enhancer div, the actual input element, and the end-enhancer div.:.kushi-text-input-helper label.If used, this should give the user actionable information about the value of the associated input field.:.kushi-text-input-helper label.If used, this should give the user actionable information about the value of the associated input field.Basic, auto-placement.
Styling via design token at callsite.
Tooltips with specific placements
:-placement option. The element being tipped must receive an attributes map that is a result of passing a map of options to kushi.ui.tooltip.core/tooltip-attrs. You can compose this map to an existing elements attributes map using the pattern: (merge-attrs (sx ...) (tooltip-attrs {...})) ~ or ~ (merge-attrs {...} (tooltip-attrs {...})) Tooltips can be custom styled and controlled via the following tokens in your theme: Colors and images: --tooltip-color --tooltip-color-dark-mode --tooltip-background-color --tooltip-background-color-dark-mode --tooltip-background-image Typography: --tooltip-line-height --tooltip-font-family --tooltip-font-size --tooltip-font-weight --tooltip-text-transform Geometry: --tooltip-padding-inline --tooltip-padding-block --tooltip-border-radius --tooltip-offset --tooltip-viewport-padding --tooltip-flip-viewport-edge-threshold --tooltip-auto-placement-y-threshold Choreography: --tooltip-delay-duration --tooltip-reveal-on-click-duration --tooltip-initial-scale --tooltip-offset-start --tooltip-transition-duration --tooltip-transition-timing-function Arrows: --tooltip-arrow-depth --tooltip-arrow-x-offset --tooltip-arrow-y-offset If you want supply the value of any of the above tokens ala-carte, check out the "Styling via design token at callsite" example in this Examples section. (tooltip-attrs {:-text "My text" :-tooltip-class (css [:--tooltip-font-size :34px])})) If you would like to use a value of 0 (px, ems, rem, etc.) for --tooltip-offset, --tooltip-arrow-x-offset, --tooltip-arrow-y-offset, or --tooltip-border-radius, you will need to use an explicit unit e.g. 0px.:top-left-corner :top-left :top :top-right :top-right-corner :right-top-corner :right-top :right :right-bottom :right-bottom-corner You can also use shorthand versions of the single keywords: :tlc :tl :t :tr :trc :rtc :rt :r :rb :rbc If you care about the tooltip placement respecting writing direction and/or document flow, you can use a vector of of up to 3 logical properties keywords, separated by spaces: [:inline-end :block-start] [:inline-end :block-start :corner] [:inline-start :center] [:inline-end :center] [:block-start :enter] [:block-end :center] [:block-end :inline-start]Basic
Styling via design token at callsite
With manual placement
Arrowless
With form
With dismiss action
Auto-dismissing, with manual placement
:-placement option. See the tooltip docs for details on :-placement. The element owning the popover must receive an attributes map that is a result of passing a map of options to kushi.ui.popover.core/popover-attrs. You can compose this map to an existing element's attributes map with kushi.core/merge-attrs using the pattern: (merge-attrs (sx ...) (popover-attrs {...})) You are responsible for providing your own rendering function, which takes as a single argument the dom node of the generated popover into which you can render whatever you like. You can use the kushi.ui.popover.core/dismiss-popover! function if you want to close the popover from an action within the popover. If you are using a close button that is potitioned near the edge of the popover, it is recommended to give it a z-index of 1 or higher so that it does not get clipped by the arrow element. See the example above. Elements and behaviors of the popover containers can be custom styled and controlled via the following tokens in your theme: Colors and images:--popover-background-color--popover-background-color-dark-mode--popover-background-image--popover-box-shadow--popover-border-width--popover-border-style--popover-border-color Geometry:--popover-min-width--popover-min-height--popover-border-radius--popover-offset--popover-viewport-padding--popover-flip-viewport-edge-threshold--popover-auto-placement-y-threshold Choreography:--popover-offset-start--popover-z-index--popover-delay-duration--popover-initial-scale--popover-offset-start--popover-transition-duration--popover-transition-timing-function--popover-auto-dismiss-duration Arrows:--popover-arrow-inline-inset--popover-arrow-block-inset--popover-arrow-depth If you want supply the value of any of the above tokens ala-carte, check out the "Styling via design token at callsite" example in this Examples section. If you would like to use a value of 0 (px, ems, rem, etc.) for --popover-offset, --popover-arrow-inline-inset, --popover-arrow-block-inset, or --popover-border-radius, you will need to use an explicit unit e.g. 0px.(fn [el] (rdom/render [my-popover-content] el)):top-left-corner :top-left :top :top-right :top-right-corner :right-top-corner :right-top :right :right-bottom :right-bottom-corner You can also use shorthand versions of the single keywords: :tlc :tl :t :tr :trc :rtc :rt :r :rb :rbc If you care about the popover placement respecting writing direction and/or document flow, you can use a vector of of up to 3 logical properties keywords, separated by spaces: [:inline-end :block-start] [:inline-end :block-start :corner] [:inline-start :center] [:inline-end :center] [:block-start :enter] [:block-end :center] [:block-end :inline-start]--popover-auto-dismiss-durationBasic
With modal title, description, form with fields, and close button
Animated
Animated from top
Rounded, with white backdrop
No drop shadow
--modal-box-shadow--modal-box-shadow-dark-mode--modal-border-radius--modal-border-width--modal-border-style--modal-border-color--modal-border-color-dark-mode--modal-padding-block--modal-padding-inline--modal-backdrop-color--modal-margin--modal-min-width--modal-transition-duration Note that the value supplied to --modal-box-shadow should be one of the stock elevation tokens, level 1~5, expressed like so::$elevation-3, or var(--elevation-3)With notification, and manual dismiss cta
:-placement option. See the tooltip docs for details on :-placement. You will most likely want to use the :right-top or :right-bottom options, or the logic equivalent to these, which would be [:inline-end :block-start] and [:inline-end :block-end], respectively. In both cases, the toast will slide in, horizontally, from outside the viewport. If you want the toast to slide in from the top or bottom, you would use :top-right, or :bottom-right instead. You can trigger a toast via an element listener by using kushi.ui.toast.core/toast-attrs. You can compose this map to an existing element's attributes map with kushi.core/merge-attrs using the pattern: (merge-attrs (sx ...) (toast-attrs {...})) You are responsible for providing your own rendering function, which takes as a single argument the auto-generated dom node of the toast, into which you can render whatever you like. You can use the kushi.ui.toast.core/dismiss-toast! function if you want to close the toast from an action within the toast. Elements and behaviors of the toast containers can be custom styled and controlled via the following tokens in your theme: Colors and images:--toast-background-color--toast-background-color-dark-mode--toast-background-image--toast-box-shadow--toast-box-shadow-dark-mode--toast-border-width--toast-border-style--toast-border-color--toast-border-color-dark-mode Geometry:--toast-border-radius--toast-slot-padding-inline--toast-slot-padding-block--toast-slot-gap--toast-slot-z-index Choreography:--toast-delay-duration--toast-initial-scale--toast-transition-duration--toast-transition-timing-function--toast-auto-dismiss-duration If you want supply the value of any of the above tokens ala-carte, use the following pattern. (toast-attrs {:-toast-class (css [:--toast-background-color :beige])})) If you would like to use a value of 0 (px, ems, rem, etc.) for any of the tokens, you will need to use an explicit unit e.g. 0px.kushi.playground) uses reagent, but you could do something similar with another rendering library: (fn [el] (rdom/render [my-toast-content] el)):top-left-corner:top-left:top:top-right:top-right-corner:right-top-corner:right-top:right:right-bottom:right-bottom-corner You can also use shorthand versions of the single keywords: :tlc:tl:t:tr:trc:rtc:rt:r:rb:rbc If you care about the toast placement respecting writing direction and/or document flow, you can use a vector of of up to 3 logical properties keywords, separated by spaces: [:inline-end :block-start][:inline-end :block-start :corner][:inline-start :center][:inline-end :center][:block-start :enter][:block-end :center][:block-end :inline-start]--toast-auto-dismiss-duration--toast-transition-duration. For users prefering reduced motion (an OS-level setting), toasts will never slide in, nor will they scale up or down upon entry.Sizes from xxsmall to large
Polar Bear
polar.bear@example.com
Polar Bear
polar.bear@example.com
Polar Bear
polar.bear@example.com
Polar Bear
polar.bear@example.com
Polar Bear
polar.bear@example.com
Elevated levels from 0 to 5
Polar Bear
polar.bear@example.com
Polar Bear
polar.bear@example.com
Polar Bear
polar.bear@example.com
Polar Bear
polar.bear@example.com
Polar Bear
polar.bear@example.com
Alien
Sizes from xxsmall to xlarge
Colorway variant
--tag-padding-inline-emsThe default value is :1.2em --icon-tag-padding-inline-emsThe default value is :0.69em --tag-padding-block-emsThe default value is :0.67em --tag-with-icon-padding-inline-offsetThe default value is :0.9em --tag-border-width The default value is :1pxtrue, this will set the appropriate values for aria-busy and aria-label:red, :purple, :gold, etc.Sizes from xxsmall to xlarge
With icon and dismiss button, in positive variant
Neutral variant
Accent variant
Positive variant
Warning variant
Negative variant
:.fixed-block-start-inside utility class, or the :.fixed-block-end-inside utility class for positioning at the bottom of the viewport.kushi.ui.icon/icon component. Places an icon anchored to the inline-start area of the callout. Optional.kushi.ui.callout.core/close-button. Optional.:red, :purple, :gold, etc.Basic
Dynamic label
Icon on right
Borders
Label weight
Body color
Header color
Click event
:start will place the at the inline start of the header, preceding the label. A value of :end will place the icon at the inline end of the header, opposite the label. Optional.true is passed, the collapse is initially rendered in an expanded state. Optional.Basic
With sizing options
min-width.:1:1 would result in square elements, while a value of :2:3 would result in elements with a portrait orientation.grid-gap.Kushi includes a foundation of global and alias color tokens.
Semantic alias tokens map to global tokens like so:
--positive200→--green200--negative400→--red400--warning300→--yellow300--accent600→--blue600--neutral50→--neutral50All --gray* values on the scale have a corresponding --neutral* alias token
All --red* values on the scale have a corresponding --negative* alias token
All --gold* values on the scale have a corresponding --warning* alias token
All --green* values on the scale have a corresponding --positive* alias token
All --blue* values on the scale have a corresponding --accent* alias token
Kushi includes a foundation of global tokens and utility class scales for type size, weight, letter-spacing, sizing, and capitalization.
[:span
(sx
:.xxlarge
:.bold
:.xloose
:.uppercase
:.italic)
"My text"]
[:span
(sx
:fs--$xxlarge
:fw--$bold
:letter-spacing--$xloose)
"My text "]
The following utility classes are available for font-style and capitalization::.sans:.serif:.italic:.oblique:.uppercase:.lowercase:.capitalize
Kushi employes the typefaces Inter and Fira Code by default.
These can be changed via the following tokens in the [:theme :design-tokens] entry in your theming config map (in kushi.edn file):
:.--sans-serif-font-stack:.--serif-font-stack:.--code-font-stack
Kushi offers a typographic sizing scale with t-shirt sizing fromxxxsmallup toxxxxlarge.
Kushi offers a typographic weight scale with t-shirt sizing fromthinup toheavy.
Kushi offers a typographic tracking scale with t-shirt sizing fromxxxtightup toxxxxloose.
Kushi is a base for building web UI with ClojureScript.