Design systems, code-side
    Features
    Docs
    Pricing
    Mastery

    Articles to learn all about design systems.

    Sessions

    Videos and tutorial series with design system experts.

    Blog

    Latest posts and updates from our team.

    Log in
      • Welcome
      • Getting started
      • Online Studio
        • Git Integration
        • User's Preferences
      • CLI
      • Previews
      • Collaboration
        • Invite
        • Share
        • Comments
      • Design Tokens
        • Icon prefixUsing Style-Dictionary & Figma
        • Icon prefixUsing Figma Tokens Plugin
        • Icon prefixUsing Specify
        • Icon prefixUsing CSS Custom properties
        • Icon prefixUsing System-UI
      • Stories
      • Tests
      • Documentation
        • Export static site
      • Using the design system in your app
        • Standard procedure
        • Icon prefixCreate React App (CRA)
        • Icon prefixNuxt 3
        • Icon prefixNext.js 11 and earlier
        • Icon prefixNext.js 12 and later
        • Icon prefix11ty (with Nunjucks)
      • Visual review
      • How tos
        • Icon prefixImport modules
      • Technologies
        • Icon prefixJavaScript
        • Icon prefixTypeScript
        • Icon prefixJSX
        • Icon prefixComponent Story Format
        • Icon prefixCustom Elements Manifest
        • Icon prefixReact
        • Icon prefixPreact
        • Icon prefixVue 3
        • Icon prefixSvelte
        • Icon prefixStencil
        • Icon prefixRiot
        • Icon prefixµce
        • Icon prefixPrism
        • Icon prefixAssemblyScript
        • Icon prefixWebAssembly Text Format
        • Icon prefixCSS
        • Icon prefixSass
        • Icon prefixLess
        • Icon prefixmarkdown
        • Icon prefixmdjs
        • Icon prefixMD Vue
        • Icon prefixMDX
        • Icon prefixMDsveX
        • Icon prefixNunjucks
        • Icon prefixpug
        • Icon prefixVS Code Custom Data Format
        • Icon prefixStyle Dictionary
      • Supported config files
        • package.json
        • studio.config.json
        • tsconfig.json
        • tailwind.config.js
        • eslint
        • prettier
        • stories.preview
        • custom-elements-manifest.config.mjs
        • sd.config.{json,js}
      • Technology demos
      • Design system examples
      • FAQ

      TypeScript #

      Source file extensions: .ts|.tsx

      TypeScript is transpiled using an in-browser version of Vite.

      More information about specific features:

      JSX

      JSX is only supoprt with file extension `.tsx`.

      Import modules

      Import modules from `npm` or inside the design system.

      JavaScript
      JSX