Initialize Aspekt UI

Run the CLI in a React and Tailwind project. It adds the Aspekt theme tokens, creates your project defaults, and prepares your project for copied source components.

pnpm dlx @aspekt/ui init --preset square

Choose project shape

Use square or round as the default shape for installed components. Aspekt stores the setting in components/aspekt/config.ts, and direct component props like shape="round" still override it.

npx @aspekt/ui init --preset roundnpx @aspekt/ui preset square

Add a component

Add only the components you need. The CLI copies the component source into your project so you can edit it directly, and refreshes the Aspekt CSS theme block if needed.

pnpm dlx @aspekt/ui add button

Import local source

Components live in your app, usually under components/aspekt. Import them from your local component path.

import { Button } from "@/components/aspekt/button"; export function SaveButton() {  return <Button>Save changes</Button>;}

Use the same pattern everywhere

Every component follows the same local source pattern. Browse the sidebar, pick the component you need, and add it with the CLI.

• npx @aspekt/ui add button for buttons.
• npx @aspekt/ui add dialog for modal workflows.
• npx @aspekt/ui add input for form fields.
• npx @aspekt/ui add sound-provider for global sound control.

Opt into sound feedback

Aspekt stays silent unless you opt in. Add SoundProvider when you want components to play sound, subscribe to specific sound depths, change the sound variant, or tune the volume across your app. Mobile playback stays muted unless you pass mobileEnabled.

import { SoundProvider } from "@/components/aspekt/sound-provider"; export function AppProviders({ children }: { children: React.ReactNode }) {  return (    <SoundProvider      enabled      depths={["interactions", "cues"]}      variant="pop"      volume={0.8}    >      {children}    </SoundProvider>  );}

Override sound per component

After SoundProvider is mounted, use global settings for broad behavior, then override individual components when a specific interaction needs to be quieter, louder, or semantically different.

import { Button } from "@/components/aspekt/button"; export function Actions() {  return (    <div>      <Button status="success" sound="success">        Publish      </Button>      <Button sound={false} variant="outline">        Quiet action      </Button>    </div>  );}

Keep building

Start with Button, Input, Select, Dialog, and the typography primitives. Each page shows the import, live preview, and controls for the component API.