Skip to content

Constructive Blocks

ShowcaseShowcase IntroductionIntroduction

Get started

Getting startedGetting started

Guides5

Theme to your brandTheme to your brand Wire a GraphQL adapterWire a GraphQL adapter Use with your authUse with your auth Customize a flowCustomize a flow Install one UI componentInstall one UI component

Concepts4

Why blocksWhy blocks Architecture & the registryArchitecture & the registry Design & motionDesign & motion The runtime contractThe runtime contract

Auth49

Organization9

App Shell6

SidebarSidebar HeaderHeader Account MenuAccount Menu Command PaletteCommand Palette NotificationsNotifications BreadcrumbsBreadcrumbs

AI Chat1

Chat WidgetChat Widget

Schema Builder7

Schema Builder — CoreSchema Builder — Core Schema Builder — StructureSchema Builder — Structure Schema Builder — RelationshipsSchema Builder — Relationships Schema Builder — IndexesSchema Builder — Indexes Schema Builder — PoliciesSchema Builder — Policies Schema Builder — TablesSchema Builder — Tables Schema BuilderSchema Builder

User2

AvatarAvatar Context SwitcherContext Switcher

Authentication5

Email + passwordEmail + password Email verificationEmail verification Password resetPassword reset Social / OAuth sign-inSocial / OAuth sign-in Cross-origin sign-inCross-origin sign-in

Account & session8

ProfileProfile Account emailsAccount emails Change passwordChange password SessionsSessions API keysAPI keys Account deletionAccount deletion Step-up verificationStep-up verification Connected accountsConnected accounts

Authorization5

OrganizationsOrganizations Org membersOrg members Org rolesOrg roles Org invitesOrg invites App membershipsApp memberships

Library & Runtime2

Auth errors (parseGraphQLError)Auth errors (parseGraphQLError)Auth message typesAuth message types

Core8

ButtonButton BadgeBadge LabelLabel SkeletonSkeleton CardCard SeparatorSeparator AlertAlert Unlink ButtonUnlink Button

Forms12

InputInput TextareaTextarea CheckboxCheckbox Checkbox GroupCheckbox Group Radio GroupRadio Group SwitchSwitch ProgressProgress SelectSelect FormForm Form ControlForm Control Input GroupInput Group FieldField

Pickers & input7

AutocompleteAutocomplete ComboboxCombobox Multi SelectMulti Select TagsTags Record PickerRecord Picker CalendarCalendar JSON InputJSON Input

Overlays8

TooltipTooltip PopoverPopover DialogDialog Alert DialogAlert Dialog Dropdown MenuDropdown Menu SheetSheet DrawerDrawer CommandCommand

Layout6

PortalPortal Scroll AreaScroll Area TabsTabs CollapsibleCollapsible ResizableResizable Flow Zoom PanelFlow Zoom Panel

Navigation6

PaginationPagination BreadcrumbBreadcrumb StepperStepper SidebarSidebar DockDock Page HeaderPage Header

Data display2

AvatarAvatar TableTable

Effects5

Flickering GridFlickering Grid Motion GridMotion Grid Progressive BlurProgressive Blur Progressive Blur Scroll ContainerProgressive Blur Scroll Container Responsive DiagramResponsive Diagram

Subsystems4

ToasterToaster Stack NavigationStack Navigation Toast NotificationsToast Notifications Org ChartOrg Chart

Storage8

Storage KitStorage Kit Storage Bucket RailStorage Bucket Rail Storage Object TableStorage Object Table Storage Upload DropzoneStorage Upload Dropzone Storage Object Detail SheetStorage Object Detail Sheet Storage Bucket Config SheetStorage Bucket Config Sheet Storage Empty StateStorage Empty State Storage BrowserStorage Browser

Bundles3

Form KitForm Kit Overlay KitOverlay Kit Layout KitLayout Kit

Utilities & theme7

Constructive ThemeConstructive Theme cn utilitycn utility Slot utilitySlot utility useControllableStateuseControllableState useDebounceuseDebounce useIsMobileuseIsMobile Motion ConfigMotion Config

v0.1.0 · 74 blocks · 76 ui

Constructive Blocks

Full-stack auth, org and admin blocks for the Constructive platform — install with shadcn.

Get started Browse docs

v0.1.0 74 blocks 76 ui components GitHub

Make it yours

Theme

Package manager

Built by Constructive