LPOTEVIN
Get in touch
Maintained

Nova Design System

Astro component library - tokens, accessibility, npm distribution.

Nova Design System started from a simple need: stop rewriting the same buttons, fields and modals from one project to the next. Every component ships with its TypeScript interface, its states (hover, focus, disabled) and isolated SCSS styles.

Distribution happens through npm (public package `@unkn0wndo3s/nova-design-system`), with a pipeline that checks, versions and publishes each release in 10 to 20 seconds. The package ships raw `.astro`/`.scss` sources, compiled on the consumer side.

Next up: progressively adapting NDS to my other projects, including outside the Astro ecosystem - a GPUI/Rust binding is planned for File Organizer.

Highlights

  • 29 components exported on npm
  • Color / type / spacing / radius tokens, light-dark theme
  • npm publish in ~15 s
  • Custom license: free to use, monetizing NDS itself prohibited

Interactive tour

The components, one by one.

Act I - Everything starts with tokens.

--nds-primary--nds-accent--nds-success-high--nds-warning-high--nds-error-high--nds-surface--nds-text--nds-neutral--nds-radius-md--nds-radius-full--nds-spacing-md--nds-spacing-xlAa--nds-font-monoAa--nds-font-sans

Actions

Four intents, one API.

primary, secondary, ghost, danger - three sizes, focus/disabled states handled, renders <a> or <button> depending on the href prop.

  • --nds-primary
  • --nds-on-primary
  • --nds-radius-md
usage.astro
<Button type="primary" size="md">Déployer</Button>
PrimarySuccessWarningErrorInfo

Feedback

A status readable at a glance.

Five semantic types × two variants (soft/solid). Colors come from the status token pairs, never hard-coded values.

  • --nds-success-high
  • --nds-warning-high
  • --nds-error-high
usage.astro
<Badge type="success">En production</Badge>

Forms

A real Web Component.

Wrapped as a custom element: internal state, events, keyboard accessibility - usable even outside Astro.

  • --nds-primary
  • --nds-surface-2
  • --nds-radius-full
usage.astro
<Toggle id="notifications" data-checked="true" />

Forms

Label, help, counter, errors.

Optional character counter, messages linked via aria-describedby, focus and error styles driven by tokens.

  • --nds-border
  • --nds-text
  • --nds-error-high
usage.astro
<TextField id="email" label="E-mail" type="email" />
  • TypeScript
  • Rust
  • Python

Forms

A styleable select, at last.

Custom listbox: keyboard navigation, outside-close, value mirrored into a hidden input for native forms.

  • --nds-surface
  • --nds-primary
  • --nds-shadow-md
usage.astro
<Select default="TypeScript">…</Select>

Forms

Native check, custom skin.

The native input stays in the DOM (free accessibility and forms); only the visual layer is redrawn with tokens.

  • --nds-primary
  • --nds-border
  • --nds-radius-sm
usage.astro
<Checkbox id="cgu" checked />
LP
ND

Data display

Photo, else initials.

Automatic fallback: if the image is missing or breaks, initials take over - the layout never shifts a pixel.

  • --nds-surface-2
  • --nds-text
  • --nds-radius-full
usage.astro
<Avatar type="initials" name="Louis Potevin" />

Navigation

Composable, not configurable.

No giant prop bag: sub-components (PaginationNumber…) you compose - the composition pattern used across NDS.

  • --nds-primary
  • --nds-neutral
  • --nds-radius-md
usage.astro
<Pagination><PaginationNumber>1</PaginationNumber>…</Pagination>
  • Avatar
  • Badge
  • Breadcrumb
  • BreadcrumbItem
  • Button
  • Card
  • Checkbox
  • Link
  • ListItem
  • ListItemSubtitle
  • ListItemTitle
  • LoadingBar
  • Modal
  • Navbar
  • Notification
  • NumericStepper
  • Pagination
  • PaginationNumber
  • Radio
  • Select
  • SelectOption
  • Sidebar
  • SidebarItem
  • Tab
  • TabContent
  • TabItem
  • TextField
  • Toggle
  • Tooltip

0components

v1.2.1latest npm version

npm install @unkn0wndo3s/nova-design-system