DOCSEARCHbyAlgolia
Submit Docs

Draft UI

website·Indexed 32 days ago

https://draft-ui.com/

A collection of accessible, copy-and-pasteable components built with React Aria Components and Tailwind CSS. Draft UI provides a wide range of accessible primitives including buttons, modals, date pickers, and form inputs, with an optional CLI tool for faster installation.

Tokens
5.1K
Snippets
47
Records
97
Agent score
63%

What's inside Draft UI

  1. Overview of the Table component

    The Table component displays data in rows and columns. It supports directional navigation keys for accessibility and optionally supports row selection and sorting.

  2. Overview of Draft UI

    Draft UI is a copy-and-paste component library designed to accelerate the development of accessible and interactive web applications. It is built upon React Aria Components to ensure high accessibility standards and follows styling and naming conventions inspired by Chakra UI and shadcn/ui.

  3. Overview of Draft UI

    Draft UI is a collection of copy-and-pasteable components built using React Aria Components and Tailwind CSS. Inspired by shadcn/ui, it provides components that developers own and can modify directly in their own codebase. Draft UI is compatible with any framework that supports React and is free for use in both personal and commercial projects.

  4. Overview of Draft UI

    Draft UI is a library of simply designed React components designed to make web accessibility easy to implement via copy-and-paste. It is built upon React Aria Components and Tailwind CSS and provides over 25 accessible components.

  5. Overview of the Grid List component

    The Grid List component is used to display a list of interactive items. It natively supports keyboard navigation, single or multiple item selection, and the execution of row-specific actions.

  6. Understand the Input primitive component

    The Input component displays a form input field. It is a primitive component and is not intended for standalone use; instead, it serves as the base for higher-level components that handle raw text, such as TextField, NumberField, SearchField, and ComboBox.

  7. Use the Select component to display a collapsible list of options

    The Select component displays a collapsible list of options, allowing the user to select a single item from the list.

  8. Use the ProgressBar component for operation progress

    The ProgressBar component is used to represent the progress of an operation over time, typically starting at zero and moving toward completion. It supports both determinate and indeterminate progress states. It is distinct from the Meter component, which is used for different measurement purposes. Common use cases include loading progress, download progress, or battery charge progress.

  9. Use the Label primitive component

    The Label component is used to display a label for a form input field or a component that resembles an input field. Note that Label is a primitive component and is not intended to be used in isolation. Many high-level input components—such as DatePicker, RadioGroup, Select, TextField, and Switch—automatically handle the linking of labels to their respective inputs.
    <Label>This is a label</Label>

  10. Use the Meter component to represent quantities

    The Meter component is used to represent a quantity within a known range or a fractional value. While visually similar to a ProgressBar, it is specifically intended for representing amounts or quantities such as storage space, download speed, or battery life.