Dev Design Library

BaseLayer components

Re-usable multi part components built on React Aria and TailwindCSS.

Components
26
Framework
React
Stack
React, TypeScript, Tailwind
License
MIT
GitHub stars
205
Source
https://github.com/zwgnr/BaseLayer
Website
https://baselayer.dev
Install
npx shadcn@latest add https://baselayer.dev/r/{name}

All BaseLayer components

  • accordion: An accordion allows users to toggle the display of sections of content. Each accordion consists of a header with a title and content area.
  • badge: A badge is a small label that can be used to display information or status.
  • breadcrumbs: Breadcrumbs display a heirarchy of links to the current page or resource in an application.
  • button: A button allows a user to perform an action, with mouse, touch, and keyboard interactions.
  • calendar: A calendar displays one or more date grids and allows users to select either a single date or a contiguous range of dates.
  • card: Displays a card with header, content, and footer.
  • checkbox: A checkbox allows a user to select multiple items from a list of individual items, or to mark one individual item as selected.
  • combobox: A combo box combines a text input with a listbox, allowing users to filter a list of options to items matching a query.
  • command: A command palette that allows users to quickly search and execute commands using keyboard shortcuts.
  • date-field: A date field allows users to enter and edit date and time values using a keyboard. Each part of a date value is displayed in an…
  • date-picker: A date picker combines one or more DateFields with a calendar popover, allowing users to enter or select a single date/time or a range.
  • input: Allows a user to enter a plain text value with a keyboard.
  • menu: A menu displays a list of actions or options that a user can choose.
  • meter: A meter represents a quantity within a known range, or a fractional value.
  • modal: A modal is an overlay element which blocks interaction with elements outside it.
  • popover: A popover is an overlay element positioned relative to a trigger.
  • radio-group: A radio group allows a user to select a single option from a list of mutually exclusive options.
  • select: A select displays a collapsible list of options and allows a user to select one of them.
  • slider: A slider allows a user to select one or more values within a range.
  • switch: A switch allows a user to turn a setting on or off.
  • table: A table displays data in rows and columns and enables a user to navigate its contents via directional navigation keys, and optionally…
  • tabs: Tabs organize content into multiple sections and allow users to navigate between them.
  • tag-group: A tag group is a focusable list of labels, categories, keywords, filters, or other items, with support for keyboard navigation, selection…
  • time-field: A time field allows users to enter and edit time values using a keyboard. Each part of a time value is displayed in an individually…
  • toggle: A toggle button allows a user to toggle a selection on or off, for example switching between two states or modes.
  • tooltip: A tooltip displays a description of an element on hover or focus.

Browse by category