Pre-built TypeScript components for your Noundry.ts projects. No React, just clean, modern TypeScript.
Add components to your project with a single command
bunx @noundryfx/ndts-cli initndts add input datatableimport { Input } from './ui'Run ndts add without arguments to see an interactive list of all available components.
# Interactive mode with checkboxes
ndts add
# Add specific components
ndts add input multiselect datatable
# Add all components
ndts add --all
# Filter by category
ndts add --all --category noundrySee all components in action with three different styling approaches:
Learn how to choose between component classes and utility classes
Make your components shareable, bookmarkable, and browser-history-aware with one simple prop
Just add bindToUrl: true to any component:
const searchInput = Input.create({
name: 'query',
bindToUrl: true // ← Enable URL sync
});
// User types "laptop"
// URL becomes: ?query=laptopExample URLs:
12 production-ready components for your TypeScript projects
ndts add input
Flexible input field with optional icon support (left or right positioning)
const input = Input.create({
name: 'email',
type: 'email',
icon: 'envelope',
iconPosition: 'left'
});ndts add select
Simple single-select dropdown with static or API data
const select = Select.create({
name: 'status',
options: [
{ value: 'active', label: 'Active' },
{ value: 'inactive', label: 'Inactive' }
]
});ndts add searchselect
Single-select dropdown with built-in search and API support
const searchSelect = SearchSelect.create({
name: 'country',
apiEndpoint: '/api/countries',
placeholder: 'Search countries...',
searchDelay: 300
});ndts add multiselect
Multi-select dropdown with API support and tag display
const select = MultiSelect.create({
name: 'users[]',
apiEndpoint: '/api/users',
placeholder: 'Select users...'
});ndts add datepicker
Date picker with calendar interface
ndts add daterangepicker
Date range selection for start and end dates
ndts add datatable
Enterprise-grade data table with premium pagination, sorting, and search
const table = DataTable.create({
columns: [
{ key: 'id', label: 'ID', sortable: true },
{ key: 'name', label: 'Name', sortable: true },
{ key: 'email', label: 'Email' }
],
apiEndpoint: '/api/users',
pagination: true,
pageSize: 10
});ndts add modal
Full-screen modal overlay
ndts add slideover
Slide-over panel (left or right)
ndts add navigationmenu
Navigation menu with nested items
ndts add pacer
Top-of-page loading bar for fetch/AJAX calls (like YouTube or NProgress)
Built for modern TypeScript development
Pure TypeScript components with zero framework overhead. Lightweight and fast.
Full TypeScript support with complete type definitions and IntelliSense.
Pre-styled with Tailwind CSS. Customize with utility classes or override styles.
Mix and match components. Each component is self-contained and independent.
Built-in API support for DataTable, MultiSelect, and other data-driven components.
ARIA attributes, keyboard navigation, and screen reader support built-in.
Start using components in your project today