# Install the package and it's peerDependencies
yarn add @ds-pack/components @ds-pack/use-refs @vanilla-extract/css @vanilla-extract/dynamic rainbow-sprinkles nanopop

Usage with Next.js:

// within `layout.tsx` or `_app.tsx`:
import '@ds-pack/components/dist/vars.css'
import '@ds-pack/components/dist/reset.css'

// ...
// within `layout.tsx` or `_document.tsx`:
import { themeClass } from '@ds-pack/components'

function Layout({ children }) {
  return <html className={themeClass}>// ...</html>
}

Usage with other frameworks (create-react-app, vanilla webpack applications, etc):

// Import the styles:
import '@ds-pack/components/dist/vars.css'
import '@ds-pack/components/dist/reset.css'
import { Button } from '@ds-pack/components'

Tools:

Typescript
Jest

Cutting a Release:

Update the version in package.json
Push to main (with associated changes)
Create release on the repo
- Workflow will kick off and build + publish the new version

Docs:

Theme

Components

Hooks

useTapable

System Props:

is - essentially forwardedAs from styled-components, but easier to type 😄
testIds - An optional prop that allows for passing in data-testid to the rendered components

FAQs

What is @ds-pack/components?

Is @ds-pack/components well maintained?

Package last updated on 06 Feb 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@ds-pack/components

Setup:

Install:

Tools:

Cutting a Release:

Docs:

Components

Hooks

System Props:

Related posts

OWASP 2025 Top 10 Adds Software Supply Chain Failures, Ranked Top Community Concern

9 Malicious NuGet Packages Deliver Time-Delayed Destructive Payloads