# Pixel UI > Text fields, selects, date pickers, toasts, tabs and charts as React components on your Tailwind theme. They submit with native forms and are keyboard complete, with a single pixel detail each. 30 components. - [Text field](https://elements.lumesec.ai/components/pixel-ui/input.md) ``: A labelled field whose underline lights up from the caret outwards. Validation runs on blur: an invalid value shakes the field, scatters the pixels and rolls in the message; a valid one draws a check. - [Password](https://elements.lumesec.ai/components/pixel-ui/password.md) ``: A pixel strength meter in four segments, a show/hide toggle and a checklist whose bullets pop as each rule is met. With `minScore` set, weaker passwords block form submission. - [One-time code](https://elements.lumesec.ai/components/pixel-ui/otp.md) ``: Six boxes backed by one real input, so typing, pasting and the phone’s one-time-code autofill all work. Digits rise into their boxes; a wrong code shakes and falls away. - [Search with results](https://elements.lumesec.ai/components/pixel-ui/search.md) ``: Fuzzy matching with highlighted letters, a scanning line while it searches and a pixel highlight that springs between results. With `hotkey`, “/” focuses it from anywhere. - [Select](https://elements.lumesec.ai/components/pixel-ui/select.md) ``: Takes a typed list of options. The menu unfolds downward, a pixel highlight follows your pointer or the arrow keys, and typing a letter jumps to it. - [Slider](https://elements.lumesec.ai/components/pixel-ui/slider.md) ``: A general slider with a pixel track, a springy thumb, optional tick marks and a rolling value with prefix or unit. - [Checkbox](https://elements.lumesec.ai/components/pixel-ui/checkbox.md) ``: Fills from the centre and draws its check, and supports the mixed state. This demo wires an “All channels” parent to three children. - [Option cards](https://elements.lumesec.ai/components/pixel-ui/choice.md) ``: A radio group as cards. The selection outline is made of pixels that fly from the old card to the new one, then keep circling slowly. - [Tag input](https://elements.lumesec.ai/components/pixel-ui/tags.md) ``: Enter or comma adds a tag, Backspace on an empty field marks the last one and a second press removes it. Removed tags break into pixels; duplicates shake instead of being added. - [Date picker](https://elements.lumesec.ai/components/pixel-ui/date.md) ``: A month grid with a pixel selection block that springs between days, a dotted band across ranges and a mark on today. Weeks start on Monday; leave out `range` for a single date. - [Text area with budget](https://elements.lumesec.ai/components/pixel-ui/textarea.md) ``: Grows with its content and shows the character budget as pixels that turn amber near the limit. Going over is allowed but blinks red and marks the form invalid. - [Async button](https://elements.lumesec.ai/components/pixel-ui/button.md) ``: Return a promise from `onClick` (or pass one to `run()` on its ref) and it shows a pixel spinner, then a drawn check or a shake with “Try again”. Inside a form, `type="submit"` submits it. - [Two-step delete](https://elements.lumesec.ai/components/pixel-ui/confirm.md) ``: The first click arms it and a pixel fuse burns down along the bottom. A second click inside the window confirms with a burst; Escape, blur or the timeout cancel it. - [Toasts](https://elements.lumesec.ai/components/pixel-ui/toaster.md) ``: Stacked notifications with pixel icons and a draining timer that pauses while you hover. Add `position="bottom-right"` to pin it to the viewport. - [Progress bar](https://elements.lumesec.ai/components/pixel-ui/progress.md) ``: Determinate with a hot leading edge and a green sweep when it finishes, or indeterminate (no value) as a moving comet. - [Progress ring](https://elements.lumesec.ai/components/pixel-ui/ring.md) ``: A circular version with the percentage counting up in its centre. It turns green and throws a few sparks at 100%. - [Loading skeleton](https://elements.lumesec.ai/components/pixel-ui/skeleton.md) ``: Wraps real content and shows shimmering pixel bars in its shape while loading. Turning `loading` off dissolves the skeleton as the content fades in. - [Empty state](https://elements.lumesec.ai/components/pixel-ui/empty.md) ``: Four pixel illustrations that drop into place and float gently, with a title, a line of help and a slot for actions. - [Inline alert](https://elements.lumesec.ai/components/pixel-ui/alert.md) ``: Info, success, warning and error, each with a pixel icon and a glowing stripe. Dismissing scatters the stripe and collapses the alert. - [Tooltip](https://elements.lumesec.ai/components/pixel-ui/tooltip.md) ``: The bubble grows out of its arrow pixel by pixel on hover or keyboard focus, then the text fades in. Escape hides it. - [Avatar](https://elements.lumesec.ai/components/pixel-ui/avatar.md) ``: Initials on a pixel field coloured from the name, so the same person always gets the same colour. Status dots pulse when online, and hovering sends a ripple through the field. - [Tabs](https://elements.lumesec.ai/components/pixel-ui/tabs.md) ``: The underline is forty pixels that stream from the old tab to the new one. Each item brings its own panel content. - [Pagination](https://elements.lumesec.ai/components/pixel-ui/pagination.md) ``: Page buttons with ellipses, where the current-page block slides to the page you pick. - [Sidebar nav](https://elements.lumesec.ai/components/pixel-ui/nav.md) ``: Takes a list of links and adds pixel icons, count badges, a soft hover block and an active bar that slides to the current item. - [Accordion](https://elements.lumesec.ai/components/pixel-ui/accordion.md) ``: Pixel plus signs fold into minus signs, panels open smoothly and a dotted rail marks the open answer. Add multiple to allow several open at once. - [Command menu](https://elements.lumesec.ai/components/pixel-ui/command.md) ``: A ⌘K / Ctrl+K palette with grouped commands, fuzzy search and a springing pixel highlight. It traps focus while open and returns it to the trigger on close. - [Wizard steps](https://elements.lumesec.ai/components/pixel-ui/steps.md) ``: Numbered nodes joined by pixel lines that fill as you advance. Finished steps show a check and can be clicked to go back. - [Sparkline](https://elements.lumesec.ai/components/pixel-ui/sparkline.md) ``: An inline pixel line with a dithered area, coloured by trend unless you set a colour. Hovering shows the value under the pointer. - [Bar chart](https://elements.lumesec.ai/components/pixel-ui/bars.md) ``: Bars stacked from pixel cells that grow in one after another and spring to new data. Hover or use the arrow keys for exact values. - [Stat tile](https://elements.lumesec.ai/components/pixel-ui/kpi.md) ``: A metric with a rolling value, a change chip and a pixel history. Use invert when lower is better, so a drop shows green.