Addons
Addons extend The New CSS with components and utilities that go beyond the core library. Each addon is a standalone npm package you can install individually — pick only what you need.
The core library stays under 5KB gzipped. Addons let you add buttons, cards, tables, and more without bloating the base bundle.
Installation
Install any addon via npm or load it from a CDN. Each addon works alongside the core library and uses the same design tokens.
npm install @thenewcss/buttons @thenewcss/cardsComponents
Pre-built UI components styled with the core design tokens.
Buttons
~3KBA complete button component system with sizes, colors, outline/ghost/link styles, loading states with spinner animation, and button groups.
.btn.btn-primary.btn-outline.btn-ghost.btn-loading.btn-groupBadges
~2KBPill-shaped badges and rectangular tags for status indicators, labels, and categorization. Includes color variants, outline/dot styles, and tag lists.
.badge.badge-primary.badge-outline.badge-dot.tag.tag-listCards
~2KBFlexible card components with header, body, footer, and image sections. Includes hover effects, horizontal layout, compact mode, and padding modifiers.
.card.card-header.card-body.card-hover.card-horizontal.card-flatTables
~2KBStyled table components with striped rows, hover highlights, bordered cells, compact mode, fixed layout, responsive wrapper, and cell alignment utilities.
.table.table-striped.table-hover.table-bordered.table-responsive.cell-truncateForms
~4KBStyled form controls with custom inputs, selects, checkboxes, radios, switches, range sliders, input groups, floating labels, validation states, and size variants.
.form-control.form-select.form-check.form-switch.input-group.form-floatingAlerts
~2KBAlert boxes with info, success, warning, and danger color variants. Includes a reusable close button and dismissible alert pattern.
.alert.alert-info.alert-success.alert-warning.alert-danger.btn-closeNavigation
~4KBNavbar, nav tabs, nav pills, breadcrumbs, and pagination in one package. CSS-only mobile toggle using details/summary.
.navbar.nav-tabs.nav-pills.breadcrumb.pagination.page-linkList Group
~2KBList group component with actionable items, flush variant, numbered lists, and color variants for primary, success, warning, and danger states.
.list-group.list-group-item.list-group-item-action.list-group-flush.list-group-numberedProgress
~3KBProgress bars with striped and animated variants, border and grow spinners, and placeholder skeleton loaders with glow and wave animations.
.progress-bar.progress-bar-striped.spinner-border.spinner-grow.placeholder.placeholder-waveAccordion
~2KBCSS-only accordion using native details/summary elements. Custom chevron indicator, smooth transitions, flush variant, and exclusive mode via HTML name attribute.
.accordion.accordion-item.accordion-header.accordion-body.accordion-flushModal
~3KBModal dialogs and offcanvas panels using native dialog element. Built-in backdrop, focus trap, Escape key, and size variants including fullscreen.
.modal.modal-header.modal-body.modal-footer.offcanvas.offcanvas-startUtilities
Extended design tokens, utility classes for colors and typography, and miscellaneous helpers.
Colors Extended
~15KB13 additional color palettes (indigo, violet, slate, emerald, cyan, rose, amber, lime, fuchsia, sky, stone, zinc, neutral) with full 11-shade ranges, utility classes for text/bg/border/gradient, hover variants, and dark mode support.
.text-indigo-600.bg-rose-500.border-emerald-200.from-cyan-500.to-violet-500Typography Extended
~5KBExtended typography with display sizes (5xl-9xl), gradient text utility, a prose class for rich text/markdown content auto-styling, and text-pretty for improved wrapping.
.text-5xl.text-9xl.text-gradient.prose.text-prettyHelpers
~2KBMiscellaneous utility helpers including clearfix, aspect ratios, stacks, stretched link, vertical rule, focus ring, object-fit, float, and vertical alignment.
.ratio-16x9.vstack.hstack.stretched-link.object-cover.focus-ringAll Addons
| Package | Description | Size |
|---|---|---|
| @thenewcss/buttons | Buttons with sizes, colors, and states | ~3KB |
| @thenewcss/badges | Badges, tags, and status indicators | ~2KB |
| @thenewcss/cards | Cards with sections, effects, and layouts | ~2KB |
| @thenewcss/tables | Styled tables with variants and cell utilities | ~2KB |
| @thenewcss/colors-extended | 13 color palettes with utility classes | ~15KB |
| @thenewcss/typography-extended | Display sizes, prose formatting, gradient text | ~5KB |
| @thenewcss/forms | Styled inputs, selects, checkboxes, and validation | ~4KB |
| @thenewcss/alerts | Alert boxes with color variants and close button | ~2KB |
| @thenewcss/navigation | Navbar, tabs, pills, breadcrumbs, and pagination | ~4KB |
| @thenewcss/list-group | List groups with actions and color variants | ~2KB |
| @thenewcss/progress | Progress bars, spinners, and skeleton loaders | ~3KB |
| @thenewcss/accordion | CSS-only collapsible accordion panels | ~2KB |
| @thenewcss/modal | Modal dialogs and offcanvas slide-in panels | ~3KB |
| @thenewcss/helpers | Clearfix, ratios, stacks, object-fit, and more | ~2KB |