Skip to main content

Loading...

[NAVIGATE]:

FEATURES PRICING DOCS FAQ

> VIEW LIBRARY > GET STARTED

[NAV]

[09.1] UI LIBRARY 78

Docs ComponentsUI Components Library

[ [0x60] Components ] UI Components Library

UI Components Library

> 77+ production-ready components built with Radix UI and Tailwind CSS.

Overview

[ [0x60] STATUS ]

79 components across 11 categories. All fully typed with TypeScript. Built on Radix UI primitives for accessibility.

Features

[ [0x01] 79 ]

STATUS: READY

DESC: Production-ready components.

[ [0x02] 11 ]

STATUS: READY

DESC: Component categories.

[ [0x03] 100% ]

STATUS: READY

DESC: TypeScript coverage.

[ [0x04] RADIX ]

STATUS: READY

DESC: Accessible primitives.

Usage

[ [0xF5] IMPORT PATTERN ]

Import components from @/components/ui/

1// Import any component from @/components/ui/
2import { Button } from "@/components/ui/button";
3import { Card, CardHeader, CardContent } from "@/components/ui/card";
4import { Input } from "@/components/ui/input";
5import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";

Form Inputs

Collapsible content panels

Date selection calendar

Checkbox toggle

Date, range, time selection

Form with validation

Error message component

Basic text input field

Grouped inputs with addons

Numeric input with controls

One-time password input

Password input with toggle

Search input with icon

Form label component

Radio button group

Dropdown select

Multi-line text input

Buttons Actions

Primary action button

Data Display

Status badge/tag

Content container card

Syntax highlighted snippets

data-table-header

Table header with sorting

Empty state placeholder

Key performance indicator

Team member card

Loading skeleton

Statistics card

Charts Analytics

Area chart visualization

Bar chart visualization

Donut/ring chart

Funnel visualization

Gauge/meter chart

Heatmap visualization

Line chart visualization

Inline trend chart

Usage meter display

Overlays Modals

Confirmation dialog

Command palette

Popover content

Side panel/drawer

Navigation

Breadcrumb navigation

Main navigation component

Page pagination

Sidebar navigation

Layout Structure

Responsive container

Custom scrollable area

Visual separator

Feedback Notifications

Loading indicator

notification-badge

notification-center

Notification dropdown

notification-list

Notification list

Toast notification

SaaS Specific

api-key-manager

API key management

Audit log viewer

billing-summary-card

Billing summary display

onboarding-checklist

User onboarding checklist

Pricing plan selector

User registration form

Webhook event history

AI Credits

balance-display

Credit balance indicator

credit-usage-chart

Daily usage bar chart

credit-transaction-table

Transaction history

Landing Page Sections

FAQ section component

Features showcase section

Landing page footer

Hero section component

Pricing section component

Testimonials section

Previous

Getting Started

Next

Button

[ON THIS PAGE]:

No sections found

[ [0x71] SYSTEM INFO ]

└─ [STATUS]:■ OPERATIONAL

└─ [POWERED BY]:

NEXT.JS

REACT

TYPESCRIPT

TAILWIND

PRISMA

STRIPE

RESEND

[0x72] nav links.exe │ PID:1024

[ PRODUCT ]

> FEATURES > PRICING > DOCS > CHANGELOG

[ COMPANY ]

> ABOUT > CONTACT

[ LEGAL ]

> TERMS > PRIVACY > COOKIES > REFUND

[ [0x7F] COPYRIGHT ] © 2026 Fabrk │ All rights reserved

UI Components Overview - Fabrk Docs