A ready-made component library with pre-built CSS and patterns, designed to help developers ship faster by reusing consistent UI building blocks instead of reinventing them for every project.
npm install cssnt-componentsReact component library with Material-ish design and CSSNT styling system.
``bash`
npm install cssnt-componentsor
yarn add cssnt-componentsor
pnpm add cssnt-components
- React 18.0.0 or higher (or React 19.0.0)
- React DOM 18.0.0 or higher (or React DOM 19.0.0)
`tsx`
import {Button, Card, Icon} from 'cssnt-components';
CSS styles must be imported in your application. You have two options:
Option 1: Import compiled CSS files
`tsx`
import 'cssnt-components/dist/css/main_light.css';
// or for dark mode
import 'cssnt-components/dist/css/main_dark.css';
Option 2: Compile SCSS manually
The SCSS source files are available in cssnt-components/src/_styles/scss/:
- main_light.scss - Light thememain_dark.scss
- - Dark theme
`tsx
import React from 'react';
import {Button} from 'cssnt-components';
import 'cssnt-components/dist/css/main_light.css';
function App() {
return (
);
}
export default App;
`
- Button - Button with multiple variantsButtonMenu
- - Button menuButtonSegmented
- - Segmented buttonsButtonSplit
- - Split buttonIcon
- - Material Symbols iconsCard
- - CardContainer
- - ContainerDivider
- - Divider
- Input - Text input fieldTextarea
- - Text areaSelect
- - Select dropdownCheckbox
- - CheckboxRadio
- - Radio buttonSwitch
- - Toggle switchSlider
- - SliderDatepicker
- - Date pickerTimepicker
- - Time picker
- NavigationBar - Navigation barNavigationDrawer
- - Navigation drawerMenu
- - MenuMenuItem
- - Menu itemTabs
- - TabsBreadcrumb
- - Breadcrumb navigationPagination
- - Pagination
- Alert - Alert messageAlertStack
- - Alert stackDialog
- - Dialog modalTooltip
- - TooltipBadges
- - BadgesChip
- - Chip
- Grid - Grid layoutStack
- - Vertical/horizontal stackMasonry
- - Masonry layoutList
- - ListListItem
- - List item
- Table - TableCarousel
- - CarouselAccordion
- - AccordionStepper
- - StepperCodebox
- - Code boxImage
- - Image
- Title - Title/HeadingParagraph
- - ParagraphAlink
- - Link
- Loader - LoaderSpinner
- - SpinnerShimmer
- - Shimmer effectError
- - Error message
- Header - HeaderFooter
- - FooterAppBar
- - App barToolbar
- - ToolbarLandingBanner
- - Landing bannerEmptyState
- - Empty state
- SheetBottom - Bottom sheetSideSheet
- - Side sheet
- Avatar - AvatarAvatarStack
- - Avatar stackSearch
- - SearchSearchResults
- - Search results
All components export their TypeScript types:
`tsx``
import type {IButtonProps, ICardProps} from 'cssnt-components';
MIT